diff --git a/js/lightbox.js b/js/lightbox.js index 5f4b8af2..07511267 100644 --- a/js/lightbox.js +++ b/js/lightbox.js @@ -7,30 +7,25 @@ * - Attribution requires leaving author name, author link, and the license info intact */ +var LightboxOptions = { + fadeDuration: 500, + fitImagesInViewport: true, + resizeDuration: 700, + positionFromTop: 50, + showImageNumberLabel: true, + alwaysShowNavOnTouchDevices: false, + wrapAround: true, + autoRotate: 5000, + stopAutoOnInput: false, + albumLabel: function(curImageNum, albumSize) { + return "Image " + curImageNum + " of " + albumSize; + } +}; + (function() { // Use local alias var $ = jQuery; - var LightboxOptions = (function() { - function LightboxOptions() { - this.fadeDuration = 500; - this.fitImagesInViewport = true; - this.resizeDuration = 700; - this.positionFromTop = 50; - this.showImageNumberLabel = true; - this.alwaysShowNavOnTouchDevices = false; - this.wrapAround = false; - } - - // Change to localize to non-english language - LightboxOptions.prototype.albumLabel = function(curImageNum, albumSize) { - return "Image " + curImageNum + " of " + albumSize; - }; - - return LightboxOptions; - })(); - - var Lightbox = (function() { function Lightbox(options) { this.options = options; @@ -58,7 +53,7 @@ // Attach event handlers to the new DOM elements. click click click Lightbox.prototype.build = function() { var self = this; - $("
").appendTo($('body')); + $("
").appendTo($('body')); // Cache jQuery objects this.$lightbox = $('#lightbox'); @@ -93,20 +88,12 @@ }); this.$lightbox.find('.lb-prev').on('click', function() { - if (self.currentImageIndex === 0) { - self.changeImage(self.album.length - 1); - } else { - self.changeImage(self.currentImageIndex - 1); - } + self.prev(true); return false; }); this.$lightbox.find('.lb-next').on('click', function() { - if (self.currentImageIndex === self.album.length - 1) { - self.changeImage(0); - } else { - self.changeImage(self.currentImageIndex + 1); - } + self.next(true); return false; }); @@ -176,6 +163,19 @@ }).fadeIn(this.options.fadeDuration); this.changeImage(imageNumber); + + if (this.options.autoRotate) { + $('.slideshow-stop').text('Stop Slideshow'); + this.autoSlide(); + $('.slideshow-stop').toggle(function() { + $('.slideshow-stop').text('Start Slideshow'); + clearTimeout(self.autoInterval); + }, + function() { + $('.slideshow-stop').text('Stop Slideshow'); + self.autoSlide(); + }) + } }; // Hide most UI elements in preparation for the animated resizing of the lightbox. @@ -234,6 +234,45 @@ this.currentImageIndex = imageNumber; }; + // Go to the next slide. + // 1 param indicates that this transition was intialized by input from the + // user, as opposed to autorotation. + Lightbox.prototype.next = function(userInput) { + userInput = userInput ? userInput : false; + if (userInput && this.options.stopAutoOnInput) { + clearTimeout(this.autoInterval); + } + if (this.currentImageIndex !== this.album.length - 1) { + this.changeImage(this.currentImageIndex + 1); + } else if (this.options.wrapAround && this.album.length > 1) { + this.changeImage(0); + } + } + + // Go to the previous slide. + Lightbox.prototype.prev = function(userInput) { + userInput = userInput ? userInput : false; + if (userInput && this.options.stopAutoOnInput) { + clearTimeout(this.autoInterval); + } + if (this.currentImageIndex !== 0) { + this.changeImage(this.currentImageIndex - 1); + } else if (this.options.wrapAround && this.album.length > 1) { + this.changeImage(this.album.length - 1); + } + } + + Lightbox.prototype.autoSlide = function() { + if (!this.options.autoRotate) { + return; + } + var self = this; + self.autoInterval = setTimeout(function() { + self.next(); + self.autoSlide(); + }, this.options.autoRotate); + } + // Stretch overlay to fit the viewport Lightbox.prototype.sizeOverlay = function() { this.$overlay @@ -374,17 +413,9 @@ if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) { this.end(); } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) { - if (this.currentImageIndex !== 0) { - this.changeImage(this.currentImageIndex - 1); - } else if (this.options.wrapAround && this.album.length > 1) { - this.changeImage(this.album.length - 1); - } + this.prev(true); } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) { - if (this.currentImageIndex !== this.album.length - 1) { - this.changeImage(this.currentImageIndex + 1); - } else if (this.options.wrapAround && this.album.length > 1) { - this.changeImage(0); - } + this.next(true); } }; @@ -397,6 +428,7 @@ $('select, object, embed').css({ visibility: "visible" }); + clearTimeout(this.autoInterval); }; return Lightbox; @@ -404,8 +436,7 @@ })(); $(function() { - var options = new LightboxOptions(); - var lightbox = new Lightbox(options); + var lightbox = new Lightbox(LightboxOptions); }); }).call(this); diff --git a/js/lightbox.min.js b/js/lightbox.min.js index 25cf95e8..bb37bf2e 100644 --- a/js/lightbox.min.js +++ b/js/lightbox.min.js @@ -6,5 +6,4 @@ * - Free for use in both personal and commercial projects * - Attribution requires leaving author name, author link, and the license info intact */ -(function(){var a=jQuery,b=function(){function a(){this.fadeDuration=500,this.fitImagesInViewport=!0,this.resizeDuration=700,this.positionFromTop=50,this.showImageNumberLabel=!0,this.alwaysShowNavOnTouchDevices=!1,this.wrapAround=!1}return a.prototype.albumLabel=function(a,b){return"Image "+a+" of "+b},a}(),c=function(){function b(a){this.options=a,this.album=[],this.currentImageIndex=void 0,this.init()}return b.prototype.init=function(){this.enable(),this.build()},b.prototype.enable=function(){var b=this;a("body").on("click","a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]",function(c){return b.start(a(c.currentTarget)),!1})},b.prototype.build=function(){var b=this;a("
").appendTo(a("body")),this.$lightbox=a("#lightbox"),this.$overlay=a("#lightboxOverlay"),this.$outerContainer=this.$lightbox.find(".lb-outerContainer"),this.$container=this.$lightbox.find(".lb-container"),this.containerTopPadding=parseInt(this.$container.css("padding-top"),10),this.containerRightPadding=parseInt(this.$container.css("padding-right"),10),this.containerBottomPadding=parseInt(this.$container.css("padding-bottom"),10),this.containerLeftPadding=parseInt(this.$container.css("padding-left"),10),this.$overlay.hide().on("click",function(){return b.end(),!1}),this.$lightbox.hide().on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$outerContainer.on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$lightbox.find(".lb-prev").on("click",function(){return b.changeImage(0===b.currentImageIndex?b.album.length-1:b.currentImageIndex-1),!1}),this.$lightbox.find(".lb-next").on("click",function(){return b.changeImage(b.currentImageIndex===b.album.length-1?0:b.currentImageIndex+1),!1}),this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){return b.end(),!1})},b.prototype.start=function(b){function c(a){d.album.push({link:a.attr("href"),title:a.attr("data-title")||a.attr("title")})}var d=this,e=a(window);e.on("resize",a.proxy(this.sizeOverlay,this)),a("select, object, embed").css({visibility:"hidden"}),this.sizeOverlay(),this.album=[];var f,g=0,h=b.attr("data-lightbox");if(h){f=a(b.prop("tagName")+'[data-lightbox="'+h+'"]');for(var i=0;ij||e.height>i)&&(e.width/j>e.height/i?(h=j,g=parseInt(e.height/(e.width/h),10),d.width(h),d.height(g)):(g=i,h=parseInt(e.width/(e.height/g),10),d.width(h),d.height(g)))),c.sizeContainer(d.width(),d.height())},e.src=this.album[b].link,this.currentImageIndex=b},b.prototype.sizeOverlay=function(){this.$overlay.width(a(window).width()).height(a(document).height())},b.prototype.sizeContainer=function(a,b){function c(){d.$lightbox.find(".lb-dataContainer").width(g),d.$lightbox.find(".lb-prevLink").height(h),d.$lightbox.find(".lb-nextLink").height(h),d.showImage()}var d=this,e=this.$outerContainer.outerWidth(),f=this.$outerContainer.outerHeight(),g=a+this.containerLeftPadding+this.containerRightPadding,h=b+this.containerTopPadding+this.containerBottomPadding;e!==g||f!==h?this.$outerContainer.animate({width:g,height:h},this.options.resizeDuration,"swing",function(){c()}):c()},b.prototype.showImage=function(){this.$lightbox.find(".lb-loader").hide(),this.$lightbox.find(".lb-image").fadeIn("slow"),this.updateNav(),this.updateDetails(),this.preloadNeighboringImages(),this.enableKeyboardNav()},b.prototype.updateNav=function(){var a=!1;try{document.createEvent("TouchEvent"),a=this.options.alwaysShowNavOnTouchDevices?!0:!1}catch(b){}this.$lightbox.find(".lb-nav").show(),this.album.length>1&&(this.options.wrapAround?(a&&this.$lightbox.find(".lb-prev, .lb-next").css("opacity","1"),this.$lightbox.find(".lb-prev, .lb-next").show()):(this.currentImageIndex>0&&(this.$lightbox.find(".lb-prev").show(),a&&this.$lightbox.find(".lb-prev").css("opacity","1")),this.currentImageIndex1&&this.options.showImageNumberLabel?this.$lightbox.find(".lb-number").text(this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn("fast"):this.$lightbox.find(".lb-number").hide(),this.$outerContainer.removeClass("animating"),this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration,function(){return b.sizeOverlay()})},b.prototype.preloadNeighboringImages=function(){if(this.album.length>this.currentImageIndex+1){var a=new Image;a.src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){var b=new Image;b.src=this.album[this.currentImageIndex-1].link}},b.prototype.enableKeyboardNav=function(){a(document).on("keyup.keyboard",a.proxy(this.keyboardAction,this))},b.prototype.disableKeyboardNav=function(){a(document).off(".keyboard")},b.prototype.keyboardAction=function(a){var b=27,c=37,d=39,e=a.keyCode,f=String.fromCharCode(e).toLowerCase();e===b||f.match(/x|o|c/)?this.end():"p"===f||e===c?0!==this.currentImageIndex?this.changeImage(this.currentImageIndex-1):this.options.wrapAround&&this.album.length>1&&this.changeImage(this.album.length-1):("n"===f||e===d)&&(this.currentImageIndex!==this.album.length-1?this.changeImage(this.currentImageIndex+1):this.options.wrapAround&&this.album.length>1&&this.changeImage(0))},b.prototype.end=function(){this.disableKeyboardNav(),a(window).off("resize",this.sizeOverlay),this.$lightbox.fadeOut(this.options.fadeDuration),this.$overlay.fadeOut(this.options.fadeDuration),a("select, object, embed").css({visibility:"visible"})},b}();a(function(){{var a=new b;new c(a)}})}).call(this); -//# sourceMappingURL=lightbox.min.map \ No newline at end of file +var LightboxOptions={fadeDuration:500,fitImagesInViewport:true,resizeDuration:700,positionFromTop:50,showImageNumberLabel:true,alwaysShowNavOnTouchDevices:false,wrapAround:true,autoRotate:5e3,stopAutoOnInput:false,albumLabel:function(e,t){return"Image "+e+" of "+t}};(function(){var e=jQuery;var t=function(){function t(e){this.options=e;this.album=[];this.currentImageIndex=void 0;this.init()}t.prototype.init=function(){this.enable();this.build()};t.prototype.enable=function(){var t=this;e("body").on("click","a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]",function(n){t.start(e(n.currentTarget));return false})};t.prototype.build=function(){var t=this;e("
").appendTo(e("body"));this.$lightbox=e("#lightbox");this.$overlay=e("#lightboxOverlay");this.$outerContainer=this.$lightbox.find(".lb-outerContainer");this.$container=this.$lightbox.find(".lb-container");this.containerTopPadding=parseInt(this.$container.css("padding-top"),10);this.containerRightPadding=parseInt(this.$container.css("padding-right"),10);this.containerBottomPadding=parseInt(this.$container.css("padding-bottom"),10);this.containerLeftPadding=parseInt(this.$container.css("padding-left"),10);this.$overlay.hide().on("click",function(){t.end();return false});this.$lightbox.hide().on("click",function(n){if(e(n.target).attr("id")==="lightbox"){t.end()}return false});this.$outerContainer.on("click",function(n){if(e(n.target).attr("id")==="lightbox"){t.end()}return false});this.$lightbox.find(".lb-prev").on("click",function(){t.prev(true);return false});this.$lightbox.find(".lb-next").on("click",function(){t.next(true);return false});this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){t.end();return false})};t.prototype.start=function(t){function s(e){n.album.push({link:e.attr("href"),title:e.attr("data-title")||e.attr("title")})}var n=this;var r=e(window);r.on("resize",e.proxy(this.sizeOverlay,this));e("select, object, embed").css({visibility:"hidden"});this.sizeOverlay();this.album=[];var i=0;var o=t.attr("data-lightbox");var u;if(o){u=e(t.prop("tagName")+'[data-lightbox="'+o+'"]');for(var a=0;af||i.height>a){if(i.width/f>i.height/a){u=f;o=parseInt(i.height/(i.width/u),10);r.width(u);r.height(o)}else{o=a;u=parseInt(i.width/(i.height/o),10);r.width(u);r.height(o)}}}n.sizeContainer(r.width(),r.height())};i.src=this.album[t].link;this.currentImageIndex=t};t.prototype.next=function(e){e=e?e:false;if(e&&this.options.stopAutoOnInput){clearTimeout(this.autoInterval)}if(this.currentImageIndex!==this.album.length-1){this.changeImage(this.currentImageIndex+1)}else if(this.options.wrapAround&&this.album.length>1){this.changeImage(0)}};t.prototype.prev=function(e){e=e?e:false;if(e&&this.options.stopAutoOnInput){clearTimeout(this.autoInterval)}if(this.currentImageIndex!==0){this.changeImage(this.currentImageIndex-1)}else if(this.options.wrapAround&&this.album.length>1){this.changeImage(this.album.length-1)}};t.prototype.autoSlide=function(){if(!this.options.autoRotate){return}var e=this;e.autoInterval=setTimeout(function(){e.next();e.autoSlide()},this.options.autoRotate)};t.prototype.sizeOverlay=function(){this.$overlay.width(e(window).width()).height(e(document).height())};t.prototype.sizeContainer=function(e,t){function u(){n.$lightbox.find(".lb-dataContainer").width(s);n.$lightbox.find(".lb-prevLink").height(o);n.$lightbox.find(".lb-nextLink").height(o);n.showImage()}var n=this;var r=this.$outerContainer.outerWidth();var i=this.$outerContainer.outerHeight();var s=e+this.containerLeftPadding+this.containerRightPadding;var o=t+this.containerTopPadding+this.containerBottomPadding;if(r!==s||i!==o){this.$outerContainer.animate({width:s,height:o},this.options.resizeDuration,"swing",function(){u()})}else{u()}};t.prototype.showImage=function(){this.$lightbox.find(".lb-loader").hide();this.$lightbox.find(".lb-image").fadeIn("slow");this.updateNav();this.updateDetails();this.preloadNeighboringImages();this.enableKeyboardNav()};t.prototype.updateNav=function(){var e=false;try{document.createEvent("TouchEvent");e=this.options.alwaysShowNavOnTouchDevices?true:false}catch(t){}this.$lightbox.find(".lb-nav").show();if(this.album.length>1){if(this.options.wrapAround){if(e){this.$lightbox.find(".lb-prev, .lb-next").css("opacity","1")}this.$lightbox.find(".lb-prev, .lb-next").show()}else{if(this.currentImageIndex>0){this.$lightbox.find(".lb-prev").show();if(e){this.$lightbox.find(".lb-prev").css("opacity","1")}}if(this.currentImageIndex1&&this.options.showImageNumberLabel){this.$lightbox.find(".lb-number").text(this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn("fast")}else{this.$lightbox.find(".lb-number").hide()}this.$outerContainer.removeClass("animating");this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration,function(){return t.sizeOverlay()})};t.prototype.preloadNeighboringImages=function(){if(this.album.length>this.currentImageIndex+1){var e=new Image;e.src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){var t=new Image;t.src=this.album[this.currentImageIndex-1].link}};t.prototype.enableKeyboardNav=function(){e(document).on("keyup.keyboard",e.proxy(this.keyboardAction,this))};t.prototype.disableKeyboardNav=function(){e(document).off(".keyboard")};t.prototype.keyboardAction=function(e){var t=27;var n=37;var r=39;var i=e.keyCode;var s=String.fromCharCode(i).toLowerCase();if(i===t||s.match(/x|o|c/)){this.end()}else if(s==="p"||i===n){this.prev(true)}else if(s==="n"||i===r){this.next(true)}};t.prototype.end=function(){this.disableKeyboardNav();e(window).off("resize",this.sizeOverlay);this.$lightbox.fadeOut(this.options.fadeDuration);this.$overlay.fadeOut(this.options.fadeDuration);e("select, object, embed").css({visibility:"visible"});clearTimeout(this.autoInterval)};return t}();e(function(){var e=new t(LightboxOptions)})}).call(this)