diff --git a/README.md b/README.md index 5edfe1f..4e69e13 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,7 @@ CMS plugins/mods # Version 1.9.4 -* Added aspectRatio so that the slider scales according to this ratio when the expand option is given. - +* Added aspectRatio so that the slider scales according to this ratio when the expand option is given. Thanks [npn66nicke](https://github.com/npn66nicke)! # Version 1.9.3 diff --git a/anythingslider.jquery.json b/anythingslider.jquery.json index c4ddb34..09ee987 100644 --- a/anythingslider.jquery.json +++ b/anythingslider.jquery.json @@ -1,7 +1,7 @@ { "name": "anythingslider", "title": "AnythingSlider", - "version": "1.9.3", + "version": "1.9.4", "description": "Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it's got lots of cool features.\n\nHere on CSS-Tricks, I've created a number of different sliders. Three, in fact. A \"featured content\" slider, a \"start/stop slider\", and \"moving boxes\". Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case with these things, people want them to do X, Y, and Z in addition to what they already did.\n\nThis new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really \"full featured\" slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.", "author": { "name": "Chris Coyier", diff --git a/component.json b/component.json index c4ddb34..09ee987 100644 --- a/component.json +++ b/component.json @@ -1,7 +1,7 @@ { "name": "anythingslider", "title": "AnythingSlider", - "version": "1.9.3", + "version": "1.9.4", "description": "Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it's got lots of cool features.\n\nHere on CSS-Tricks, I've created a number of different sliders. Three, in fact. A \"featured content\" slider, a \"start/stop slider\", and \"moving boxes\". Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case with these things, people want them to do X, Y, and Z in addition to what they already did.\n\nThis new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really \"full featured\" slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.", "author": { "name": "Chris Coyier", diff --git a/demos/css/page.css b/demos/css/page.css index 658a87e..ca16f23 100644 --- a/demos/css/page.css +++ b/demos/css/page.css @@ -33,6 +33,7 @@ ul li { font: 15px Georgia, Serif; margin: 0 0 8px 0; } .data td, .data th { border: #555 1px solid; padding: 0 5px; } .data th { background: #eee; } .data .col { width: 200px; } +.spacer { height: 50px; } /***************** Main demo page @@ -141,9 +142,10 @@ ul li { font: 15px Georgia, Serif; margin: 0 0 8px 0; } #expand #slider1, #expand #slider2 { width: 100%; height: 300px; list-style: none; } +#expand p { width: 75%; margin: 0 auto; } /* The next one is really vital since it is used to calculate the aspect ratio from. */ -#slider4 { width: 680px; height: 317px; } +#expand #slider4 { width: 680px; height: 317px; } body#expand h2, body#expand h3 { text-align: center; } diff --git a/expand.html b/expand.html index 0b58f2f..ce934ef 100644 --- a/expand.html +++ b/expand.html @@ -113,7 +113,7 @@

Full page width

-



+

Half page width with two images showing

@@ -131,15 +131,8 @@

Half page width with two images showing

- - - - - - - -



+

3/4 page width with one image showing (expand : true)

@@ -171,7 +164,7 @@

3/4 page width with one image showing (expand : true)

-



+

3/4 page width, one image (expand : true, aspectRatio : true)

@@ -209,7 +202,7 @@

3/4 page width, one image (expand : true, aspectRatio : true)

-



+

3/4 page width, one image (expand : true, aspectRatio : '680:317')

@@ -245,7 +238,7 @@

3/4 page width, one image (expand : true, aspectRatio : '680:317')

-



+

3/4 page width, one image (expand : true, aspectRatio : 680/317)

@@ -279,7 +272,7 @@

3/4 page width, one image (expand : true, aspectRatio : 680/317)

-



+

3/4 page width, one image (expand : true, aspectRatio : 1.5)

@@ -313,7 +306,7 @@

3/4 page width, one image (expand : true, aspectRatio : 1.5)

-



+

3/4 page width, one image (expand : true, aspectRatio : 1.5, showMultiple : 2)

