@@ -3,15 +3,39 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
- <title>jQuery Lightbox v0.5 | Test Page</title>
+ <title>jQuery Lightbox | Test Page</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script src="jquery.lightbox.js" type="text/javascript"></script>
<script>
- $(document).ready(function(){
- $(".lightbox").lightbox({fitToScreen: true});
+ $(document).ready(function(){
+ base_url = document.location.href.substring(0, document.location.href.indexOf('index.html'), 0);
+
+ $(".lightbox").lightbox({
+ fitToScreen: true,
+ imageClickClose: false
+ });
+
+ $(".lightbox-2").lightbox({
+ fitToScreen: true
+ });
+
+ $(".lightbox-json").lightbox({
+ fitToScreen: true,
+ jsonData: new Array(
+ {url: base_url + 'images/image-0.jpg', title: 'Image 1 loaded using JSON data' },
+ {url: base_url + 'images/image-1.jpg', title: 'Image 2 loaded using JSON data' },
+ {url: base_url + 'images/image-2.jpg', title: 'Image 3 loaded using JSON data' },
+ {url: base_url + 'images/image-3.jpg', title: 'Image 4 loaded using JSON data' }
+ ),
+ loopImages: true,
+ imageClickClose: false,
+ disableNavbarLinks: true
+ });
+
+
});
</script>
@@ -31,11 +55,14 @@
<h2>Example 1: Single Image</h2>
<a href="images/image-0.jpg" class="lightbox" title="Cape Breton Island"><img src="images/thumb-0.jpg" width="100" height="40" alt="" /></a>
-<h2>Example Two: Series</h2>
-<a href="images/image-1.jpg" class="lightbox" rel="flowers" title="jQuery Lightbox Sample Image"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
-<a href="images/image-2.jpg" class="lightbox" rel="flowers" title="Photo by Steven Pinker"><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
-<a href="images/image-3.jpg" class="lightbox" rel="flowers" title="Photo by Uwe Hermann"><img src="images/thumb-3.jpg" width="100" height="40" alt="" /></a>
-
+<h2>Example 2: Series</h2>
+<a href="images/image-1.jpg" class="lightbox-2" rel="flowers" title="jQuery Lightbox Sample Image"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
+<a href="images/image-2.jpg" class="lightbox-2" rel="flowers" title="Photo by Steven Pinker"><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
+<a href="images/image-3.jpg" class="lightbox-2" rel="flowers" title="Photo by Uwe Hermann"><img src="images/thumb-3.jpg" width="100" height="40" alt="" /></a>
+
+<h2>Example 3: Images loaded using jsonData parameter (thumbnails are static)</h2>
+<a href="images/image-0.jpg" class="lightbox-json" title="Cape Breton Island"><img src="images/thumb-0.jpg" width="100" height="40" alt="" /></a>
+<a href="images/image-3.jpg" class="lightbox-json" title="Photo by Uwe Hermann"><img src="images/thumb-3.jpg" width="100" height="40" alt="" /></a>
<h2>How to Use:</h2>
<h3>Part 1 - Setup</h3>
index.html
@@ -13,379 +13,400 @@
**/
(function($){
- var opts;
$.fn.lightbox = function(options){
// build main options
- opts = $.extend({}, $.fn.lightbox.defaults, options);
-
+ var opts = $.extend({}, $.fn.lightbox.defaults, options);
+
// initalize the lightbox
- $.fn.lightbox.initialize();
+
return this.each(function(){
$(this).click(function(){
- $(this).lightbox.start(this);
+ initialize();
+ start(this);
return false;
});
});
- };
-
-
-
- /**
- * initalize()
- *
- * @return void
- * @author Warren Krewenki
- */
- $.fn.lightbox.initialize = function(){
- $('#overlay').remove();
- $('#lightbox').remove();
- opts.inprogress = false;
- var outerImage = '<div id="outerImageContainer"><div id="imageContainer"><iframe id="lightboxIframe" /><img id="lightboxImage"><div id="hoverNav"><a href="javascript://" title="' + opts.strings.prevLinkTitle + '" id="prevLink"></a><a href="javascript://" id="nextLink" title="' + opts.strings.nextLinkTitle + '"></a></div><div id="loading"><a href="javascript://" id="loadingLink"><img src="'+opts.fileLoadingImage+'"></a></div></div></div>';
- var imageData = '<div id="imageDataContainer" class="clearfix"><div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav">';
-
- if (opts.displayHelp)
- imageData += '<span id="helpDisplay">' + opts.strings.help + '</span>';
-
- imageData += '<a href="javascript://" id="bottomNavClose" title="' + opts.strings.closeTitle + '"><img src="'+opts.fileBottomNavCloseImage+'"></a></div></div></div>';
-
- var string;
-
- if (opts.navbarOnTop) {
- string = '<div id="overlay"></div><div id="lightbox">' + imageData + outerImage + '</div>';
- $("body").append(string);
- $("#imageDataContainer").addClass('ontop');
- } else {
- string = '<div id="overlay"></div><div id="lightbox">' + outerImage + imageData + '</div>';
- $("body").append(string);
- }
-
- $("#overlay").click(function(){ $.fn.lightbox.end(); }).hide();
- $("#lightbox").click(function(){ $.fn.lightbox.end();}).hide();
- $("#loadingLink").click(function(){ $.fn.lightbox.end(); return false;});
- $("#bottomNavClose").click(function(){ $.fn.lightbox.end(); return false; });
- $('#outerImageContainer').width(opts.widthCurrent).height(opts.heightCurrent);
- $('#imageDataContainer').width(opts.widthCurrent);
- if (!opts.imageClickClose) {
- $("#hoverNav").click(function(){ return false; });
- }
- };
-
-
- $.fn.lightbox.getPageSize = function(){
- var jqueryPageSize = new Array($(document).width(),$(document).height(), $(window).width(), $(window).height());
- return jqueryPageSize;
- };
-
-
- $.fn.lightbox.getPageScroll = function(){
- var xScroll, yScroll;
-
- if (self.pageYOffset) {
- yScroll = self.pageYOffset;
- xScroll = self.pageXOffset;
- } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
- yScroll = document.documentElement.scrollTop;
- xScroll = document.documentElement.scrollLeft;
- } else if (document.body) {// all other Explorers
- yScroll = document.body.scrollTop;
- xScroll = document.body.scrollLeft;
- }
-
- var arrayPageScroll = new Array(xScroll,yScroll);
- return arrayPageScroll;
- };
-
- $.fn.lightbox.pause = function(ms){
- var date = new Date();
- var curDate = null;
- do{curDate = new Date();}
- while( curDate - date < ms);
- };
-
- $.fn.lightbox.start = function(imageLink){
-
- $("select, embed, object").hide();
- var arrayPageSize = $.fn.lightbox.getPageSize();
- $("#overlay").hide().css({width: '100%', height: arrayPageSize[1]+'px', opacity : opts.overlayOpacity}).fadeIn();
- opts.imageArray = [];
- imageNum = 0;
-
-
- // if image is NOT part of a set..
- if(!imageLink.rel || (imageLink.rel == '')){
- // add single image to Lightbox.imageArray
- opts.imageArray.push(new Array(imageLink.href, opts.displayTitle ? imageLink.title : ''));
- } else {
- // if image is part of a set..
- $("a").each(function(){
- if(this.href && (this.rel == imageLink.rel)){
- opts.imageArray.push(new Array(this.href, opts.displayTitle ? this.title : ''));
- }
- });
-
-
- for(i = 0; i < opts.imageArray.length; i++){
- for(j = opts.imageArray.length-1; j>i; j--){
- if(opts.imageArray[i][0] == opts.imageArray[j][0]){
- opts.imageArray.splice(j,1);
- }
- }
- }
- while(opts.imageArray[imageNum][0] != imageLink.href) { imageNum++;}
- }
-
- // calculate top and left offset for the lightbox
- var arrayPageScroll = $.fn.lightbox.getPageScroll();
- var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
- var lightboxLeft = arrayPageScroll[0];
- $('#lightbox').css({top: lightboxTop+'px', left: lightboxLeft+'px'}).show();
-
-
- if (!opts.slideNavBar)
- $('#imageData').hide();
-
- $.fn.lightbox.changeImage(imageNum);
-
- };
-
- $.fn.lightbox.changeImage = function(imageNum){
- if(opts.inprogress == false){
- opts.inprogress = true;
- opts.activeImage = imageNum; // update global var
-
- // hide elements during transition
- $('#loading').show();
- $('#lightboxImage').hide();
- $('#hoverNav').hide();
- $('#prevLink').hide();
- $('#nextLink').hide();
-
- if (opts.slideNavBar) { // delay preloading image until navbar will slide up
- // $('#imageDataContainer').slideUp(opts.navBarSlideSpeed, $.fn.doChangeImage);
- $('#imageDataContainer').hide();
- $('#imageData').hide();
- $.fn.doChangeImage();
- } else {
- $.fn.doChangeImage();
- }
- }
- };
-
- $.fn.doChangeImage = function(){
-
- imgPreloader = new Image();
-
- // once image is preloaded, resize image container
- imgPreloader.onload=function(){
- var newWidth = imgPreloader.width;
- var newHeight = imgPreloader.height;
-
+ /**
+ * initalize()
+ *
+ * @return void
+ * @author Warren Krewenki
+ */
+
+ function initialize() {
+ $('#overlay').remove();
+ $('#lightbox').remove();
+ opts.inprogress = false;
+
+ // if jsonData, build the imageArray from data provided in JSON format
+ if(opts.jsonData && opts.jsonData.length > 0) {
+ opts.imageArray = [];
+ opts.imageArray = $.fn.lightbox.parseJsonData(opts.jsonData);
+ }
+
+ var outerImage = '<div id="outerImageContainer"><div id="imageContainer"><iframe id="lightboxIframe" /><img id="lightboxImage"><div id="hoverNav"><a href="javascript://" title="' + opts.strings.prevLinkTitle + '" id="prevLink"></a><a href="javascript://" id="nextLink" title="' + opts.strings.nextLinkTitle + '"></a></div><div id="loading"><a href="javascript://" id="loadingLink"><img src="'+opts.fileLoadingImage+'"></a></div></div></div>';
+ var imageData = '<div id="imageDataContainer" class="clearfix"><div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav">';
- if (opts.fitToScreen) {
- var arrayPageSize = $.fn.lightbox.getPageSize();
- var ratio;
- var initialPageWidth = arrayPageSize[2] - 2 * opts.borderSize;
- var initialPageHeight = arrayPageSize[3] - 200;
+ if (opts.displayHelp)
+ imageData += '<span id="helpDisplay">' + opts.strings.help + '</span>';
- if (imgPreloader.height > initialPageHeight)
- {
- newWidth = parseInt((initialPageHeight/imgPreloader.height) * imgPreloader.width);
- newHeight = initialPageHeight;
- }
- else if (imgPreloader.width > initialPageWidth)
- {
- newHeight = parseInt((initialPageWidth/imgPreloader.width) * imgPreloader.height);
- newWidth = initialPageWidth;
- }
- }
+ imageData += '<a href="javascript://" id="bottomNavClose" title="' + opts.strings.closeTitle + '"><img src="'+opts.fileBottomNavCloseImage+'"></a></div></div></div>';
- $('#lightboxImage').attr('src', opts.imageArray[opts.activeImage][0])
- .width(newWidth).height(newHeight);
- $.fn.lightbox.resizeImageContainer(newWidth, newHeight);
- };
+ var string;
- imgPreloader.src = opts.imageArray[opts.activeImage][0];
- };
-
- $.fn.lightbox.end = function(){
- $.fn.lightbox.disableKeyboardNav();
- $('#lightbox').hide();
- $('#overlay').fadeOut();
- $('select, object, embed').show();
- };
+ if (opts.navbarOnTop) {
+ string = '<div id="overlay"></div><div id="lightbox">' + imageData + outerImage + '</div>';
+ $("body").append(string);
+ $("#imageDataContainer").addClass('ontop');
+ } else {
+ string = '<div id="overlay"></div><div id="lightbox">' + outerImage + imageData + '</div>';
+ $("body").append(string);
+ }
- $.fn.lightbox.preloadNeighborImages = function(){
- if(opts.loopImages && opts.imageArray.length > 1) {
- preloadNextImage = new Image();
- preloadNextImage.src = opts.imageArray[(opts.activeImage == (opts.imageArray.length - 1)) ? 0 : opts.activeImage + 1][0]
-
- preloadPrevImage = new Image();
- preloadPrevImage.src = opts.imageArray[(opts.activeImage == 0) ? (opts.imageArray.length - 1) : opts.activeImage - 1][0]
- } else {
- if((opts.imageArray.length - 1) > opts.activeImage){
- preloadNextImage = new Image();
- preloadNextImage.src = opts.imageArray[opts.activeImage + 1][0];
+ $("#overlay").click(function(){ end(); }).hide();
+ $("#lightbox").click(function(){ end();}).hide();
+ $("#loadingLink").click(function(){ end(); return false;});
+ $("#bottomNavClose").click(function(){ end(); return false; });
+ $('#outerImageContainer').width(opts.widthCurrent).height(opts.heightCurrent);
+ $('#imageDataContainer').width(opts.widthCurrent);
+
+ if (!opts.imageClickClose) {
+ $("#lightboxImage").click(function(){ return false; });
+ $("#hoverNav").click(function(){ return false; });
}
- if(opts.activeImage > 0){
- preloadPrevImage = new Image();
- preloadPrevImage.src = opts.imageArray[opts.activeImage - 1][0];
+ };
+
+ function getPageSize() {
+ var jqueryPageSize = new Array($(document).width(),$(document).height(), $(window).width(), $(window).height());
+ return jqueryPageSize;
+ };
+
+ function getPageScroll() {
+ var xScroll, yScroll;
+
+ if (self.pageYOffset) {
+ yScroll = self.pageYOffset;
+ xScroll = self.pageXOffset;
+ } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
+ yScroll = document.documentElement.scrollTop;
+ xScroll = document.documentElement.scrollLeft;
+ } else if (document.body) {// all other Explorers
+ yScroll = document.body.scrollTop;
+ xScroll = document.body.scrollLeft;
}
- }
- };
-
- $.fn.lightbox.keyboardAction = function(e){
- if (e == null) { // ie
- var keycode = event.keyCode;
- var escapeKey = 27;
- } else { // mozilla
- var keycode = e.keyCode;
- var escapeKey = e.DOM_VK_ESCAPE;
- }
-
- var key = String.fromCharCode(keycode).toLowerCase();
-
- if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){ // close lightbox
- $.fn.lightbox.end();
- } else if((key == 'p') || (keycode == 37)){ // display previous image
- if(opts.activeImage != 0){
- $.fn.lightbox.disableKeyboardNav();
- $.fn.lightbox.changeImage(opts.activeImage - 1);
- }
- } else if((key == 'n') || (keycode == 39)){ // display next image
- if(opts.activeImage != (opts.imageArray.length - 1)){
- $.fn.lightbox.disableKeyboardNav();
- $.fn.lightbox.changeImage(opts.activeImage + 1);
- }
- }
- };
-
- $.fn.lightbox.resizeImageContainer = function(imgWidth, imgHeight){
- // get current width and height
- opts.widthCurrent = document.getElementById('outerImageContainer').offsetWidth;
- opts.heightCurrent = document.getElementById('outerImageContainer').offsetHeight;
- // get new width and height
- var widthNew = (imgWidth + (opts.borderSize * 2));
- var heightNew = (imgHeight + (opts.borderSize * 2));
-
- // scalars based on change from old to new
- opts.xScale = ( widthNew / opts.widthCurrent) * 100;
- opts.yScale = ( heightNew / opts.heightCurrent) * 100;
-
- // calculate size difference between new and old image, and resize if necessary
- wDiff = opts.widthCurrent - widthNew;
- hDiff = opts.heightCurrent - heightNew;
-
- $('#imageDataContainer').animate({width: widthNew},opts.resizeSpeed,'linear');
- $('#outerImageContainer').animate({width: widthNew},opts.resizeSpeed,'linear',function(){
- $('#outerImageContainer').animate({height: heightNew},opts.resizeSpeed,'linear',function(){
- $.fn.lightbox.showImage();
- });
- });
-
- // if new and old image are same size and no scaling transition is necessary,
- // do a quick pause to prevent image flicker.
- if((hDiff == 0) && (wDiff == 0)){
- if (jQuery.browser.msie){ $.fn.lightbox.pause(250); } else { $.fn.lightbox.pause(100);}
- }
-
- $('#prevLink').height(imgHeight);
- $('#nextLink').height(imgHeight);
- };
-
- $.fn.lightbox.showImage = function(){
- $('#loading').hide();
- $('#lightboxImage').fadeIn("fast");
- $.fn.lightbox.updateDetails();
- $.fn.lightbox.preloadNeighborImages();
-
- opts.inprogress = false;
- };
+ var arrayPageScroll = new Array(xScroll,yScroll);
+ return arrayPageScroll;
+ };
+
+ function pause(ms) {
+ var date = new Date();
+ var curDate = null;
+ do{curDate = new Date();}
+ while( curDate - date < ms);
+ };
+
+ function start(imageLink) {
+ $("select, embed, object").hide();
+ var arrayPageSize = getPageSize();
+ $("#overlay").hide().css({width: '100%', height: arrayPageSize[1]+'px', opacity : opts.overlayOpacity}).fadeIn();
+ imageNum = 0;
+
+
+ // if data is provided by jsonData parameter
+ if(!opts.jsonData) {
+ opts.imageArray = [];
+ // if image is NOT part of a set..
+ if(!imageLink.rel || (imageLink.rel == '')){
+ // add single image to Lightbox.imageArray
+ opts.imageArray.push(new Array(imageLink.href, opts.displayTitle ? imageLink.title : ''));
+ } else {
+ // if image is part of a set..
+ $("a").each(function(){
+ if(this.href && (this.rel == imageLink.rel)){
+ opts.imageArray.push(new Array(this.href, opts.displayTitle ? this.title : ''));
+ }
+ });
+ }
+ }
+
+ if(opts.imageArray.length > 1) {
+ for(i = 0; i < opts.imageArray.length; i++){
+ for(j = opts.imageArray.length-1; j>i; j--){
+ if(opts.imageArray[i][0] == opts.imageArray[j][0]){
+ opts.imageArray.splice(j,1);
+ }
+ }
+ }
+ while(opts.imageArray[imageNum][0] != imageLink.href) { imageNum++;}
+ }
- $.fn.lightbox.updateDetails = function(){
+ // calculate top and left offset for the lightbox
+ var arrayPageScroll = getPageScroll();
+ var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
+ var lightboxLeft = arrayPageScroll[0];
+ $('#lightbox').css({top: lightboxTop+'px', left: lightboxLeft+'px'}).show();
+
+
+ if (!opts.slideNavBar)
+ $('#imageData').hide();
+
+ changeImage(imageNum);
+ };
+
+ function changeImage(imageNum) {
+ if(opts.inprogress == false){
+ opts.inprogress = true;
+ opts.activeImage = imageNum; // update global var
+
+ // hide elements during transition
+ $('#loading').show();
+ $('#lightboxImage').hide();
+ $('#hoverNav').hide();
+ $('#prevLink').hide();
+ $('#nextLink').hide();
+
+ if (opts.slideNavBar) { // delay preloading image until navbar will slide up
+ // $('#imageDataContainer').slideUp(opts.navBarSlideSpeed, $.fn.doChangeImage);
+ $('#imageDataContainer').hide();
+ $('#imageData').hide();
+ doChangeImage();
+ } else {
+ doChangeImage();
+ }
+ }
+ };
+
+ function doChangeImage() {
+
+ imgPreloader = new Image();
+
+ // once image is preloaded, resize image container
+ imgPreloader.onload=function(){
+ var newWidth = imgPreloader.width;
+ var newHeight = imgPreloader.height;
+
+
+ if (opts.fitToScreen) {
+ var arrayPageSize = getPageSize();
+ var ratio;
+ var initialPageWidth = arrayPageSize[2] - 2 * opts.borderSize;
+ var initialPageHeight = arrayPageSize[3] - 200;
+
+ if (imgPreloader.height > initialPageHeight)
+ {
+ newWidth = parseInt((initialPageHeight/imgPreloader.height) * imgPreloader.width);
+ newHeight = initialPageHeight;
+ }
+ else if (imgPreloader.width > initialPageWidth)
+ {
+ newHeight = parseInt((initialPageWidth/imgPreloader.width) * imgPreloader.height);
+ newWidth = initialPageWidth;
+ }
+ }
- $('#numberDisplay').html('');
+ $('#lightboxImage').attr('src', opts.imageArray[opts.activeImage][0])
+ .width(newWidth).height(newHeight);
+ resizeImageContainer(newWidth, newHeight);
+ };
+
+ imgPreloader.src = opts.imageArray[opts.activeImage][0];
+ };
+
+ function end() {
+ disableKeyboardNav();
+ $('#lightbox').hide();
+ $('#overlay').fadeOut();
+ $('select, object, embed').show();
+ };
+
+ function preloadNeighborImages(){
+ if(opts.loopImages && opts.imageArray.length > 1) {
+ preloadNextImage = new Image();
+ preloadNextImage.src = opts.imageArray[(opts.activeImage == (opts.imageArray.length - 1)) ? 0 : opts.activeImage + 1][0]
+
+ preloadPrevImage = new Image();
+ preloadPrevImage.src = opts.imageArray[(opts.activeImage == 0) ? (opts.imageArray.length - 1) : opts.activeImage - 1][0]
+ } else {
+ if((opts.imageArray.length - 1) > opts.activeImage){
+ preloadNextImage = new Image();
+ preloadNextImage.src = opts.imageArray[opts.activeImage + 1][0];
+ }
+ if(opts.activeImage > 0){
+ preloadPrevImage = new Image();
+ preloadPrevImage.src = opts.imageArray[opts.activeImage - 1][0];
+ }
+ }
+ };
+
+ function resizeImageContainer(imgWidth, imgHeight) {
+ // get current width and height
+ opts.widthCurrent = $("#outerImageContainer").outerWidth();
+ opts.heightCurrent = $("#outerImageContainer").outerHeight();
+
+ // get new width and height
+ var widthNew = (imgWidth + (opts.borderSize * 2));
+ var heightNew = (imgHeight + (opts.borderSize * 2));
+
+ // scalars based on change from old to new
+ opts.xScale = ( widthNew / opts.widthCurrent) * 100;
+ opts.yScale = ( heightNew / opts.heightCurrent) * 100;
+
+ // calculate size difference between new and old image, and resize if necessary
+ wDiff = opts.widthCurrent - widthNew;
+ hDiff = opts.heightCurrent - heightNew;
+
+ $('#imageDataContainer').animate({width: widthNew},opts.resizeSpeed,'linear');
+ $('#outerImageContainer').animate({width: widthNew},opts.resizeSpeed,'linear',function(){
+ $('#outerImageContainer').animate({height: heightNew},opts.resizeSpeed,'linear',function(){
+ showImage();
+ });
+ });
+
+ // if new and old image are same size and no scaling transition is necessary,
+ // do a quick pause to prevent image flicker.
+ if((hDiff == 0) && (wDiff == 0)){
+ if (jQuery.browser.msie){ pause(250); } else { pause(100);}
+ }
- if(opts.imageArray[opts.activeImage][1]){
- $('#caption').html(opts.imageArray[opts.activeImage][1]).show();
- }
+ $('#prevLink').height(imgHeight);
+ $('#nextLink').height(imgHeight);
+ };
+
+ function showImage() {
+ $('#loading').hide();
+ $('#lightboxImage').fadeIn("fast");
+ updateDetails();
+ preloadNeighborImages();
+
+ opts.inprogress = false;
+ };
+
+ function updateDetails() {
+
+ $('#numberDisplay').html('');
+
+ if(opts.imageArray[opts.activeImage][1]){
+ $('#caption').html(opts.imageArray[opts.activeImage][1]).show();
+ }
- // if image is part of set display 'Image x of x'
- if(opts.imageArray.length > 1){
- var nav_html;
+ // if image is part of set display 'Image x of x'
+ if(opts.imageArray.length > 1){
+ var nav_html;
- nav_html = opts.strings.image + (opts.activeImage + 1) + opts.strings.of + opts.imageArray.length;
+ nav_html = opts.strings.image + (opts.activeImage + 1) + opts.strings.of + opts.imageArray.length;
- if (!opts.disableNavbarLinks) {
- // display previous / next text links
- if ((opts.activeImage) > 0 || opts.loopImages) {
- nav_html = '<a title="' + opts.strings.prevLinkTitle + '" href="#" id="prevLinkText">' + opts.strings.prevLinkText + "</a>" + nav_html;
- }
+ if (!opts.disableNavbarLinks) {
+ // display previous / next text links
+ if ((opts.activeImage) > 0 || opts.loopImages) {
+ nav_html = '<a title="' + opts.strings.prevLinkTitle + '" href="#" id="prevLinkText">' + opts.strings.prevLinkText + "</a>" + nav_html;
+ }
- if (((opts.activeImage + 1) < opts.imageArray.length) || opts.loopImages) {
- nav_html += '<a title="' + opts.strings.nextLinkTitle + '" href="#" id="nextLinkText">' + opts.strings.nextLinkText + "</a>";
+ if (((opts.activeImage + 1) < opts.imageArray.length) || opts.loopImages) {
+ nav_html += '<a title="' + opts.strings.nextLinkTitle + '" href="#" id="nextLinkText">' + opts.strings.nextLinkText + "</a>";
+ }
}
- }
- $('#numberDisplay').html(nav_html).show();
- }
-
- if (opts.slideNavBar) {
- $("#imageData").slideDown(opts.navBarSlideSpeed);
- } else {
- $("#imageData").show();
- }
+ $('#numberDisplay').html(nav_html).show();
+ }
- var arrayPageSize = $.fn.lightbox.getPageSize();
- $('#overlay').height(arrayPageSize[1]);
- $.fn.lightbox.updateNav();
- };
+ if (opts.slideNavBar) {
+ $("#imageData").slideDown(opts.navBarSlideSpeed);
+ } else {
+ $("#imageData").show();
+ }
- $.fn.lightbox.updateNav = function(){
- if(opts.imageArray.length > 1){
- $('#hoverNav').show();
-
- // if loopImages is true, always show next and prev image buttons
- if(opts.loopImages) {
- $('#prevLink,#prevLinkText').show().click(function(){
- $.fn.lightbox.changeImage((opts.activeImage == 0) ? (opts.imageArray.length - 1) : opts.activeImage - 1); return false;
- });
+ var arrayPageSize = getPageSize();
+ $('#overlay').height(arrayPageSize[1]);
+ updateNav();
+ };
+
+ function updateNav() {
+ if(opts.imageArray.length > 1){
+ $('#hoverNav').show();
+
+ // if loopImages is true, always show next and prev image buttons
+ if(opts.loopImages) {
+ $('#prevLink,#prevLinkText').show().click(function(){
+ changeImage((opts.activeImage == 0) ? (opts.imageArray.length - 1) : opts.activeImage - 1); return false;
+ });
+
+ $('#nextLink,#nextLinkText').show().click(function(){
+ changeImage((opts.activeImage == (opts.imageArray.length - 1)) ? 0 : opts.activeImage + 1); return false;
+ });
- $('#nextLink,#nextLinkText').show().click(function(){
- $.fn.lightbox.changeImage((opts.activeImage == (opts.imageArray.length - 1)) ? 0 : opts.activeImage + 1); return false;
- });
-
- } else {
- // if not first image in set, display prev image button
- if(opts.activeImage != 0){
- $('#prevLink,#prevLinkText').show().click(function(){
- $.fn.lightbox.changeImage(opts.activeImage - 1); return false;
- });
+ } else {
+ // if not first image in set, display prev image button
+ if(opts.activeImage != 0){
+ $('#prevLink,#prevLinkText').show().click(function(){
+ changeImage(opts.activeImage - 1); return false;
+ });
+ }
+
+ // if not last image in set, display next image button
+ if(opts.activeImage != (opts.imageArray.length - 1)){
+ $('#nextLink,#nextLinkText').show().click(function(){
+
+ changeImage(opts.activeImage +1); return false;
+ });
+ }
+ }
+
+ enableKeyboardNav();
+ }
+ };
+
+ function keyboardAction(e) {
+ var o = e.data.opts
+ var keycode = e.keyCode;
+ var escapeKey = 27;
+
+ var key = String.fromCharCode(keycode).toLowerCase();
+
+ if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){ // close lightbox
+ end();
+ } else if((key == 'p') || (keycode == 37)){ // display previous image
+ if(o.loopImages) {
+ disableKeyboardNav();
+ changeImage((o.activeImage == 0) ? (o.imageArray.length - 1) : o.activeImage - 1);
+ }
+ else if(o.activeImage != 0){
+ disableKeyboardNav();
+ changeImage(o.activeImage - 1);
}
-
- // if not last image in set, display next image button
- if(opts.activeImage != (opts.imageArray.length - 1)){
- $('#nextLink,#nextLinkText').show().click(function(){
-
- $.fn.lightbox.changeImage(opts.activeImage +1); return false;
- });
+ } else if((key == 'n') || (keycode == 39)){ // display next image
+ if (opts.loopImages) {
+ disableKeyboardNav();
+ changeImage((o.activeImage == (o.imageArray.length - 1)) ? 0 : o.activeImage + 1);
+ }
+ else if(o.activeImage != (o.imageArray.length - 1)){
+ disableKeyboardNav();
+ changeImage(o.activeImage + 1);
}
- }
-
- $.fn.lightbox.enableKeyboardNav();
- }
- };
-
-
- $.fn.lightbox.enableKeyboardNav = function(){
- document.onkeydown = $.fn.lightbox.keyboardAction;
- };
-
- $.fn.lightbox.disableKeyboardNav = function(){
- document.onkeydown = '';
+ }
+ };
+
+ function enableKeyboardNav() {
+ $(document).bind('keydown', {opts: opts}, keyboardAction);
+ };
+
+ function disableKeyboardNav() {
+ $(document).unbind('keydown');
+ };
+
};
+
+ $.fn.lightbox.parseJsonData = function(data) {
+ var imageArray = [];
+
+ $.each(data, function(){
+ imageArray.push(new Array(this.url, this.title));
+ });
+
+ return imageArray;
+ };
$.fn.lightbox.defaults = {
fileLoadingImage : 'images/loading.gif',
@@ -418,6 +439,8 @@
fitToScreen: false, // resize images if they are bigger than window
disableNavbarLinks: false,
loopImages: false,
- imageClickClose: true
+ imageClickClose: true,
+ jsonData: null
};
+
})(jQuery);
jquery.lightbox.js
93906db84759d327ac150a457803ee96ffb78536
Mitja Pagon
mpagon@mpagon-laptop.(none)
http://github.com/krewenki/jquery-lightbox/commit/63ac5773590b14c85fb6e61769bef6b74aee531c
63ac5773590b14c85fb6e61769bef6b74aee531c
2009-03-24T16:21:41-07:00
2009-03-16T07:52:52-07:00
Refactored code to support multiple instances of lightbox on the same page, each with unique options. Most lightbox methods are now private.
Keyboard events are handled using jquery.
Fixed bug: keyboard navigation doesn't work correctly with loopImages true.
Fixed bug: imageClickClose doesn't have effect on single image lightbox.
Added support for JSON. Lightbox images can now be supplied via jsonData option, accepts array of objects in JSON notation ({url, title}).
How this works can be seen in the included examples (index.html).
Added public method $.fn.lightbox.parseJsonData. Takes JSON data from jsonData parameter and converts it into imageArray for use internally.
Can be overridden to support alternate JSON scheme or even data formats other than JSON.
Signed-off-by: Warren Krewenki <krewenki@gmail.com>
a355853ea3920026478b4010a6740fc35295da71
Warren Krewenki
krewenki@gmail.com