├── .gitignore ├── LICENSE.txt ├── README.md ├── css └── lightbox.css ├── images ├── blank.gif ├── close.gif ├── closelabel.gif ├── image-0.jpg ├── image-1.jpg ├── image-2.jpg ├── image-3.jpg ├── loading.gif ├── next.gif ├── nextlabel.gif ├── prev.gif ├── prevlabel.gif ├── thumb-0.jpg ├── thumb-1.jpg ├── thumb-2.jpg └── thumb-3.jpg ├── index.html └── jquery.lightbox.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Software License Agreement (BSD License) 2 | 3 | Copyright (c) 2008 Warren Krewenki 4 | All rights reserved. 5 | 6 | Redistribution and use of this software in source and binary forms, with or without modification, are 7 | permitted provided that the following conditions are met: 8 | 9 | * Redistributions of source code must retain the above 10 | copyright notice, this list of conditions and the 11 | following disclaimer. 12 | 13 | * Redistributions in binary form must reproduce the above 14 | copyright notice, this list of conditions and the 15 | following disclaimer in the documentation and/or other 16 | materials provided with the distribution. 17 | 18 | * Neither the name of jQuery Lightbox nor the names of its 19 | contributors may be used to endorse or promote products 20 | derived from this software without specific prior 21 | written permission of jQuery Lightbox. 22 | 23 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED 24 | WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A 25 | PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 26 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 27 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 28 | INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR 29 | TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF 30 | ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This repository was archived on 2023-07-08. No development or maintenance had been done in over a decade and the internet has long since moved on from the lightbox trend. So long, and thanks for all the fish. 2 | 3 | 4 | jQuery Lightbox 5 | =============== 6 | 7 | jQuery Lightbox is a simple port of the popular lightbox script, which is based on prototype and scriptaculous, to jQuery. 8 | -------------------------------------------------------------------------------- /css/lightbox.css: -------------------------------------------------------------------------------- 1 | #lightbox{ 2 | position: absolute; 3 | left: 0; 4 | width: 100%; 5 | z-index: 100; 6 | text-align: center; 7 | line-height: 0; 8 | } 9 | 10 | #lightbox a img{ border: none; } 11 | 12 | #outerImageContainer{ 13 | position: relative; 14 | background-color: #fff; 15 | width: 250px; 16 | height: 250px; 17 | margin: 0 auto; 18 | } 19 | 20 | #imageContainer{ 21 | padding: 10px; 22 | } 23 | 24 | #loading{ 25 | position: absolute; 26 | top: 40%; 27 | left: 0%; 28 | height: 25%; 29 | width: 100%; 30 | text-align: center; 31 | line-height: 0; 32 | } 33 | #hoverNav{ 34 | position: absolute; 35 | top: 0; 36 | left: 0; 37 | height: 100%; 38 | width: 100%; 39 | z-index: 10; 40 | } 41 | #imageContainer>#hoverNav{ left: 0;} 42 | #hoverNav a{ outline: none;} 43 | 44 | #prevLink, #nextLink{ 45 | width: 49%; 46 | height: 100%; 47 | background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */ 48 | display: block; 49 | } 50 | #prevLink { left: 0; float: left;} 51 | #nextLink { right: 0; float: right;} 52 | #prevLink:hover, #prevLink:visited:hover { background: url(../images/prev.gif) left 50% no-repeat; } 53 | #nextLink:hover, #nextLink:visited:hover { background: url(../images/next.gif) right 50% no-repeat; } 54 | 55 | /*** START : next / previous text links ***/ 56 | #nextLinkText, #prevLinkText{ 57 | color: #FF9834; 58 | font-weight:bold; 59 | text-decoration: none; 60 | } 61 | #nextLinkText{ 62 | padding-left: 20px; 63 | } 64 | #prevLinkText{ 65 | padding-right: 20px; 66 | } 67 | /*** END : next / previous text links ***/ 68 | /*** START : added padding when navbar is on top ***/ 69 | 70 | .ontop #imageData { 71 | padding-top: 5px; 72 | } 73 | 74 | /*** END : added padding when navbar is on top ***/ 75 | 76 | #imageDataContainer{ 77 | font: 10px Verdana, Helvetica, sans-serif; 78 | background-color: #fff; 79 | margin: 0 auto; 80 | line-height: 1.4em; 81 | } 82 | 83 | #imageData{ 84 | padding:0 10px; 85 | } 86 | #imageData #imageDetails{ width: 70%; float: left; text-align: left; } 87 | #imageData #caption{ font-weight: bold; } 88 | #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } 89 | #imageData #numberDisplay a { color: black; padding-left: 5px; padding-right: 5px;} 90 | #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; } 91 | #imageData #helpDisplay {clear: left; float: left; display: block; } 92 | 93 | #overlay{ 94 | position: absolute; 95 | top: 0; 96 | left: 0; 97 | z-index: 90; 98 | width: 100%; 99 | height: 500px; 100 | background-color: #000; 101 | filter:alpha(opacity=60); 102 | -moz-opacity: 0.6; 103 | opacity: 0.6 !important; 104 | display: none; 105 | } 106 | 107 | 108 | .clearfix:after { 109 | content: "."; 110 | display: block; 111 | height: 0; 112 | clear: both; 113 | visibility: hidden; 114 | } 115 | 116 | * html>body .clearfix { 117 | display: inline-block; 118 | width: 100%; 119 | } 120 | 121 | * html .clearfix { 122 | /* Hides from IE-mac \*/ 123 | height: 1%; 124 | /* End hide from IE-mac */ 125 | } 126 | 127 | #lightboxIframe { 128 | display: none; 129 | } 130 | -------------------------------------------------------------------------------- /images/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/blank.gif -------------------------------------------------------------------------------- /images/close.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/close.gif -------------------------------------------------------------------------------- /images/closelabel.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/closelabel.gif -------------------------------------------------------------------------------- /images/image-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/image-0.jpg -------------------------------------------------------------------------------- /images/image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/image-1.jpg -------------------------------------------------------------------------------- /images/image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/image-2.jpg -------------------------------------------------------------------------------- /images/image-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/image-3.jpg -------------------------------------------------------------------------------- /images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/loading.gif -------------------------------------------------------------------------------- /images/next.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/next.gif -------------------------------------------------------------------------------- /images/nextlabel.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/nextlabel.gif -------------------------------------------------------------------------------- /images/prev.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/prev.gif -------------------------------------------------------------------------------- /images/prevlabel.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/prevlabel.gif -------------------------------------------------------------------------------- /images/thumb-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/thumb-0.jpg -------------------------------------------------------------------------------- /images/thumb-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/thumb-1.jpg -------------------------------------------------------------------------------- /images/thumb-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/thumb-2.jpg -------------------------------------------------------------------------------- /images/thumb-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krewenki/jquery-lightbox/7d30b67a0be1598c95956c68ea1fb006cc013c5e/images/thumb-3.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Lightbox | Test Page 6 | 7 | 8 | 9 | 10 | 11 | 45 | 46 | 49 | 50 | 51 | 52 | 53 | 54 |

