Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

tweak image handling: baseWidth: false to disable, noscale to disable…

… single image, add imgScaleTrivial to avoid mini-scaling
  • Loading branch information...
commit bd6d0d5d955f8abceba9132342d52b24e531cecc 1 parent 3ae2e59
David Buchmann dbu authored
Showing with 40 additions and 19 deletions.
  1. +8 −1 README.mdown
  2. +32 −18 src/slippy.js
9 README.mdown
View
@@ -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
50 src/slippy.js
View
@@ -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,
Please sign in to comment.
Something went wrong with that request. Please try again.