Merge pull request #11 from dbu/imagehandling

tweak image handling
Seldaek · Jan 28, 2012 · 5e775b3 · 5e775b3
2 parents 3ae2e59 + bd6d0d5
commit 5e775b3
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 19 deletions.
diff --git a/README.mdown b/README.mdown
@@ -65,6 +65,11 @@ Finally you should initialize Slippy and the syntax highlighter:
         });
     </script>
 
+Images are automatically scaled to fit onto the slide whatever the size of the
+browser window. You can tweak the behaviour with the baseWidth and imgScaleTrivial
+parameters (see below). If one of your images should never be scaled, add the class
+"noscale" to the <img> tag, i.e. <img src="text.png" class="noscale"/>
+
 The slippy() call takes an option object, which accepts the following keys:
 
 - animLen, duration for default animations (0 = disabled)
@@ -74,7 +79,9 @@ The slippy() call takes an option object, which accepts the following keys:
 - animOutRewind, receives a slide and animates it
 - baseWidth, defines the base for img resizing, if you don't want only
   full-width images, specify this as the pixel width of a slide so that
-  images are scaled properly (default is 620px wide)
+  images are scaled properly (default is 620px wide). Set to false to not scale images.
+- imgScaleTrivial, defines the limit beneath that images are not scaled to avoid
+  unnecessary scaling that renders the image less nice.
 - ratio, defines the width/height ratio of the slides, defaults to 1.3 (620x476)
 - margin, the fraction of screen to use as slide margin, defaults to 0.15
 

diff --git a/src/slippy.js b/src/slippy.js
@@ -98,24 +98,36 @@
             $('.slideContent')
                 .height(slideH*0.95)
                 .css('margin', (slideH*0.05).toString() + "px auto 0");
-            $('.slideContent img').each(function() {
-                var ratio, imgWidth, imgHeight;
-                imgWidth = $.data(this, 'origWidth');
-                imgHeight = $.data(this, 'origHeight');
-                if (!imgWidth || !imgHeight) {
-                    imgWidth = $(this).width();
-                    imgHeight = $(this).height();
-                    $.data(this, 'origWidth', imgWidth);
-                    $.data(this, 'origHeight', imgHeight);
-                }
-                if (imgWidth >= imgHeight) {
-                    ratio = Math.min(imgWidth, options.baseWidth) / options.baseWidth;
-                    $(this).css('width',  Math.round(ratio * slideW * 0.9));
-                } else {
-                    ratio = Math.min(imgHeight, options.baseWidth / options.ratio) / (options.baseWidth / options.ratio);
-                    $(this).css('height',  Math.round(ratio * slideH * 0.9));
-                }
-            });
+            if (options.baseWidth) {
+                $('.slideContent img').each(function() {
+                    if ($(this).hasClass('noscale')) return;
+                    var ratio, imgWidth, imgHeight;
+                    imgWidth = $.data(this, 'origWidth');
+                    imgHeight = $.data(this, 'origHeight');
+                    if (!imgWidth || !imgHeight) {
+                        imgWidth = $(this).width();
+                        imgHeight = $(this).height();
+                        $.data(this, 'origWidth', imgWidth);
+                        $.data(this, 'origHeight', imgHeight);
+                    }
+                    if (imgWidth >= imgHeight) {
+                        ratio = Math.min(imgWidth, options.baseWidth) / options.baseWidth;
+                        var target = Math.round(ratio * slideW * 0.9);
+                        if (Math.abs(target - imgWidth) < options.imgScaleTrivial) {
+                            // avoid useless scaling that just makes the image look ugly
+                            target = imgWidth;
+                        }
+                        $(this).css('width',  target);
+                    } else {
+                        ratio = Math.min(imgHeight, options.baseWidth / options.ratio) / (options.baseWidth / options.ratio);
+                        var target = Math.round(ratio * slideH * 0.9);
+                        if (Math.abs(target - imgHeight) < options.imgScaleTrivial) {
+                            target = imgHeight;
+                        }
+                        $(this).css('height',  target);
+                    }
+                });
+            }
             $('.slideContent embed').each(function() {
                 var ratio, imgWidth, newWidth, $el, $parent, $object;
                 $el = $(this);
@@ -432,6 +444,8 @@
                 animLen: 350,
                 // base width for proportional image scaling
                 baseWidth: 620,
+                // do not scale images by less then this to avoid unncessery scaling (in pixels)
+                imgScaleTrivial: 30,
                 // define animation callbacks, they receive a slide dom node to animate
                 animInForward: animInForward,
                 animInRewind: animInRewind,