diff --git a/source/jquery.slides.coffee b/source/jquery.slides.coffee index cdeb9ba..9d118bb 100755 --- a/source/jquery.slides.coffee +++ b/source/jquery.slides.coffee @@ -84,6 +84,8 @@ # [function] Called when animation has started complete: () -> # [function] Called when animation is complete + zoom: false + # [boolean] Resize the images to fill the slider without distorting them class Plugin constructor: (@element, options) -> @@ -165,6 +167,10 @@ # Update sets width/height of slideshow @update() + + # Zoom the image so that it fills the slider without distortion if the option is set + if @options.zoom + @_zoom() # If touch device setup next slides @_setuptouch() if @data.touch @@ -286,6 +292,78 @@ $(".active", $element).removeClass "active" $(".slidesjs-pagination li:eq(" + current + ") a", $element).addClass "active" + # @_zoom() + # Resizes the children images of the slider so that they fill the slider without being distorted + Plugin::_zoom = -> + $element = $(@element) + @data = $.data this + + # The aspect ratio of the parent container + targetRatio = @options.width / @options.height + + # Set any children divs to full size so that the subsequent resizing of their images works + $(".slidesjs-control", $element).children("div").css + width: "100%", + height: "100%" + + # The children images + img = $(".slidesjs-control", $element).find("img, div img:first") + + + # Register the function to zoom each image as soon as it's loaded + img.each -> + $(this).one "load", -> + $img = $(this) + + imgWidth = this.width + imgHeight = this.height + + # The aspect ratio of this child img + imgRatio = imgWidth / imgHeight + + # A max width / height will cause manual resizing to fail, so we remove it if present. + $img.css + "max-width": "none", + "max-height": "none" + + # If the image is wider than the container, set it to fill the container's height and overflow by width + # Also set the margins so that the image is centered + if imgRatio > targetRatio + # Calculate half the amount by which the image is wider than the container as a percentage OF THE CONTAINER'S WIDTH + overflow = (imgRatio / targetRatio - 1) * 100 / 2 + + $img.css + height: "100%", + width: "auto", + margin: "0 0 0 -" + overflow + "%" + + # Vice versa for the other case (taller than container) + else + # Calculate half the amount by which the image is taller than the container as a percentage OF THE CONTAINER'S WIDTH + overflow = (1 / imgRatio - 1 / targetRatio) * 100 / 2 + + $img.css + height: "auto", + width: "100%", + margin: "-" + overflow + "% 0 0 0" + + # If the image was already loaded by the time this code runs, trigger the "load" handler now + if this.complete || this.naturalWidth != 0 + $(this).trigger "load" + + # @resize(width, height) + # Resize the slidershow to a new width and height + Plugin::resize = (width, height) -> + + # Set height and width in options + @options.width = width + @options.height = height + + # Refresh display + @update() + if @options.zoom + @_zoom() + # @update() # Update the slideshow size on browser resize Plugin::update = -> @@ -516,7 +594,7 @@ # Stop/pause slideshow on mouse enter slidesContainer.bind "mouseenter", => clearTimeout @data.restartDelay - $.data this, "restartDelay", null + $.data this, "restartDelay", null @stop() # Play slideshow on mouse leave diff --git a/source/jquery.slides.js b/source/jquery.slides.js index f5b2d27..b84aa3d 100644 --- a/source/jquery.slides.js +++ b/source/jquery.slides.js @@ -1,6 +1,5 @@ -// Generated by CoffeeScript 1.6.1 +// Generated by CoffeeScript 1.7.1 (function() { - (function($, window, document) { var Plugin, defaults, pluginName; pluginName = "slidesjs"; @@ -38,10 +37,10 @@ loaded: function() {}, start: function() {}, complete: function() {} - } + }, + zoom: false }; Plugin = (function() { - function Plugin(element, options) { this.element = element; this.options = $.extend(true, {}, defaults, options); @@ -54,8 +53,7 @@ })(); Plugin.prototype.init = function() { - var $element, nextButton, pagination, playButton, prevButton, stopButton, - _this = this; + var $element, nextButton, pagination, playButton, prevButton, stopButton; $element = $(this.element); this.data = $.data(this); $.data(this, "animating", false); @@ -93,15 +91,21 @@ return $slide.attr("slidesjs-index", i); }); if (this.data.touch) { - $(".slidesjs-control", $element).on("touchstart", function(e) { - return _this._touchstart(e); - }); - $(".slidesjs-control", $element).on("touchmove", function(e) { - return _this._touchmove(e); - }); - $(".slidesjs-control", $element).on("touchend", function(e) { - return _this._touchend(e); - }); + $(".slidesjs-control", $element).on("touchstart", (function(_this) { + return function(e) { + return _this._touchstart(e); + }; + })(this)); + $(".slidesjs-control", $element).on("touchmove", (function(_this) { + return function(e) { + return _this._touchmove(e); + }; + })(this)); + $(".slidesjs-control", $element).on("touchend", (function(_this) { + return function(e) { + return _this._touchend(e); + }; + })(this)); } $element.fadeIn(0); this.update(); @@ -127,16 +131,20 @@ text: "Next" }).appendTo($element); } - $(".slidesjs-next", $element).click(function(e) { - e.preventDefault(); - _this.stop(true); - return _this.next(_this.options.navigation.effect); - }); - $(".slidesjs-previous", $element).click(function(e) { - e.preventDefault(); - _this.stop(true); - return _this.previous(_this.options.navigation.effect); - }); + $(".slidesjs-next", $element).click((function(_this) { + return function(e) { + e.preventDefault(); + _this.stop(true); + return _this.next(_this.options.navigation.effect); + }; + })(this)); + $(".slidesjs-previous", $element).click((function(_this) { + return function(e) { + e.preventDefault(); + _this.stop(true); + return _this.previous(_this.options.navigation.effect); + }; + })(this)); if (this.options.play.active) { playButton = $("", { "class": "slidesjs-play slidesjs-navigation", @@ -150,14 +158,18 @@ title: "Stop", text: "Stop" }).appendTo($element); - playButton.click(function(e) { - e.preventDefault(); - return _this.play(true); - }); - stopButton.click(function(e) { - e.preventDefault(); - return _this.stop(true); - }); + playButton.click((function(_this) { + return function(e) { + e.preventDefault(); + return _this.play(true); + }; + })(this)); + stopButton.click((function(_this) { + return function(e) { + e.preventDefault(); + return _this.stop(true); + }; + })(this)); if (this.options.play.swap) { stopButton.css({ display: "none" @@ -168,26 +180,30 @@ pagination = $("