diff --git a/js/jquery.anythingslider.js b/js/jquery.anythingslider.js index 6266d0c..f5e8687 100644 --- a/js/jquery.anythingslider.js +++ b/js/jquery.anythingslider.js @@ -1,5 +1,5 @@ /*! - AnythingSlider v1.9.3 + AnythingSlider v1.9.4 Original by Chris Coyier: http://css-tricks.com Get the latest version: https://github.com/CSS-Tricks/AnythingSlider @@ -51,7 +51,7 @@ base.$controls = $('
'); base.$nav = $(''); base.$startStop = $(''); - + if (o.buildStartStop || o.buildNavigation) { base.$controls.appendTo( (o.appendControlsTo && $(o.appendControlsTo).length) ? $(o.appendControlsTo) : base.$wrapper); } @@ -98,20 +98,21 @@ if (o.buildArrows) { base.buildNextBackButtons(); } base.$lastPage = base.$targetPage = base.$currentPage; - - // Initialize o.aspectRatio - // if aspectRatio = true calculate it - if (o.expand && o.aspectRatio === true){ - o.aspectRatio = base.$el.width() / base.$el.height(); - } - // Calculate and set a float from a string e.g. '680:317' - if (o.expand && !!o.aspectRatio && !(o.aspectRatio > 0) && o.aspectRatio.indexOf(':') !== -1){ - var f = o.aspectRatio.split(':'); - o.aspectRatio = f[0] / f[1]; - } - // Adjust the aspectRatio according to showMultiple i.e. the more panels shown the wider the slider gets - if (o.expand && o.aspectRatio > 0 && o.showMultiple > 1) { - o.aspectRatio = o.aspectRatio * o.showMultiple; + + // Initialize o.aspectRatio + if (o.expand) { + if (o.aspectRatio === true){ + // if aspectRatio = true calculate it + o.aspectRatio = base.$el.width() / base.$el.height(); + } else if (typeof o.aspectRatio === 'string' && o.aspectRatio.indexOf(':') !== -1){ + // Calculate and set a float from a string e.g. '680:317' + var f = o.aspectRatio.split(':'); + o.aspectRatio = f[0] / f[1]; + } + // Adjust the aspectRatio according to showMultiple i.e. the more panels shown the wider the slider gets + if (o.aspectRatio > 0 && o.showMultiple > 1) { + o.aspectRatio = o.aspectRatio * o.showMultiple; + } } base.updateSlider(); @@ -439,7 +440,7 @@ // Adjust slider dimensions on parent element resize base.checkResize = function(stopTimer){ - // checking document visibility - + // checking document visibility var vis = !!(doc.hidden || doc.webkitHidden || doc.mozHidden || doc.msHidden); clearTimeout(base.resizeTimer); base.resizeTimer = setTimeout(function(){ @@ -448,18 +449,18 @@ // base.width = width of one panel, so multiply by # of panels; outerPad is padding added for arrows. // ignore changes if window hidden if (!vis && (base.lastDim[0] !== w || base.lastDim[1] !== h)) { - + base.setDimensions(); // adjust panel sizes - + //callback for slider resize base.$el.trigger('slideshow_resized', base); - + // make sure page is lined up (use -1 animation time, so we can differeniate it from when animationTime = 0) base.gotoPage(base.currentPage, base.playing, null, -1); - + } if (typeof(stopTimer) === 'undefined'){ base.checkResize(); } - + // increase time if page is hidden; but don't stop it completely }, vis ? 2000 : 500); }; @@ -481,10 +482,11 @@ base.lastDim = [ base.$outer.width(), base.$outer.height() ]; w = base.lastDim[0] - base.outerPad[0]; h = base.lastDim[1] - base.outerPad[1]; - + // Rescale according to the aspectRatio if not null // We have already insured that (in init) o.aspectRatio contains a float. - if (!!o.aspectRatio){ + // make sure aspectRatio isn't infinity (divided by zero; so must be less than width, 3 might be a better number) + if (o.aspectRatio && o.aspectRatio < base.width){ var arW = h * o.aspectRatio; // Really: only one of these should be adjusted therefor the else ... if if (arW < w){ @@ -496,8 +498,7 @@ } } } - - + base.$wrapper.add(base.$window).css({ width: w, height: h }); base.height = h = (o.showMultiple > 1 && o.mode === 'vertical') ? ph : h; base.width = pw = (o.showMultiple > 1 && o.mode === 'horizontal') ? w/o.showMultiple : w; @@ -885,7 +886,7 @@ resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport // commented out as this will reduce the size of the minified version //aspectRatio : null, // Valid values: null, true, a float e.g. 1.5 (or as 3/2) or a ratio in a string e.g. '3:2' - // // If true calculate it from original width/height for slider element, if it is a number/ratio use that value + // If true calculate it from original width/height for slider element, if it is a number/ratio use that value showMultiple : false, // Set this value to a number and it will show that many slides at once easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI diff --git a/js/jquery.anythingslider.min.js b/js/jquery.anythingslider.min.js index 6e53576..72fb433 100644 --- a/js/jquery.anythingslider.min.js +++ b/js/jquery.anythingslider.min.js @@ -3,4 +3,4 @@ Original by Chris Coyier: http://css-tricks.com Get the latest version: https://github.com/CSS-Tricks/AnythingSlider */ -;(function(d,l,n){d.anythingSlider=function(m,p){var a=this,b,k;a.el=m;a.$el=d(m).addClass("anythingBase").wrap('
');a.$el.data("AnythingSlider",a);a.init=function(){a.options=b=d.extend({},d.anythingSlider.defaults,p);a.initialized=!1;d.isFunction(b.onBeforeInitialize)&&a.$el.bind("before_initialize",b.onBeforeInitialize);a.$el.trigger("before_initialize",a);d('\x3c!--[if lte IE 8]>