/* $Id: lightbox.js,v 1.5.2.6.2.136 2010/09/24 08:39:40 snpower Exp $ */ /** * jQuery Lightbox * @author * Stella Power, * * Based on Lightbox v2.03.3 by Lokesh Dhakar * * Also partially based on the jQuery Lightbox by Warren Krewenki * * * Permission has been granted to Mark Ashmead & other Drupal Lightbox2 module * maintainers to distribute this file via Drupal.org * Under GPL license. * * Slideshow, iframe and video functionality added by Stella Power. */ var Lightbox; (function($) { Lightbox = { auto_modal : false, overlayOpacity : 0.8, // Controls transparency of shadow overlay. overlayColor : '000', // Controls colour of shadow overlay. disableCloseClick : true, // Controls the order of the lightbox resizing animation sequence. resizeSequence: 0, // 0: simultaneous, 1: width then height, 2: height then width. resizeSpeed: 'normal', // Controls the speed of the lightbox resizing animation. fadeInSpeed: 'normal', // Controls the speed of the image appearance. slideDownSpeed: 'slow', // Controls the speed of the image details appearance. minWidth: 240, borderSize : 10, boxColor : 'fff', fontColor : '000', topPosition : '', infoHeight: 20, alternative_layout : false, imageArray : [], imageNum : null, total : 0, activeImage : null, inprogress : false, disableResize : false, disableZoom : false, isZoomedIn : false, rtl : false, loopItems : false, keysClose : ['c', 'x', 27], keysPrevious : ['p', 37], keysNext : ['n', 39], keysZoom : ['z'], keysPlayPause : [32], // Slideshow options. slideInterval : 5000, // In milliseconds. showPlayPause : true, autoStart : true, autoExit : true, pauseOnNextClick : false, // True to pause the slideshow when the "Next" button is clicked. pauseOnPrevClick : true, // True to pause the slideshow when the "Prev" button is clicked. slideIdArray : [], slideIdCount : 0, isSlideshow : false, isPaused : false, loopSlides : false, // Iframe options. isLightframe : false, iframe_width : 600, iframe_height : 400, iframe_border : 1, // Video and modal options. enableVideo : false, flvPlayer : '/flvplayer.swf', flvFlashvars : '', isModal : false, isVideo : false, videoId : false, modalWidth : 400, modalHeight : 400, modalHTML : null, // initialize() // Constructor runs on completion of the DOM loading. // The function inserts html at the bottom of the page which is used // to display the shadow overlay and the image container. initialize: function() { var s = Drupal.settings.lightbox2; Lightbox.overlayOpacity = s.overlay_opacity; Lightbox.overlayColor = s.overlay_color; Lightbox.disableCloseClick = s.disable_close_click; Lightbox.resizeSequence = s.resize_sequence; Lightbox.resizeSpeed = s.resize_speed; Lightbox.fadeInSpeed = s.fade_in_speed; Lightbox.slideDownSpeed = s.slide_down_speed; Lightbox.borderSize = s.border_size; Lightbox.boxColor = s.box_color; Lightbox.fontColor = s.font_color; Lightbox.topPosition = s.top_position; Lightbox.rtl = s.rtl; Lightbox.loopItems = s.loop_items; Lightbox.keysClose = s.keys_close.split(" "); Lightbox.keysPrevious = s.keys_previous.split(" "); Lightbox.keysNext = s.keys_next.split(" "); Lightbox.keysZoom = s.keys_zoom.split(" "); Lightbox.keysPlayPause = s.keys_play_pause.split(" "); Lightbox.disableResize = s.disable_resize; Lightbox.disableZoom = s.disable_zoom; Lightbox.slideInterval = s.slideshow_interval; Lightbox.showPlayPause = s.show_play_pause; Lightbox.showCaption = s.show_caption; Lightbox.autoStart = s.slideshow_automatic_start; Lightbox.autoExit = s.slideshow_automatic_exit; Lightbox.pauseOnNextClick = s.pause_on_next_click; Lightbox.pauseOnPrevClick = s.pause_on_previous_click; Lightbox.loopSlides = s.loop_slides; Lightbox.alternative_layout = s.use_alt_layout; Lightbox.iframe_width = s.iframe_width; Lightbox.iframe_height = s.iframe_height; Lightbox.iframe_border = s.iframe_border; Lightbox.enableVideo = s.enable_video; if (s.enable_video) { Lightbox.flvPlayer = s.flvPlayer; Lightbox.flvFlashvars = s.flvFlashvars; } // Make the lightbox divs. var layout_class = (s.use_alt_layout ? 'lightbox2-alt-layout' : 'lightbox2-orig-layout'); var output = '\ '; var loading = '
'; var modal = ''; var frame = ''; var imageContainer = ''; var details = '
'; var bottomNav = '
'; var image = ''; var hoverNav = '
'; var frameNav = '
'; var hoverNav = '
'; var frameNav = '
'; var caption = ''; var numberDisplay = ''; var close = ''; var zoom = ''; var zoomOut = ''; var pause = ''; var play = ''; $("body").append(output); $('#outerImageContainer').append(modal + frame + imageContainer + loading); if (!s.use_alt_layout) { $('#imageContainer').append(image + hoverNav); $('#imageData').append(details + bottomNav); $('#imageDetails').append(caption + numberDisplay); $('#bottomNav').append(frameNav + close + zoom + zoomOut + pause + play); } else { $('#outerImageContainer').append(bottomNav); $('#imageContainer').append(image); $('#bottomNav').append(close + zoom + zoomOut); $('#imageData').append(hoverNav + details); $('#imageDetails').append(caption + numberDisplay + pause + play); } // Setup onclick handlers. if (Lightbox.disableCloseClick) { $('#lightbox2-overlay').click(function() { Lightbox.end(); return false; } ).hide(); } $('#loadingLink, #bottomNavClose').click(function() { Lightbox.end('forceClose'); return false; } ); $('#prevLink, #framePrevLink').click(function() { Lightbox.changeData(Lightbox.activeImage - 1); return false; } ); $('#nextLink, #frameNextLink').click(function() { Lightbox.changeData(Lightbox.activeImage + 1); return false; } ); $('#bottomNavZoom').click(function() { Lightbox.changeData(Lightbox.activeImage, true); return false; } ); $('#bottomNavZoomOut').click(function() { Lightbox.changeData(Lightbox.activeImage, false); return false; } ); $('#lightshowPause').click(function() { Lightbox.togglePlayPause("lightshowPause", "lightshowPlay"); return false; } ); $('#lightshowPlay').click(function() { Lightbox.togglePlayPause("lightshowPlay", "lightshowPause"); return false; } ); // Fix positioning. $('#prevLink, #nextLink, #framePrevLink, #frameNextLink').css({ 'paddingTop': Lightbox.borderSize + 'px'}); $('#imageContainer, #frameContainer, #modalContainer').css({ 'padding': Lightbox.borderSize + 'px'}); $('#outerImageContainer, #imageDataContainer, #bottomNavClose').css({'backgroundColor': '#' + Lightbox.boxColor, 'color': '#'+Lightbox.fontColor}); if (Lightbox.alternative_layout) { $('#bottomNavZoom, #bottomNavZoomOut').css({'bottom': Lightbox.borderSize + 'px', 'right': Lightbox.borderSize + 'px'}); } else if (Lightbox.rtl == 1 && $.browser.msie) { $('#bottomNavZoom, #bottomNavZoomOut').css({'left': '0px'}); } // Force navigation links to always be displayed if (s.force_show_nav) { $('#prevLink, #nextLink').addClass("force_show_nav"); } }, // initList() // Loops through anchor tags looking for 'lightbox', 'lightshow' and // 'lightframe', etc, references and applies onclick events to appropriate // links. You can rerun after dynamically adding images w/ajax. initList : function(context) { if (context == undefined || context == null) { context = document; } // Attach lightbox to any links with rel 'lightbox', 'lightshow' or // 'lightframe', etc. $("a[rel^='lightbox']:not(.lightbox-processed), area[rel^='lightbox']:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) { if (Lightbox.disableCloseClick) { $('#lightbox').unbind('click'); $('#lightbox').click(function() { Lightbox.end('forceClose'); } ); } Lightbox.start(this, false, false, false, false); if (e.preventDefault) { e.preventDefault(); } return false; }); $("a[rel^='lightshow']:not(.lightbox-processed), area[rel^='lightshow']:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) { if (Lightbox.disableCloseClick) { $('#lightbox').unbind('click'); $('#lightbox').click(function() { Lightbox.end('forceClose'); } ); } Lightbox.start(this, true, false, false, false); if (e.preventDefault) { e.preventDefault(); } return false; }); $("a[rel^='lightframe']:not(.lightbox-processed), area[rel^='lightframe']:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) { if (Lightbox.disableCloseClick) { $('#lightbox').unbind('click'); $('#lightbox').click(function() { Lightbox.end('forceClose'); } ); } Lightbox.start(this, false, true, false, false); if (e.preventDefault) { e.preventDefault(); } return false; }); if (Lightbox.enableVideo) { $("a[rel^='lightvideo']:not(.lightbox-processed), area[rel^='lightvideo']:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) { if (Lightbox.disableCloseClick) { $('#lightbox').unbind('click'); $('#lightbox').click(function() { Lightbox.end('forceClose'); } ); } Lightbox.start(this, false, false, true, false); if (e.preventDefault) { e.preventDefault(); } return false; }); } $("a[rel^='lightmodal']:not(.lightbox-processed), area[rel^='lightmodal']:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) { $('#lightbox').unbind('click'); // Add classes from the link to the lightbox div - don't include lightbox-processed $('#lightbox').addClass($(this).attr('class')); $('#lightbox').removeClass('lightbox-processed'); Lightbox.start(this, false, false, false, true); if (e.preventDefault) { e.preventDefault(); } return false; }); $("#lightboxAutoModal:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) { Lightbox.auto_modal = true; $('#lightbox').unbind('click'); Lightbox.start(this, false, false, false, true); if (e.preventDefault) { e.preventDefault(); } return false; }); }, // start() // Display overlay and lightbox. If image is part of a set, add siblings to // imageArray. start: function(imageLink, slideshow, lightframe, lightvideo, lightmodal) { Lightbox.isPaused = !Lightbox.autoStart; // Replaces hideSelectBoxes() and hideFlash() calls in original lightbox2. Lightbox.toggleSelectsFlash('hide'); // Stretch overlay to fill page and fade in. var arrayPageSize = Lightbox.getPageSize(); $("#lightbox2-overlay").hide().css({ 'width': '100%', 'zIndex': '10090', 'height': arrayPageSize[1] + 'px', 'backgroundColor' : '#' + Lightbox.overlayColor }); // Detect OS X FF2 opacity + flash issue. if (lightvideo && this.detectMacFF2()) { $("#lightbox2-overlay").removeClass("overlay_default"); $("#lightbox2-overlay").addClass("overlay_macff2"); $("#lightbox2-overlay").css({'opacity' : null}); } else { $("#lightbox2-overlay").removeClass("overlay_macff2"); $("#lightbox2-overlay").addClass("overlay_default"); $("#lightbox2-overlay").css({'opacity' : Lightbox.overlayOpacity}); } $("#lightbox2-overlay").fadeIn(Lightbox.fadeInSpeed); Lightbox.isSlideshow = slideshow; Lightbox.isLightframe = lightframe; Lightbox.isVideo = lightvideo; Lightbox.isModal = lightmodal; Lightbox.imageArray = []; Lightbox.imageNum = 0; var anchors = $(imageLink.tagName); var anchor = null; var rel_parts = Lightbox.parseRel(imageLink); var rel = rel_parts["rel"]; var rel_group = rel_parts["group"]; var title = (rel_parts["title"] ? rel_parts["title"] : imageLink.title); var rel_style = null; var i = 0; if (rel_parts["flashvars"]) { Lightbox.flvFlashvars = Lightbox.flvFlashvars + '&' + rel_parts["flashvars"]; } // Set the title for image alternative text. var alt = imageLink.title; if (!alt) { var img = $(imageLink).find("img"); if (img && $(img).attr("alt")) { alt = $(img).attr("alt"); } else { alt = title; } } if ($(imageLink).attr('id') == 'lightboxAutoModal') { rel_style = rel_parts["style"]; Lightbox.imageArray.push(['#lightboxAutoModal > *', title, alt, rel_style, 1]); } else { // Handle lightbox images with no grouping. if ((rel == 'lightbox' || rel == 'lightshow') && !rel_group) { Lightbox.imageArray.push([imageLink.href, title, alt]); } // Handle other items with no grouping. else if (!rel_group) { rel_style = rel_parts["style"]; Lightbox.imageArray.push([imageLink.href, title, alt, rel_style]); } // Handle grouped items. else { // Loop through anchors and add them to imageArray. for (i = 0; i < anchors.length; i++) { anchor = anchors[i]; if (anchor.href && typeof(anchor.href) == "string" && $(anchor).attr('rel')) { var rel_data = Lightbox.parseRel(anchor); var anchor_title = (rel_data["title"] ? rel_data["title"] : anchor.title); img_alt = anchor.title; if (!img_alt) { var anchor_img = $(anchor).find("img"); if (anchor_img && $(anchor_img).attr("alt")) { img_alt = $(anchor_img).attr("alt"); } else { img_alt = title; } } if (rel_data["rel"] == rel) { if (rel_data["group"] == rel_group) { if (Lightbox.isLightframe || Lightbox.isModal || Lightbox.isVideo) { rel_style = rel_data["style"]; } Lightbox.imageArray.push([anchor.href, anchor_title, img_alt, rel_style]); } } } } // Remove duplicates. for (i = 0; i < Lightbox.imageArray.length; i++) { for (j = Lightbox.imageArray.length-1; j > i; j--) { if (Lightbox.imageArray[i][0] == Lightbox.imageArray[j][0]) { Lightbox.imageArray.splice(j,1); } } } while (Lightbox.imageArray[Lightbox.imageNum][0] != imageLink.href) { Lightbox.imageNum++; } } } if (Lightbox.isSlideshow && Lightbox.showPlayPause && Lightbox.isPaused) { $('#lightshowPlay').show(); $('#lightshowPause').hide(); } // Calculate top and left offset for the lightbox. var arrayPageScroll = Lightbox.getPageScroll(); var lightboxTop = arrayPageScroll[1] + (Lightbox.topPosition == '' ? (arrayPageSize[3] / 10) : Lightbox.topPosition) * 1; var lightboxLeft = arrayPageScroll[0]; $('#frameContainer, #modalContainer, #lightboxImage').hide(); $('#hoverNav, #prevLink, #nextLink, #frameHoverNav, #framePrevLink, #frameNextLink').hide(); $('#imageDataContainer, #numberDisplay, #bottomNavZoom, #bottomNavZoomOut').hide(); $('#outerImageContainer').css({'width': '250px', 'height': '250px'}); $('#lightbox').css({ 'zIndex': '10500', 'top': lightboxTop + 'px', 'left': lightboxLeft + 'px' }).show(); Lightbox.total = Lightbox.imageArray.length; Lightbox.changeData(Lightbox.imageNum); }, // changeData() // Hide most elements and preload image in preparation for resizing image // container. changeData: function(imageNum, zoomIn) { if (Lightbox.inprogress === false) { if (Lightbox.total > 1 && ((Lightbox.isSlideshow && Lightbox.loopSlides) || (!Lightbox.isSlideshow && Lightbox.loopItems))) { if (imageNum >= Lightbox.total) imageNum = 0; if (imageNum < 0) imageNum = Lightbox.total - 1; } if (Lightbox.isSlideshow) { for (var i = 0; i < Lightbox.slideIdCount; i++) { window.clearTimeout(Lightbox.slideIdArray[i]); } } Lightbox.inprogress = true; Lightbox.activeImage = imageNum; if (Lightbox.disableResize && !Lightbox.isSlideshow) { zoomIn = true; } Lightbox.isZoomedIn = zoomIn; // Hide elements during transition. $('#loading').css({'zIndex': '10500'}).show(); if (!Lightbox.alternative_layout) { $('#imageContainer').hide(); } $('#frameContainer, #modalContainer, #lightboxImage').hide(); $('#hoverNav, #prevLink, #nextLink, #frameHoverNav, #framePrevLink, #frameNextLink').hide(); $('#imageDataContainer, #numberDisplay, #bottomNavZoom, #bottomNavZoomOut').hide(); // Preload image content, but not iframe pages. if (!Lightbox.isLightframe && !Lightbox.isVideo && !Lightbox.isModal) { $("#lightbox #imageDataContainer").removeClass('lightbox2-alt-layout-data'); imgPreloader = new Image(); imgPreloader.onerror = function() { Lightbox.imgNodeLoadingError(this); }; imgPreloader.onload = function() { var photo = document.getElementById('lightboxImage'); photo.src = Lightbox.imageArray[Lightbox.activeImage][0]; photo.alt = Lightbox.imageArray[Lightbox.activeImage][2]; var imageWidth = imgPreloader.width; var imageHeight = imgPreloader.height; // Resize code. var arrayPageSize = Lightbox.getPageSize(); var targ = { w:arrayPageSize[2] - (Lightbox.borderSize * 2), h:arrayPageSize[3] - (Lightbox.borderSize * 6) - (Lightbox.infoHeight * 4) - (arrayPageSize[3] / 10) }; var orig = { w:imgPreloader.width, h:imgPreloader.height }; // Image is very large, so show a smaller version of the larger image // with zoom button. if (zoomIn !== true) { var ratio = 1.0; // Shrink image with the same aspect. $('#bottomNavZoomOut, #bottomNavZoom').hide(); if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) { ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h; if (!Lightbox.disableZoom && !Lightbox.isSlideshow) { $('#bottomNavZoom').css({'zIndex': '10500'}).show(); } } imageWidth = Math.floor(orig.w * ratio); imageHeight = Math.floor(orig.h * ratio); } else { $('#bottomNavZoom').hide(); // Only display zoom out button if the image is zoomed in already. if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) { // Only display zoom out button if not a slideshow and if the // buttons aren't disabled. if (!Lightbox.disableResize && Lightbox.isSlideshow === false && !Lightbox.disableZoom) { $('#bottomNavZoomOut').css({'zIndex': '10500'}).show(); } } } photo.style.width = (imageWidth) + 'px'; photo.style.height = (imageHeight) + 'px'; Lightbox.resizeContainer(imageWidth, imageHeight); // Clear onLoad, IE behaves irratically with animated gifs otherwise. imgPreloader.onload = function() {}; }; imgPreloader.src = Lightbox.imageArray[Lightbox.activeImage][0]; imgPreloader.alt = Lightbox.imageArray[Lightbox.activeImage][2]; } // Set up frame size, etc. else if (Lightbox.isLightframe) { $("#lightbox #imageDataContainer").addClass('lightbox2-alt-layout-data'); var src = Lightbox.imageArray[Lightbox.activeImage][0]; $('#frameContainer').html(''); // Enable swf support in Gecko browsers. if ($.browser.mozilla && src.indexOf('.swf') != -1) { setTimeout(function () { document.getElementById("lightboxFrame").src = Lightbox.imageArray[Lightbox.activeImage][0]; }, 1000); } if (!Lightbox.iframe_border) { $('#lightboxFrame').css({'border': 'none'}); $('#lightboxFrame').attr('frameborder', '0'); } var iframe = document.getElementById('lightboxFrame'); var iframeStyles = Lightbox.imageArray[Lightbox.activeImage][3]; iframe = Lightbox.setStyles(iframe, iframeStyles); Lightbox.resizeContainer(parseInt(iframe.width, 10), parseInt(iframe.height, 10)); } else if (Lightbox.isVideo || Lightbox.isModal) { $("#lightbox #imageDataContainer").addClass('lightbox2-alt-layout-data'); var container = document.getElementById('modalContainer'); var modalStyles = Lightbox.imageArray[Lightbox.activeImage][3]; container = Lightbox.setStyles(container, modalStyles); if (Lightbox.isVideo) { Lightbox.modalHeight = parseInt(container.height, 10) - 10; Lightbox.modalWidth = parseInt(container.width, 10) - 10; Lightvideo.startVideo(Lightbox.imageArray[Lightbox.activeImage][0]); } Lightbox.resizeContainer(parseInt(container.width, 10), parseInt(container.height, 10)); } } }, // imgNodeLoadingError() imgNodeLoadingError: function(image) { var s = Drupal.settings.lightbox2; var original_image = Lightbox.imageArray[Lightbox.activeImage][0]; if (s.display_image_size !== "") { original_image = original_image.replace(new RegExp("."+s.display_image_size), ""); } Lightbox.imageArray[Lightbox.activeImage][0] = original_image; image.onerror = function() { Lightbox.imgLoadingError(image); }; image.src = original_image; }, // imgLoadingError() imgLoadingError: function(image) { var s = Drupal.settings.lightbox2; Lightbox.imageArray[Lightbox.activeImage][0] = s.default_image; image.src = s.default_image; }, // resizeContainer() resizeContainer: function(imgWidth, imgHeight) { imgWidth = (imgWidth < Lightbox.minWidth ? Lightbox.minWidth : imgWidth); this.widthCurrent = $('#outerImageContainer').width(); this.heightCurrent = $('#outerImageContainer').height(); var widthNew = (imgWidth + (Lightbox.borderSize * 2)); var heightNew = (imgHeight + (Lightbox.borderSize * 2)); // Scalars based on change from old to new. this.xScale = ( widthNew / this.widthCurrent) * 100; this.yScale = ( heightNew / this.heightCurrent) * 100; // Calculate size difference between new and old image, and resize if // necessary. wDiff = this.widthCurrent - widthNew; hDiff = this.heightCurrent - heightNew; $('#modalContainer').css({'width': imgWidth, 'height': imgHeight}); // Detect animation sequence. if (Lightbox.resizeSequence) { var animate1 = {width: widthNew}; var animate2 = {height: heightNew}; if (Lightbox.resizeSequence == 2) { animate1 = {height: heightNew}; animate2 = {width: widthNew}; } $('#outerImageContainer').animate(animate1, Lightbox.resizeSpeed).animate(animate2, Lightbox.resizeSpeed, 'linear', function() { Lightbox.showData(); }); } // Simultaneous. else { $('#outerImageContainer').animate({'width': widthNew, 'height': heightNew}, Lightbox.resizeSpeed, 'linear', function() { Lightbox.showData(); }); } // 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 ($.browser.msie) { Lightbox.pause(250); } else { Lightbox.pause(100); } } var s = Drupal.settings.lightbox2; if (!s.use_alt_layout) { $('#prevLink, #nextLink').css({'height': imgHeight + 'px'}); } $('#imageDataContainer').css({'width': widthNew + 'px'}); }, // showData() // Display image and begin preloading neighbors. showData: function() { $('#loading').hide(); if (Lightbox.isLightframe || Lightbox.isVideo || Lightbox.isModal) { Lightbox.updateDetails(); if (Lightbox.isLightframe) { $('#frameContainer').show(); if ($.browser.safari || Lightbox.fadeInSpeed === 0) { $('#lightboxFrame').css({'zIndex': '10500'}).show(); } else { $('#lightboxFrame').css({'zIndex': '10500'}).fadeIn(Lightbox.fadeInSpeed); } } else { if (Lightbox.isVideo) { $("#modalContainer").html(Lightbox.modalHTML).click(function(){return false;}).css('zIndex', '10500').show(); } else { var src = unescape(Lightbox.imageArray[Lightbox.activeImage][0]); if (Lightbox.imageArray[Lightbox.activeImage][4]) { $(src).appendTo("#modalContainer"); $('#modalContainer').css({'zIndex': '10500'}).show(); } else { // Use a callback to show the new image, otherwise you get flicker. $("#modalContainer").hide().load(src, function () {$('#modalContainer').css({'zIndex': '10500'}).show();}); } $('#modalContainer').unbind('click'); } // This might be needed in the Lightframe section above. //$('#modalContainer').css({'zIndex': '10500'}).show(); } } // Handle display of image content. else { $('#imageContainer').show(); if ($.browser.safari || Lightbox.fadeInSpeed === 0) { $('#lightboxImage').css({'zIndex': '10500'}).show(); } else { $('#lightboxImage').css({'zIndex': '10500'}).fadeIn(Lightbox.fadeInSpeed); } Lightbox.updateDetails(); this.preloadNeighborImages(); } Lightbox.inprogress = false; // Slideshow specific stuff. if (Lightbox.isSlideshow) { if (!Lightbox.loopSlides && Lightbox.activeImage == (Lightbox.total - 1)) { if (Lightbox.autoExit) { Lightbox.slideIdArray[Lightbox.slideIdCount++] = setTimeout(function () {Lightbox.end('slideshow');}, Lightbox.slideInterval); } } else { if (!Lightbox.isPaused && Lightbox.total > 1) { Lightbox.slideIdArray[Lightbox.slideIdCount++] = setTimeout(function () {Lightbox.changeData(Lightbox.activeImage + 1);}, Lightbox.slideInterval); } } if (Lightbox.showPlayPause && Lightbox.total > 1 && !Lightbox.isPaused) { $('#lightshowPause').show(); $('#lightshowPlay').hide(); } else if (Lightbox.showPlayPause && Lightbox.total > 1) { $('#lightshowPause').hide(); $('#lightshowPlay').show(); } } // Adjust the page overlay size. var arrayPageSize = Lightbox.getPageSize(); var arrayPageScroll = Lightbox.getPageScroll(); var pageHeight = arrayPageSize[1]; if (Lightbox.isZoomedIn && arrayPageSize[1] > arrayPageSize[3]) { var lightboxTop = (Lightbox.topPosition == '' ? (arrayPageSize[3] / 10) : Lightbox.topPosition) * 1; pageHeight = pageHeight + arrayPageScroll[1] + lightboxTop; } $('#lightbox2-overlay').css({'height': pageHeight + 'px', 'width': arrayPageSize[0] + 'px'}); // Gecko browsers (e.g. Firefox, SeaMonkey, etc) don't handle pdfs as // expected. if ($.browser.mozilla) { if (Lightbox.imageArray[Lightbox.activeImage][0].indexOf(".pdf") != -1) { setTimeout(function () { document.getElementById("lightboxFrame").src = Lightbox.imageArray[Lightbox.activeImage][0]; }, 1000); } } }, // updateDetails() // Display caption, image number, and bottom nav. updateDetails: function() { $("#imageDataContainer").hide(); var s = Drupal.settings.lightbox2; if (s.show_caption) { var caption = Lightbox.filterXSS(Lightbox.imageArray[Lightbox.activeImage][1]); if (!caption) caption = ''; $('#caption').html(caption).css({'zIndex': '10500'}).show(); } // If image is part of set display 'Image x of x'. var numberDisplay = null; if (s.image_count && Lightbox.total > 1) { var currentImage = Lightbox.activeImage + 1; if (!Lightbox.isLightframe && !Lightbox.isModal && !Lightbox.isVideo) { numberDisplay = s.image_count.replace(/\!current/, currentImage).replace(/\!total/, Lightbox.total); } else if (Lightbox.isVideo) { numberDisplay = s.video_count.replace(/\!current/, currentImage).replace(/\!total/, Lightbox.total); } else { numberDisplay = s.page_count.replace(/\!current/, currentImage).replace(/\!total/, Lightbox.total); } $('#numberDisplay').html(numberDisplay).css({'zIndex': '10500'}).show(); } else { $('#numberDisplay').hide(); } $("#imageDataContainer").hide().slideDown(Lightbox.slideDownSpeed, function() { $("#bottomNav").show(); }); if (Lightbox.rtl == 1) { $("#bottomNav").css({'float': 'left'}); } Lightbox.updateNav(); }, // updateNav() // Display appropriate previous and next hover navigation. updateNav: function() { $('#hoverNav').css({'zIndex': '10500'}).show(); var prevLink = '#prevLink'; var nextLink = '#nextLink'; // Slideshow is separated as we need to show play / pause button. if (Lightbox.isSlideshow) { if ((Lightbox.total > 1 && Lightbox.loopSlides) || Lightbox.activeImage !== 0) { $(prevLink).css({'zIndex': '10500'}).show().click(function() { if (Lightbox.pauseOnPrevClick) { Lightbox.togglePlayPause("lightshowPause", "lightshowPlay"); } Lightbox.changeData(Lightbox.activeImage - 1); return false; }); } else { $(prevLink).hide(); } // If not last image in set, display next image button. if ((Lightbox.total > 1 && Lightbox.loopSlides) || Lightbox.activeImage != (Lightbox.total - 1)) { $(nextLink).css({'zIndex': '10500'}).show().click(function() { if (Lightbox.pauseOnNextClick) { Lightbox.togglePlayPause("lightshowPause", "lightshowPlay"); } Lightbox.changeData(Lightbox.activeImage + 1); return false; }); } // Safari browsers need to have hide() called again. else { $(nextLink).hide(); } } // All other types of content. else { if ((Lightbox.isLightframe || Lightbox.isModal || Lightbox.isVideo) && !Lightbox.alternative_layout) { $('#frameHoverNav').css({'zIndex': '10500'}).show(); $('#hoverNav').css({'zIndex': '10500'}).hide(); prevLink = '#framePrevLink'; nextLink = '#frameNextLink'; } // If not first image in set, display prev image button. if ((Lightbox.total > 1 && Lightbox.loopItems) || Lightbox.activeImage !== 0) { // Unbind any other click handlers, otherwise this adds a new click handler // each time the arrow is clicked. $(prevLink).css({'zIndex': '10500'}).show().unbind().click(function() { Lightbox.changeData(Lightbox.activeImage - 1); return false; }); } // Safari browsers need to have hide() called again. else { $(prevLink).hide(); } // If not last image in set, display next image button. if ((Lightbox.total > 1 && Lightbox.loopItems) || Lightbox.activeImage != (Lightbox.total - 1)) { // Unbind any other click handlers, otherwise this adds a new click handler // each time the arrow is clicked. $(nextLink).css({'zIndex': '10500'}).show().unbind().click(function() { Lightbox.changeData(Lightbox.activeImage + 1); return false; }); } // Safari browsers need to have hide() called again. else { $(nextLink).hide(); } } // Don't enable keyboard shortcuts so forms will work. if (!Lightbox.isModal) { this.enableKeyboardNav(); } }, // enableKeyboardNav() enableKeyboardNav: function() { $(document).bind("keydown", this.keyboardAction); }, // disableKeyboardNav() disableKeyboardNav: function() { $(document).unbind("keydown", this.keyboardAction); }, // keyboardAction() keyboardAction: function(e) { if (e === null) { // IE. keycode = event.keyCode; escapeKey = 27; } else { // Mozilla. keycode = e.keyCode; escapeKey = e.DOM_VK_ESCAPE; } key = String.fromCharCode(keycode).toLowerCase(); // Close lightbox. if (Lightbox.checkKey(Lightbox.keysClose, key, keycode)) { Lightbox.end('forceClose'); } // Display previous image (p, <-). else if (Lightbox.checkKey(Lightbox.keysPrevious, key, keycode)) { if ((Lightbox.total > 1 && ((Lightbox.isSlideshow && Lightbox.loopSlides) || (!Lightbox.isSlideshow && Lightbox.loopItems))) || Lightbox.activeImage !== 0) { Lightbox.changeData(Lightbox.activeImage - 1); } } // Display next image (n, ->). else if (Lightbox.checkKey(Lightbox.keysNext, key, keycode)) { if ((Lightbox.total > 1 && ((Lightbox.isSlideshow && Lightbox.loopSlides) || (!Lightbox.isSlideshow && Lightbox.loopItems))) || Lightbox.activeImage != (Lightbox.total - 1)) { Lightbox.changeData(Lightbox.activeImage + 1); } } // Zoom in. else if (Lightbox.checkKey(Lightbox.keysZoom, key, keycode) && !Lightbox.disableResize && !Lightbox.disableZoom && !Lightbox.isSlideshow && !Lightbox.isLightframe) { if (Lightbox.isZoomedIn) { Lightbox.changeData(Lightbox.activeImage, false); } else if (!Lightbox.isZoomedIn) { Lightbox.changeData(Lightbox.activeImage, true); } return false; } // Toggle play / pause (space). else if (Lightbox.checkKey(Lightbox.keysPlayPause, key, keycode) && Lightbox.isSlideshow) { if (Lightbox.isPaused) { Lightbox.togglePlayPause("lightshowPlay", "lightshowPause"); } else { Lightbox.togglePlayPause("lightshowPause", "lightshowPlay"); } return false; } }, preloadNeighborImages: function() { if ((Lightbox.total - 1) > Lightbox.activeImage) { preloadNextImage = new Image(); preloadNextImage.src = Lightbox.imageArray[Lightbox.activeImage + 1][0]; } if (Lightbox.activeImage > 0) { preloadPrevImage = new Image(); preloadPrevImage.src = Lightbox.imageArray[Lightbox.activeImage - 1][0]; } }, end: function(caller) { var closeClick = (caller == 'slideshow' ? false : true); if (Lightbox.isSlideshow && Lightbox.isPaused && !closeClick) { return; } // To prevent double clicks on navigation links. if (Lightbox.inprogress === true && caller != 'forceClose') { return; } Lightbox.disableKeyboardNav(); $('#lightbox').hide(); $("#lightbox2-overlay").fadeOut(); Lightbox.isPaused = true; Lightbox.inprogress = false; // Replaces calls to showSelectBoxes() and showFlash() in original // lightbox2. Lightbox.toggleSelectsFlash('visible'); if (Lightbox.isSlideshow) { for (var i = 0; i < Lightbox.slideIdCount; i++) { window.clearTimeout(Lightbox.slideIdArray[i]); } $('#lightshowPause, #lightshowPlay').hide(); } else if (Lightbox.isLightframe) { $('#frameContainer').empty().hide(); } else if (Lightbox.isVideo || Lightbox.isModal) { if (!Lightbox.auto_modal) { $('#modalContainer').hide().html(""); } Lightbox.auto_modal = false; } }, // getPageScroll() // Returns array with x,y page scroll values. // Core code from - quirksmode.com. getPageScroll : function() { var xScroll, yScroll; if (self.pageYOffset || self.pageXOffset) { yScroll = self.pageYOffset; xScroll = self.pageXOffset; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { // 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; } arrayPageScroll = [xScroll,yScroll]; return arrayPageScroll; }, // getPageSize() // Returns array with page width, height and window width, height. // Core code from - quirksmode.com. // Edit for Firefox by pHaez. getPageSize : function() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = window.innerWidth + window.scrollMaxX; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight) { // All but Explorer Mac. xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari. xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // All except Explorer. if (document.documentElement.clientWidth) { windowWidth = document.documentElement.clientWidth; } else { windowWidth = self.innerWidth; } windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode. windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // Other Explorers. windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // For small pages with total height less than height of the viewport. if (yScroll < windowHeight) { pageHeight = windowHeight; } else { pageHeight = yScroll; } // For small pages with total width less than width of the viewport. if (xScroll < windowWidth) { pageWidth = xScroll; } else { pageWidth = windowWidth; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight); return arrayPageSize; }, // pause(numberMillis) pause : function(ms) { var date = new Date(); var curDate = null; do { curDate = new Date(); } while (curDate - date < ms); }, // toggleSelectsFlash() // Hide / unhide select lists and flash objects as they appear above the // lightbox in some browsers. toggleSelectsFlash: function (state) { if (state == 'visible') { $("select.lightbox_hidden, embed.lightbox_hidden, object.lightbox_hidden").show(); } else if (state == 'hide') { $("select:visible, embed:visible, object:visible").not('#lightboxAutoModal select, #lightboxAutoModal embed, #lightboxAutoModal object').addClass("lightbox_hidden"); $("select.lightbox_hidden, embed.lightbox_hidden, object.lightbox_hidden").hide(); } }, // parseRel() parseRel: function (link) { var parts = []; parts["rel"] = parts["title"] = parts["group"] = parts["style"] = parts["flashvars"] = null; if (!$(link).attr('rel')) return parts; parts["rel"] = $(link).attr('rel').match(/\w+/)[0]; if ($(link).attr('rel').match(/\[(.*)\]/)) { var info = $(link).attr('rel').match(/\[(.*?)\]/)[1].split('|'); parts["group"] = info[0]; parts["style"] = info[1]; if (parts["style"] != undefined && parts["style"].match(/flashvars:\s?(.*?);/)) { parts["flashvars"] = parts["style"].match(/flashvars:\s?(.*?);/)[1]; } } if ($(link).attr('rel').match(/\[.*\]\[(.*)\]/)) { parts["title"] = $(link).attr('rel').match(/\[.*\]\[(.*)\]/)[1]; } return parts; }, // setStyles() setStyles: function(item, styles) { item.width = Lightbox.iframe_width; item.height = Lightbox.iframe_height; item.scrolling = "auto"; if (!styles) return item; var stylesArray = styles.split(';'); for (var i = 0; i< stylesArray.length; i++) { if (stylesArray[i].indexOf('width:') >= 0) { var w = stylesArray[i].replace('width:', ''); item.width = jQuery.trim(w); } else if (stylesArray[i].indexOf('height:') >= 0) { var h = stylesArray[i].replace('height:', ''); item.height = jQuery.trim(h); } else if (stylesArray[i].indexOf('scrolling:') >= 0) { var scrolling = stylesArray[i].replace('scrolling:', ''); item.scrolling = jQuery.trim(scrolling); } else if (stylesArray[i].indexOf('overflow:') >= 0) { var overflow = stylesArray[i].replace('overflow:', ''); item.overflow = jQuery.trim(overflow); } } return item; }, // togglePlayPause() // Hide the pause / play button as appropriate. If pausing the slideshow also // clear the timers, otherwise move onto the next image. togglePlayPause: function(hideId, showId) { if (Lightbox.isSlideshow && hideId == "lightshowPause") { for (var i = 0; i < Lightbox.slideIdCount; i++) { window.clearTimeout(Lightbox.slideIdArray[i]); } } $('#' + hideId).hide(); $('#' + showId).show(); if (hideId == "lightshowPlay") { Lightbox.isPaused = false; if (!Lightbox.loopSlides && Lightbox.activeImage == (Lightbox.total - 1)) { Lightbox.end(); } else if (Lightbox.total > 1) { Lightbox.changeData(Lightbox.activeImage + 1); } } else { Lightbox.isPaused = true; } }, triggerLightbox: function (rel_type, rel_group) { if (rel_type.length) { if (rel_group && rel_group.length) { $("a[rel^='" + rel_type +"\[" + rel_group + "\]'], area[rel^='" + rel_type +"\[" + rel_group + "\]']").eq(0).trigger("click"); } else { $("a[rel^='" + rel_type +"'], area[rel^='" + rel_type +"']").eq(0).trigger("click"); } } }, detectMacFF2: function() { var ua = navigator.userAgent.toLowerCase(); if (/firefox[\/\s](\d+\.\d+)/.test(ua)) { var ffversion = new Number(RegExp.$1); if (ffversion < 3 && ua.indexOf('mac') != -1) { return true; } } return false; }, checkKey: function(keys, key, code) { return (jQuery.inArray(key, keys) != -1 || jQuery.inArray(String(code), keys) != -1); }, filterXSS: function(str, allowed_tags) { var output = ""; $.ajax({ url: Drupal.settings.basePath + 'system/lightbox2/filter-xss', data: { 'string' : str, 'allowed_tags' : allowed_tags }, type: "POST", async: false, dataType: "json", success: function(data) { output = data; } }); return output; } }; // Initialize the lightbox. Drupal.behaviors.initLightbox = { attach: function(context) { $('body:not(.lightbox-processed)', context).addClass('lightbox-processed').each(function() { Lightbox.initialize(); return false; // Break the each loop. }); // Attach lightbox to any links with lightbox rels. Lightbox.initList(context); $('#lightboxAutoModal', context).triggerHandler('click'); } }; })(jQuery);