Added option to fit images to a bounding box

[mack3457]

To fit differently sized images nicely into a given environment, I added an option named 'bounding_box' holding the size, the images should be scaled to. Use [0, 0] to keep default behaviour.

Added a function setBoundingBox(width, height) to change behaviour afterwards.

--- js/jquery.rs.slideshow.js           2013-05-10 15:12:20.000000000 +0200
+++ js/jquery.rs.slideshow.bb.js        2013-05-12 06:37:52.000000000 +0200
@@ -448,6 +448,8 @@
                                        }
                                        $img.css({left: leftOffset});
                                        $img.css({top: topOffset});
+                                       $img.css({width: width});
+                                       $img.css({height: height});
                                        if (slide.image_title){
                                                $img.attr('title', slide.image_title);
                                        }
@@ -616,6 +618,18 @@
                                });
                                RssPrivateMethods._bindActiveIndex($slideshow);
                        });
+               },
+
+
+               /**
+               *       Scale images to bounding box keeping ascpect ratio.
+               *       Width or height = 0 keeps the size unchanged
+               */
+
+               setBoundingBox: function(width, height) {
+                       var bounding_box = $(this).data('rsf_slideshow').settings.bounding_box;
+                       bounding_box[0] = width;
+                       bounding_box[1] = height;
                }


@@ -843,6 +857,13 @@
                        var width = $img.outerWidth();
                        var height = $img.outerHeight();
                        if (width && height) {
+                               var bounding_box = $slideshow.data('rsf_slideshow').settings.bounding_box;
+                               if (bounding_box[0] > 0 && bounding_box[1] > 0) {
+                                       var fac = Math.min(bounding_box[0]/width,
+                                                       bounding_box[1]/height);
+                                       width = Math.ceil(width * fac);
+                                       height = Math.ceil(height * fac);
+                               }
                                $img.detach();
                                sucesss(width, height);
                                return true;
@@ -974,6 +995,9 @@
                        loop: true,
                        //      Start slideshow automatically on initialisation
                        autostart: true,
+                       //      Bounding box to scale images to. Keeps aspect ratio of images.
+                       //      [0,0] keeps the original image size
+                       bounding_box: [0,0],
                        //      Slides to add to the slideshow
                        slides: [],
                        //      Class of the div containing the slide image and caption

[dwalton76]

Thank you for posting this. The only problem I found is where you do:

if (bounding_box[0] > 0 && bounding_box[1] > 0) {

This needs to be: if (bounding_box && bounding_box[0] > 0 && bounding_box[1] > 0) {

else it crashes if "bounding_box" is not defined. Other than that it works great for me.