jQuery Lightbox v0.9

55 |

Modified work by Warren Krewenki

56 |

Originally written by Lokesh Dhakar

57 | 58 |

Example 1: Single Image

59 | 60 | 61 |

Example 2: Series

62 | 63 | 64 | 65 | 66 | 67 |

Example 3: Images loaded using jsonData parameter (thumbnails are static)

68 | 69 | 70 | 71 |

How to Use:

72 |

Part 1 - Setup

73 |
    74 |
  1. jQuery lightbox v0.5 uses the jQuery Library. You will need to include these two Javascript files in your header. 75 | 
    <script type="text/javascript" src="jquery.js"></script>
 76 | <script type="text/javascript" src="lightbox.js"></script>
 77 |
    78 |
    2. 79 |
  2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). 80 | 
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 81 |
    82 |
    3. 83 |
  3. Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.
    4. 84 |
85 |

Part 2 - Activate

86 |
    87 |
  1. Add a class="lightbox" attribute to any link tag to activate the lightbox. For example: 88 | 
    <a href="images/image-1.jpg" class="lightbox" title="my caption">image #1</a>
 89 |
    90 | Optional: Use the title attribute if you want to show a caption.
    2. 91 |
  2. If you have a set of related images that you would like to group, follow step one but additionally include a group name in the rel attribute. For example: 92 | 
    <a href="images/image-1.jpg" class="lightbox" rel="roadtrip">image #1</a>
 93 | <a href="images/image-2.jpg" class="lightbox" rel="roadtrip">image #2</a>
 94 | <a href="images/image-3.jpg" class="lightbox" rel="roadtrip">image #3</a>
 95 |
    96 | No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
    3. 97 |
