From 6718ad0470f9a142335d1a69762b6c95a72c83c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mike=20Schw=C3=B6rer?= Date: Wed, 3 Sep 2014 19:25:56 +0200 Subject: [PATCH] Added big preview to programs/view images --- www/css/lightbox.css | 210 +++++++++++++ www/css/styles.css | 2 +- www/images/lightbox/close.png | Bin 0 -> 280 bytes www/images/lightbox/loading.gif | Bin 0 -> 8476 bytes www/images/lightbox/next.png | Bin 0 -> 1350 bytes www/images/lightbox/prev.png | Bin 0 -> 1360 bytes www/javascript/lightbox.js | 411 ++++++++++++++++++++++++++ www/javascript/lightbox.min.js | 10 + www/protected/views/layouts/main.php | 3 +- www/protected/views/programs/view.php | 4 +- 10 files changed, 637 insertions(+), 3 deletions(-) create mode 100644 www/css/lightbox.css create mode 100644 www/images/lightbox/close.png create mode 100644 www/images/lightbox/loading.gif create mode 100644 www/images/lightbox/next.png create mode 100644 www/images/lightbox/prev.png create mode 100644 www/javascript/lightbox.js create mode 100644 www/javascript/lightbox.min.js diff --git a/www/css/lightbox.css b/www/css/lightbox.css new file mode 100644 index 0000000..03a167a --- /dev/null +++ b/www/css/lightbox.css @@ -0,0 +1,210 @@ +/* Preload images */ +body:after { + content: url(/images/lightbox/close.png) url(/images/lightbox/loading.gif) url(/images/lightbox/prev.png) url(/images/lightbox/next.png); + display: none; +} + +.lightboxOverlay { + position: absolute; + top: 0; + left: 0; + z-index: 9999; + background-color: black; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + opacity: 0.8; + display: none; +} + +.lightbox { + position: absolute; + left: 0; + width: 100%; + z-index: 10000; + text-align: center; + line-height: 0; + font-weight: normal; +} + +.lightbox .lb-image { + display: block; + height: auto; + max-width: inherit; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; +} + +.lightbox a img { + border: none; +} + +.lb-outerContainer { + position: relative; + background-color: white; + *zoom: 1; + width: 250px; + height: 250px; + margin: 0 auto; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; +} + +.lb-outerContainer:after { + content: ""; + display: table; + clear: both; +} + +.lb-container { + padding: 4px; +} + +.lb-loader { + position: absolute; + top: 43%; + left: 0; + height: 25%; + width: 100%; + text-align: center; + line-height: 0; +} + +.lb-cancel { + display: block; + width: 32px; + height: 32px; + margin: 0 auto; + background: url(/images/lightbox/loading.gif) no-repeat; +} + +.lb-nav { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 10; +} + +.lb-container > .nav { + left: 0; +} + +.lb-nav a { + outline: none; + background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); +} + +.lb-prev, .lb-next { + height: 100%; + cursor: pointer; + display: block; +} + +.lb-nav a.lb-prev { + width: 34%; + left: 0; + float: left; + background: url(/images/lightbox/prev.png) left 48% no-repeat; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + transition: opacity 0.6s; +} + +.lb-nav a.lb-prev:hover { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} + +.lb-nav a.lb-next { + width: 64%; + right: 0; + float: right; + background: url(/images/lightbox/next.png) right 48% no-repeat; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + transition: opacity 0.6s; +} + +.lb-nav a.lb-next:hover { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} + +.lb-dataContainer { + margin: 0 auto; + padding-top: 5px; + *zoom: 1; + width: 100%; + -moz-border-radius-bottomleft: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.lb-dataContainer:after { + content: ""; + display: table; + clear: both; +} + +.lb-data { + padding: 0 4px; + color: #ccc; +} + +.lb-data .lb-details { + width: 85%; + float: left; + text-align: left; + line-height: 1.1em; +} + +.lb-data .lb-caption { + font-size: 13px; + font-weight: bold; + line-height: 1em; +} + +.lb-data .lb-number { + display: block; + clear: left; + padding-bottom: 1em; + font-size: 12px; + color: #999999; +} + +.lb-data .lb-close { + display: block; + float: right; + width: 30px; + height: 30px; + background: url(/images/lightbox/close.png) top right no-repeat; + text-align: right; + outline: none; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); + opacity: 0.7; + -webkit-transition: opacity 0.2s; + -moz-transition: opacity 0.2s; + -o-transition: opacity 0.2s; + transition: opacity 0.2s; +} + +.lb-data .lb-close:hover { + cursor: pointer; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} diff --git a/www/css/styles.css b/www/css/styles.css index e3ded54..3ba9dde 100644 --- a/www/css/styles.css +++ b/www/css/styles.css @@ -570,7 +570,7 @@ ul.nav li.dropdown-append:hover > ul.dropdown-menu { margin-left: 0; width: 100%; - + margin-right: auto; margin-left: auto; } diff --git a/www/images/lightbox/close.png b/www/images/lightbox/close.png new file mode 100644 index 0000000000000000000000000000000000000000..20baa1db5fdf9e22655a0f851c4401d36b9e7ef9 GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^(jd&i3?z4Pv7`ejn*g5>*Z=?j1DSvS{%vY%YG`Nx zvLV3R+Z)1I1qQoz?eg;S^6>Bg3hv&$d*{xbK#iaC4$A=f!X-g|!3vbDHnnh5Xg#OL;K8su!;fw4MC7hH<+BPou~5EnOggc)I$z JtaD0e0ssdsYEA$E literal 0 HcmV?d00001 diff --git a/www/images/lightbox/loading.gif b/www/images/lightbox/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..5087c2a644223a95984baefdb74f39a287fdfd9a GIT binary patch literal 8476 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 S-YhKu0000").appendTo($('body')); + + // Cache jQuery objects + this.$lightbox = $('#lightbox'); + this.$overlay = $('#lightboxOverlay'); + this.$outerContainer = this.$lightbox.find('.lb-outerContainer'); + this.$container = this.$lightbox.find('.lb-container'); + + // Store css values for future lookup + 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); + + // Attach event handlers to the newly minted DOM elements + this.$overlay.hide().on('click', function() { + self.end(); + return false; + }); + + this.$lightbox.hide().on('click', function(event) { + if ($(event.target).attr('id') === 'lightbox') { + self.end(); + } + return false; + }); + + this.$outerContainer.on('click', function(event) { + if ($(event.target).attr('id') === 'lightbox') { + self.end(); + } + return false; + }); + + this.$lightbox.find('.lb-prev').on('click', function() { + if (self.currentImageIndex === 0) { + self.changeImage(self.album.length - 1); + } else { + self.changeImage(self.currentImageIndex - 1); + } + 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); + } + return false; + }); + + this.$lightbox.find('.lb-loader, .lb-close').on('click', function() { + self.end(); + return false; + }); + }; + + // Show overlay and lightbox. If the image is part of a set, add siblings to album array. + Lightbox.prototype.start = function($link) { + var self = this; + var $window = $(window); + + $window.on('resize', $.proxy(this.sizeOverlay, this)); + + $('select, object, embed').css({ + visibility: "hidden" + }); + + this.sizeOverlay(); + + this.album = []; + var imageNumber = 0; + + function addToAlbum($link) { + self.album.push({ + link: $link.attr('href'), + title: $link.attr('data-title') || $link.attr('title') + }); + } + + // Support both data-lightbox attribute and rel attribute implementations + var dataLightboxValue = $link.attr('data-lightbox'); + var $links; + + if (dataLightboxValue) { + $links = $($link.prop("tagName") + '[data-lightbox="' + dataLightboxValue + '"]'); + for (var i = 0; i < $links.length; i = ++i) { + addToAlbum($($links[i])); + if ($links[i] === $link[0]) { + imageNumber = i; + } + } + } else { + if ($link.attr('rel') === 'lightbox') { + // If image is not part of a set + addToAlbum($link); + } else { + // If image is part of a set + $links = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]'); + for (var j = 0; j < $links.length; j = ++j) { + addToAlbum($($links[j])); + if ($links[j] === $link[0]) { + imageNumber = j; + } + } + } + } + + // Position Lightbox + var top = $window.scrollTop() + this.options.positionFromTop; + var left = $window.scrollLeft(); + this.$lightbox.css({ + top: top + 'px', + left: left + 'px' + }).fadeIn(this.options.fadeDuration); + + this.changeImage(imageNumber); + }; + + // Hide most UI elements in preparation for the animated resizing of the lightbox. + Lightbox.prototype.changeImage = function(imageNumber) { + var self = this; + + this.disableKeyboardNav(); + var $image = this.$lightbox.find('.lb-image'); + + this.$overlay.fadeIn(this.options.fadeDuration); + + $('.lb-loader').fadeIn('slow'); + this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); + + this.$outerContainer.addClass('animating'); + + // When image to show is preloaded, we send the width and height to sizeContainer() + var preloader = new Image(); + preloader.onload = function() { + var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth; + $image.attr('src', self.album[imageNumber].link); + + $preloader = $(preloader); + + $image.width(preloader.width); + $image.height(preloader.height); + + if (self.options.fitImagesInViewport) { + // Fit image inside the viewport. + // Take into account the border around the image and an additional 10px gutter on each side. + + windowWidth = $(window).width(); + windowHeight = $(window).height(); + maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20; + maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120; + + // Is there a fitting issue? + if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) { + if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) { + imageWidth = maxImageWidth; + imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10); + $image.width(imageWidth); + $image.height(imageHeight); + } else { + imageHeight = maxImageHeight; + imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10); + $image.width(imageWidth); + $image.height(imageHeight); + } + } + } + self.sizeContainer($image.width(), $image.height()); + }; + + preloader.src = this.album[imageNumber].link; + this.currentImageIndex = imageNumber; + }; + + // Stretch overlay to fit the viewport + Lightbox.prototype.sizeOverlay = function() { + this.$overlay + .width($(window).width()) + .height($(document).height()); + }; + + // Animate the size of the lightbox to fit the image we are showing + Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) { + var self = this; + + var oldWidth = this.$outerContainer.outerWidth(); + var oldHeight = this.$outerContainer.outerHeight(); + var newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding; + var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding; + + function postResize() { + self.$lightbox.find('.lb-dataContainer').width(newWidth); + self.$lightbox.find('.lb-prevLink').height(newHeight); + self.$lightbox.find('.lb-nextLink').height(newHeight); + self.showImage(); + } + + if (oldWidth !== newWidth || oldHeight !== newHeight) { + this.$outerContainer.animate({ + width: newWidth, + height: newHeight + }, this.options.resizeDuration, 'swing', function() { + postResize(); + }); + } else { + postResize(); + } + }; + + // Display the image and it's details and begin preload neighboring images. + Lightbox.prototype.showImage = function() { + this.$lightbox.find('.lb-loader').hide(); + this.$lightbox.find('.lb-image').fadeIn('slow'); + + this.updateNav(); + this.updateDetails(); + this.preloadNeighboringImages(); + this.enableKeyboardNav(); + }; + + // Display previous and next navigation if appropriate. + Lightbox.prototype.updateNav = function() { + // Check to see if the browser supports touch events. If so, we take the conservative approach + // and assume that mouse hover events are not supported and always show prev/next navigation + // arrows in image sets. + var alwaysShowNav = false; + try { + document.createEvent("TouchEvent"); + alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices)? true: false; + } catch (e) {} + + this.$lightbox.find('.lb-nav').show(); + + if (this.album.length > 1) { + if (this.options.wrapAround) { + if (alwaysShowNav) { + 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 (alwaysShowNav) { + this.$lightbox.find('.lb-prev').css('opacity', '1'); + } + } + if (this.currentImageIndex < this.album.length - 1) { + this.$lightbox.find('.lb-next').show(); + if (alwaysShowNav) { + this.$lightbox.find('.lb-next').css('opacity', '1'); + } + } + } + } + }; + + // Display caption, image number, and closing button. + Lightbox.prototype.updateDetails = function() { + var self = this; + + // Enable anchor clicks in the injected caption html. + // Thanks Nate Wright for the fix. @https://github.com/NateWr + if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") { + this.$lightbox.find('.lb-caption') + .html(this.album[this.currentImageIndex].title) + .fadeIn('fast') + .find('a').on('click', function(event){ + location.href = $(this).attr('href'); + }); + } + + if (this.album.length > 1 && 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 self.sizeOverlay(); + }); + }; + + // Preload previous and next images in set. + Lightbox.prototype.preloadNeighboringImages = function() { + if (this.album.length > this.currentImageIndex + 1) { + var preloadNext = new Image(); + preloadNext.src = this.album[this.currentImageIndex + 1].link; + } + if (this.currentImageIndex > 0) { + var preloadPrev = new Image(); + preloadPrev.src = this.album[this.currentImageIndex - 1].link; + } + }; + + Lightbox.prototype.enableKeyboardNav = function() { + $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this)); + }; + + Lightbox.prototype.disableKeyboardNav = function() { + $(document).off('.keyboard'); + }; + + Lightbox.prototype.keyboardAction = function(event) { + var KEYCODE_ESC = 27; + var KEYCODE_LEFTARROW = 37; + var KEYCODE_RIGHTARROW = 39; + + var keycode = event.keyCode; + var key = String.fromCharCode(keycode).toLowerCase(); + 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); + } + } 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); + } + } + }; + + // Closing time. :-( + Lightbox.prototype.end = function() { + this.disableKeyboardNav(); + $(window).off("resize", this.sizeOverlay); + this.$lightbox.fadeOut(this.options.fadeDuration); + this.$overlay.fadeOut(this.options.fadeDuration); + $('select, object, embed').css({ + visibility: "visible" + }); + }; + + return Lightbox; + + })(); + + $(function() { + var options = new LightboxOptions(); + var lightbox = new Lightbox(options); + }); + +}).call(this); diff --git a/www/javascript/lightbox.min.js b/www/javascript/lightbox.min.js new file mode 100644 index 0000000..25cf95e --- /dev/null +++ b/www/javascript/lightbox.min.js @@ -0,0 +1,10 @@ +/** + * Lightbox v2.7.1 + * by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/ + * + * @license http://creativecommons.org/licenses/by/2.5/ + * - 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 diff --git a/www/protected/views/layouts/main.php b/www/protected/views/layouts/main.php index b0629aa..0b02ca5 100644 --- a/www/protected/views/layouts/main.php +++ b/www/protected/views/layouts/main.php @@ -21,6 +21,7 @@ bootstrap->register(); ?> +