98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /jquery.lightbox.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery Lightbox 3 | * @author Warren Krewenki 4 | * 5 | * This package is distributed under the BSD license. 6 | * For full license information, see LICENSE.TXT 7 | * 8 | * Based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) 9 | * 10 | * 11 | **/ 12 | 13 | (function($) { 14 | $.fn.lightbox = function(options) { 15 | // build main options 16 | var opts = $.extend({}, $.fn.lightbox.defaults, options); 17 | 18 | $(window).resize(resizeOverlayToFitWindow); 19 | 20 | return $(this).on(opts.triggerEvent,function(){ 21 | // initialize the lightbox 22 | initialize(); 23 | showLightbox(this); 24 | return false; 25 | }); 26 | /* 27 | # Initialize the lightbox by creating our html and reading some image data 28 | # This method is called by the constructor after any click events trigger it 29 | # You will never call it by itself, to my knowledge. 30 | */ 31 | function initialize() { 32 | $('#overlay, #lightbox').remove(); 33 | opts.inprogress = false; 34 | 35 | // if jsonData, build the imageArray from data provided in JSON format 36 | if (opts.jsonData && opts.jsonData.length > 0) { 37 | var parser = opts.jsonDataParser ? opts.jsonDataParser : $.fn.lightbox.parseJsonData; 38 | opts.imageArray = []; 39 | opts.imageArray = parser(opts.jsonData); 40 | } 41 | 42 | var outerImage = '
'; 43 | var imageData = '
'; 44 | 45 | if (opts.displayHelp) { 46 | imageData += '' + opts.strings.help + ''; 47 | } 48 | 49 | imageData += '
'; 50 | 51 | var string; 52 | 53 | if (opts.navbarOnTop) { 54 | string = '
'; 55 | $("body").append(string); 56 | $("#imageDataContainer").addClass('ontop'); 57 | } else { 58 | string = '
'; 59 | $("body").append(string); 60 | } 61 | 62 | if (opts.imageScroll === true) { 63 | $('#lightbox').css('position', 'fixed') 64 | } 65 | 66 | $("#overlay, #lightbox").click(function(){ end(); }).hide(); 67 | $("#loadingLink, #bottomNavClose").click(function(){ end(); return false;}); 68 | $('#outerImageContainer').width(opts.widthCurrent).height(opts.heightCurrent); 69 | $('#imageDataContainer').width(opts.widthCurrent); 70 | 71 | if (!opts.imageClickClose) { 72 | $("#lightboxImage").click(function(){ return false; }); 73 | $("#hoverNav").click(function(){ return false; }); 74 | } 75 | 76 | return true; 77 | }; 78 | 79 | /* 80 | # Get the document and window width/heigh 81 | # 82 | # Examples 83 | # 84 | # getPageSize() 85 | # # => [1024,768,1024,768] 86 | # 87 | # Returns a numerically indexed array of document width/height and window width/height 88 | */ 89 | function getPageSize() { 90 | var jqueryPageSize = new Array($(document).width(),$(document).height(), $(window).width(), $(window).height()); 91 | return jqueryPageSize; 92 | }; 93 | 94 | function getPageScroll() { 95 | var xScroll, yScroll; 96 | 97 | if (self.pageYOffset) { 98 | yScroll = self.pageYOffset; 99 | xScroll = self.pageXOffset; 100 | } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)){ // Explorer 6 Strict, Firefox 101 | yScroll = document.documentElement.scrollTop; 102 | xScroll = document.documentElement.scrollLeft; 103 | } else if (document.body) {// all other Explorers 104 | yScroll = document.body.scrollTop; 105 | xScroll = document.body.scrollLeft; 106 | } 107 | 108 | var arrayPageScroll = new Array(xScroll,yScroll); 109 | return arrayPageScroll; 110 | }; 111 | 112 | /* 113 | # Deploy the sexy overlay and display the lightbox 114 | # 115 | # imageObject - the jQuery object passed via the click event in the constructor 116 | # 117 | # Examples 118 | # 119 | # showLightbox($('#CheesusCrust')) 120 | # 121 | # Returns a boolean true, because it's got nothing else to return. It should give visual feedback when run 122 | */ 123 | function showLightbox(imageObject) { 124 | /** 125 | * select, embed and object tags render over the lightbox in some browsers 126 | * Right now, the best way to fix it is to hide them, but that can trigger reloading of some flash content 127 | * I don't have a better fix for this right now, but I want ot leave this comment here so you and I both 128 | * know that i'm aware of it, and I would love to fix it, if you have any suggestions. 129 | **/ 130 | $("select, embed, object").hide(); 131 | 132 | // Resize and display the sexy, sexy overlay. 133 | resizeOverlayToFitWindow(); 134 | $("#overlay").hide().css({ opacity : opts.overlayOpacity }).fadeIn(); 135 | imageNum = 0; 136 | 137 | // if data is not provided by jsonData parameter 138 | if (!opts.jsonData) { 139 | opts.imageArray = []; 140 | // if image is NOT part of a set.. 141 | if ((!getImageSetOf(imageObject) || (getImageSetOf(imageObject) == '')) && !opts.allSet) { 142 | // add single image to Lightbox.imageArray 143 | opts.imageArray.push(new Array(imageObject.href, opts.displayTitle ? imageObject.title : '')); 144 | } else { 145 | // if image is part of a set.. 146 | $("a").each(function() { 147 | if(this.href && (getImageSetOf(this) == getImageSetOf(imageObject))) { 148 | opts.imageArray.push(new Array(this.href, opts.displayTitle ? this.title : '')); 149 | } 150 | }); 151 | } 152 | } 153 | 154 | if (opts.imageArray.length > 1) { 155 | for (i = 0; i < opts.imageArray.length; i++) { 156 | for (j = opts.imageArray.length - 1; j > i; j--) { 157 | if (opts.imageArray[i][0] == opts.imageArray[j][0]) { 158 | opts.imageArray.splice(j, 1); 159 | } 160 | } 161 | } 162 | 163 | while (opts.imageArray[imageNum][0] != imageObject.href) { 164 | imageNum++; 165 | } 166 | } 167 | 168 | // calculate top and left offset for the lightbox 169 | var arrayPageScroll = getPageScroll(); 170 | var lightboxTop = arrayPageScroll[1] + ($(window).height() / 10); 171 | var lightboxLeft = arrayPageScroll[0]; 172 | $('#lightbox').css({top: lightboxTop+'px', left: lightboxLeft+'px'}).show(); 173 | 174 | if (!opts.slideNavBar) { 175 | $('#imageData').hide(); 176 | } 177 | 178 | changeImage(imageNum); 179 | }; 180 | 181 | function changeImage(imageNum) { 182 | if (opts.inprogress == false) { 183 | opts.inprogress = true; 184 | 185 | // update global var 186 | opts.activeImage = imageNum; 187 | 188 | // hide elements during transition 189 | $('#loading').show(); 190 | $('#lightboxImage, #hoverNav, #prevLink, #nextLink').hide(); 191 | 192 | // delay preloading image until navbar will slide up 193 | if (opts.slideNavBar) { 194 | $('#imageDataContainer').hide(); 195 | $('#imageData').hide(); 196 | } 197 | doChangeImage(); 198 | } 199 | }; 200 | 201 | function doChangeImage() { 202 | var imgPreloader = new Image(); 203 | 204 | // once image is preloaded, resize image container 205 | imgPreloader.onload = function() { 206 | var newWidth = imgPreloader.width; 207 | var newHeight = imgPreloader.height; 208 | 209 | if (opts.scaleImages) { 210 | newWidth = parseInt(opts.xScale * newWidth); 211 | newHeight = parseInt(opts.yScale * newHeight); 212 | } 213 | 214 | if (opts.fitToScreen) { 215 | var arrayPageSize = getPageSize(); 216 | var ratio; 217 | var initialPageWidth = arrayPageSize[2] - 2 * opts.borderSize; 218 | var initialPageHeight = arrayPageSize[3] - 200; 219 | 220 | var dI = initialPageWidth/initialPageHeight; 221 | var dP = imgPreloader.width/imgPreloader.height; 222 | 223 | if ((imgPreloader.height > initialPageHeight) || (imgPreloader.width > initialPageWidth)) { 224 | if (dI > dP) { 225 | newWidth = parseInt((initialPageHeight/imgPreloader.height) * imgPreloader.width); 226 | newHeight = initialPageHeight; 227 | } else { 228 | newHeight = parseInt((initialPageWidth/imgPreloader.width) * imgPreloader.height); 229 | newWidth = initialPageWidth; 230 | } 231 | } 232 | } 233 | 234 | $('#lightboxImage'). 235 | attr('src', opts.imageArray[opts.activeImage][0]). 236 | width(newWidth). 237 | height(newHeight); 238 | 239 | resizeImageContainer(newWidth, newHeight); 240 | }; 241 | 242 | imgPreloader.src = opts.imageArray[opts.activeImage][0]; 243 | }; 244 | 245 | function end() { 246 | disableKeyboardNav(); 247 | $('#lightbox').hide(); 248 | $('#overlay').fadeOut(); 249 | $('select, object, embed').show(); 250 | }; 251 | 252 | function preloadNeighborImages() { 253 | var preloadPrevImage, preloadNextImage; 254 | if (opts.loopImages && opts.imageArray.length > 1) { 255 | preloadNextImage = new Image(); 256 | preloadNextImage.src = opts.imageArray[(opts.activeImage == (opts.imageArray.length - 1)) ? 0 : opts.activeImage + 1][0]; 257 | 258 | preloadPrevImage = new Image(); 259 | preloadPrevImage.src = opts.imageArray[(opts.activeImage == 0) ? (opts.imageArray.length - 1) : opts.activeImage - 1][0]; 260 | } else { 261 | if ((opts.imageArray.length - 1) > opts.activeImage) { 262 | preloadNextImage = new Image(); 263 | preloadNextImage.src = opts.imageArray[opts.activeImage + 1][0]; 264 | } 265 | if (opts.activeImage > 0) { 266 | preloadPrevImage = new Image(); 267 | preloadPrevImage.src = opts.imageArray[opts.activeImage - 1][0]; 268 | } 269 | } 270 | }; 271 | 272 | function resizeImageContainer(imgWidth, imgHeight) { 273 | // get current width and height 274 | opts.widthCurrent = $("#outerImageContainer").outerWidth(); 275 | opts.heightCurrent = $("#outerImageContainer").outerHeight(); 276 | 277 | // get new width and height 278 | var widthNew = Math.max(350, imgWidth + (opts.borderSize * 2)); 279 | var heightNew = (imgHeight + (opts.borderSize * 2)); 280 | 281 | // calculate size difference between new and old image, and resize if necessary 282 | wDiff = opts.widthCurrent - widthNew; 283 | hDiff = opts.heightCurrent - heightNew; 284 | 285 | $('#imageDataContainer').animate({width: widthNew},opts.resizeSpeed,'linear'); 286 | $('#outerImageContainer').animate({width: widthNew},opts.resizeSpeed,'linear', function() { 287 | $('#outerImageContainer').animate({height: heightNew},opts.resizeSpeed,'linear', function() { 288 | showImage(); 289 | }); 290 | }); 291 | 292 | afterTimeout = function () { 293 | $('#prevLink').height(imgHeight); 294 | $('#nextLink').height(imgHeight); 295 | }; 296 | 297 | // if new and old image are same size and no scaling transition is necessary, 298 | // do a quick pause to prevent image flicker. 299 | if((hDiff == 0) && (wDiff == 0)) { 300 | setTimeout(afterTimeout, 100); 301 | } else { 302 | // otherwise just trigger the height and width change 303 | afterTimeout(); 304 | } 305 | 306 | }; 307 | 308 | function showImage() { 309 | $('#loading').hide(); 310 | $('#lightboxImage').fadeIn("fast"); 311 | updateDetails(); 312 | preloadNeighborImages(); 313 | 314 | opts.inprogress = false; 315 | }; 316 | 317 | function updateDetails() { 318 | $('#numberDisplay').html(''); 319 | 320 | if (opts.imageArray[opts.activeImage][1]) { 321 | $('#caption').html(opts.imageArray[opts.activeImage][1]).show(); 322 | } 323 | 324 | // if image is part of set display 'Image x of x' 325 | if (opts.imageArray.length > 1) { 326 | var nav_html; 327 | 328 | nav_html = opts.strings.image + (opts.activeImage + 1) + opts.strings.of + opts.imageArray.length; 329 | 330 | if (opts.displayDownloadLink) { 331 | nav_html += "" + opts.strings.download + ""; 332 | } 333 | 334 | if (!opts.disableNavbarLinks) { 335 | // display previous / next text links 336 | if ((opts.activeImage) > 0 || opts.loopImages) { 337 | nav_html = '' + opts.strings.prevLinkText + "" + nav_html; 338 | } 339 | 340 | if (((opts.activeImage + 1) < opts.imageArray.length) || opts.loopImages) { 341 | nav_html += '' + opts.strings.nextLinkText + ""; 342 | } 343 | } 344 | 345 | $('#numberDisplay').html(nav_html).show(); 346 | } 347 | 348 | if (opts.slideNavBar) { 349 | $("#imageData").slideDown(opts.navBarSlideSpeed); 350 | } else { 351 | $("#imageData").show(); 352 | } 353 | 354 | resizeOverlayToFitWindow(); 355 | updateNav(); 356 | }; 357 | 358 | /* 359 | # Resize the sexy overlay to fit the constraints of your current viewing environment 360 | # 361 | # This should now happen whenever a window is resized, so you should always see a full overlay 362 | */ 363 | function resizeOverlayToFitWindow(){ 364 | $('#overlay').css({width: $(document).width(), height: $(document).height()}); 365 | // ^^^^^^^ <- sexy! 366 | }; 367 | 368 | function updateNav() { 369 | if (opts.imageArray.length > 1) { 370 | $('#hoverNav').show(); 371 | 372 | // if loopImages is true, always show next and prev image buttons 373 | if(opts.loopImages) { 374 | $('#prevLink,#prevLinkText').show().click(function() { 375 | changeImage((opts.activeImage == 0) ? (opts.imageArray.length - 1) : opts.activeImage - 1); 376 | return false; 377 | }); 378 | 379 | $('#nextLink,#nextLinkText').show().click(function() { 380 | changeImage((opts.activeImage == (opts.imageArray.length - 1)) ? 0 : opts.activeImage + 1); 381 | return false; 382 | }); 383 | 384 | } else { 385 | // if not first image in set, display prev image button 386 | if(opts.activeImage != 0) { 387 | $('#prevLink,#prevLinkText').show().click(function() { 388 | changeImage(opts.activeImage - 1); 389 | return false; 390 | }); 391 | } 392 | 393 | // if not last image in set, display next image button 394 | if(opts.activeImage != (opts.imageArray.length - 1)) { 395 | $('#nextLink,#nextLinkText').show().click(function() { 396 | changeImage(opts.activeImage +1); 397 | return false; 398 | }); 399 | } 400 | } 401 | 402 | } 403 | enableKeyboardNav(); 404 | 405 | }; 406 | 407 | function keyboardAction(e) { 408 | var o = e.data.opts; 409 | var keycode = e.keyCode; 410 | var escapeKey = 27; 411 | 412 | var key = String.fromCharCode(keycode).toLowerCase(); 413 | 414 | // close lightbox 415 | if ((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)) { 416 | end(); 417 | 418 | // display previous image 419 | } else if ((key == 'p') || (keycode == 37)) { 420 | if(o.loopImages) { 421 | disableKeyboardNav(); 422 | changeImage((o.activeImage == 0) ? (o.imageArray.length - 1) : o.activeImage - 1); 423 | } else if (o.activeImage != 0) { 424 | disableKeyboardNav(); 425 | changeImage(o.activeImage - 1); 426 | } 427 | 428 | // display next image 429 | } else if ((key == 'n') || (keycode == 39)) { 430 | if (opts.loopImages) { 431 | disableKeyboardNav(); 432 | changeImage((o.activeImage == (o.imageArray.length - 1)) ? 0 : o.activeImage + 1); 433 | } else if (o.activeImage != (o.imageArray.length - 1)) { 434 | disableKeyboardNav(); 435 | changeImage(o.activeImage + 1); 436 | } 437 | } 438 | }; 439 | 440 | function enableKeyboardNav() { 441 | $(document).bind('keydown', {opts: opts}, keyboardAction); 442 | }; 443 | 444 | function disableKeyboardNav() { 445 | $(document).unbind('keydown'); 446 | }; 447 | 448 | function getImageSetOf(imageObject) { 449 | var set_name = imageObject.rel; 450 | if (!set_name || set_name == '') { 451 | set_name = $(imageObject).attr('data-lightbox-set'); 452 | } 453 | return set_name; 454 | }; 455 | }; 456 | 457 | $.fn.lightbox.parseJsonData = function(data) { 458 | var imageArray = []; 459 | 460 | $.each(data, function() { 461 | imageArray.push(new Array(this.url, this.title)); 462 | }); 463 | 464 | return imageArray; 465 | }; 466 | 467 | $.fn.lightbox.defaults = { 468 | triggerEvent: "click", 469 | allSet: false, 470 | fileLoadingImage: 'images/loading.gif', 471 | fileBottomNavCloseImage: 'images/closelabel.gif', 472 | overlayOpacity: 0.6, 473 | borderSize: 10, 474 | imageArray: new Array, 475 | activeImage: null, 476 | imageScroll: false, 477 | inprogress: false, 478 | resizeSpeed: 350, 479 | widthCurrent: 250, 480 | heightCurrent: 250, 481 | scaleImages: false, 482 | xScale: 1, 483 | yScale: 1, 484 | displayTitle: true, 485 | navbarOnTop: false, 486 | displayDownloadLink: false, 487 | slideNavBar: false, 488 | navBarSlideSpeed: 350, 489 | displayHelp: false, 490 | strings: { 491 | help: ' \u2190 / P - previous image\u00a0\u00a0\u00a0\u00a0\u2192 / N - next image\u00a0\u00a0\u00a0\u00a0ESC / X - close image gallery', 492 | prevLinkTitle: 'previous image', 493 | nextLinkTitle: 'next image', 494 | prevLinkText: '« Previous', 495 | nextLinkText: 'Next »', 496 | closeTitle: 'close image gallery', 497 | image: 'Image ', 498 | of: ' of ', 499 | download: 'Download' 500 | }, 501 | fitToScreen: false, 502 | disableNavbarLinks: false, 503 | loopImages: false, 504 | imageClickClose: true, 505 | jsonData: null, 506 | jsonDataParser: null 507 | }; 508 | })(jQuery); 509 | --------------------------------------------------------------------------------