/* ColorBox v1.1.6 - a full featured, light-weight, customizable lightbox based on jQuery 1.3 (c) 2009 Jack Moore - www.colorpowered.com - jack@colorpowered.com Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php */ /* Line 173 modified for Piwigo */ (function($){ var settings, loadedWidth, loadedHeight, interfaceHeight, interfaceWidth, index, related, loadingElement, $modal, modalWrap, $loadingOverlay, $overlay, $modalContent, $loaded, $close, $borderTopCenter, $borderMiddleLeft, $borderMiddleRight, $borderBottomCenter; function setModalOverlay(){ $overlay.css({"position":"absolute", width:$(window).width(), height:$(window).height(), top:$(window).scrollTop(), left:$(window).scrollLeft()}); } function keypressEvents(e){ if(e.keyCode == 37){ e.preventDefault(); $(document).unbind('keydown', keypressEvents); $("a#contentPrevious").click(); } else if(e.keyCode == 39){ e.preventDefault(); $(document).unbind('keydown', keypressEvents); $("a#contentNext").click(); } } function clearLoading(){ if($("#colorboxInlineTemp").length > 0){ $loaded.children().insertAfter("#colorboxInlineTemp"); } if(loadingElement){$(loadingElement).remove();} } // Convert % values to pixels function setSize(size, dimension){ return (typeof size == 'string') ? (size.match(/%/) ? (dimension/100)*parseInt(size, 10) : parseInt(size, 10)) : size; } /* Initialize the modal: store common calculations, preload the interface graphics, append the html. This preps colorbox for a speedy open when clicked, and lightens the burdon on the browser by only having to run once, instead of each time colorbox is opened. */ $(function(){//jQuery shortcut for $(document).ready(function(){}); $("body").append( $overlay = $('
').hide(), $modal = $('
').css("opacity", 0) ); $('
').appendTo($modal).append( $('
'), $borderMiddleLeft = $('
'), $modalContent = $('
'), $borderMiddleRight = $('
'), $('
') ); $modalContent.append( //loaded is filled with temporary HTML to allow the CSS backgrounds for those elements to load before ColorBox is actually called. $loaded = $('
'), $loadingOverlay = $('
'), $close = $('') ); $(document).bind("keydown.colorClose", function(e){ if (e.keyCode == 27) { e.preventDefault(); $.fn.colorbox.close(); } }); $close.click(function(event){ event.preventDefault(); $.fn.colorbox.close(); }); $borderTopCenter = $("#borderTopCenter"); $borderBottomCenter = $("#borderBottomCenter"); interfaceHeight = $borderTopCenter.height()+$borderBottomCenter.height()+$modalContent.outerHeight(true) - $modalContent.height();//Subtraction needed for IE6 interfaceWidth = $borderMiddleLeft.width()+$borderMiddleRight.width()+$modalContent.outerWidth(true) - $modalContent.width(); loadedHeight = $loaded.outerHeight(true); loadedWidth = $loaded.outerWidth(true); $loaded.empty(); $modal.css({"padding-bottom":interfaceHeight,"padding-right":interfaceWidth}).hide();//the padding removes the need to do size conversions during the animation step. //Archaic rollover code because IE8 is a piece of shit. Hopefully they'll fix their css-rollover bug so the following code can be removed. $("#contentPrevious, #contentNext, #modalClose").live('mouseover', function(){$(this).addClass("hover");}); $("#contentPrevious, #contentNext, #modalClose").live('mouseout', function(){$(this).removeClass("hover");}); }); $.fn.colorbox = function(settings, callback) { function modalPosition(mWidth, mHeight, speed, loadedCallback){ var winHeight = document.documentElement.clientHeight; var posTop = winHeight/2 - mHeight/2; var posLeft = document.documentElement.clientWidth/2 - mWidth/2; //keeps the box from expanding to an inaccessible area offscreen. if(mHeight > winHeight){posTop -=(mHeight - winHeight);} if(posTop < 0){posTop = 0;} if(posLeft < 0){posLeft = 0;} posTop+=$(window).scrollTop(); posLeft+=$(window).scrollLeft(); mWidth = mWidth - interfaceWidth; mHeight = mHeight - interfaceHeight; function modalDimensions(that){ $modalContent[0].style.width = $borderTopCenter[0].style.width = $borderBottomCenter[0].style.width = that.style.width; $modalContent[0].style.height = $borderMiddleLeft[0].style.height = $borderMiddleRight[0].style.height = that.style.height; } $modal.animate({height:mHeight, width:mWidth, top:posTop, left:posLeft}, {duration: speed, complete: function(){ if (loadedCallback) {loadedCallback();} modalDimensions(this); if ($.browser.msie && $.browser.version < 7) {setModalOverlay();} }, step: function(){ modalDimensions(this); } }); } var preloads = []; function preload(){ if(settings.preloading !== false && related.length>1 && related[index].href.match(/\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(.*))?$/i)){ var previous, next; previous = index > 0 ? related[index-1].href : related[related.length-1].href; next = index < related.length-1 ? related[index+1].href : related[0].href; return [$("").attr("src", next), $("").attr("src", previous)]; } return false; } function contentNav(){ $loadingOverlay.show(); if($(this).attr("id") == "contentPrevious"){ index = index > 0 ? index-1 : related.length-1; } else { index = index < related.length-1 ? index+1 : 0; } loadModal(related[index].href, related[index].title); return false; } function centerModal (object, contentInfo){ if($modal.data("open")!==true){ return false; } var speed = settings.transition=="none" ? 0 : settings.transitionSpeed; $loaded.remove(); $loaded = $(object); $loaded.hide() .appendTo('body') .css({width:(settings.fixedWidth)?settings.fixedWidth - loadedWidth - interfaceWidth:$loaded.width()}).css({height:(settings.fixedHeight)?settings.fixedHeight - loadedHeight - interfaceHeight:$loaded.height()}) .attr({id:"modalLoadedContent"}) .append(contentInfo) .prependTo($modalContent); if($("#modalPhoto").length > 0 && settings.fixedHeight){ var topMargin = (parseInt($loaded[0].style.height, 10) - parseInt($("#modalPhoto")[0].style.height, 10))/2; $("#modalPhoto").css({marginTop:(topMargin > 0?topMargin:0)}); } function setPosition(s){ modalPosition(parseInt($loaded[0].style.width, 10)+loadedWidth+interfaceWidth, parseInt($loaded[0].style.height, 10)+loadedHeight+interfaceHeight, s, function(){ if($modal.data("open")!==true){ return false; } $loaded.show(); $loadingOverlay.hide(); $(document).bind('keydown', keypressEvents); if (callback) { callback(related[index]); /* ----- PIWIGO MODIFICATION ----- */ } if (settings.transition === "fade"){ $modal.animate({"opacity":1}, speed); } return true; }); } if (settings.transition == "fade") { $modal.animate({"opacity":0}, speed, function(){setPosition(0);}); } else { setPosition(speed); } var preloads = preload(); return true; } function loadModal(href, title){ clearLoading(); var contentInfo = "

"+title+"

"; if(related.length>1){ contentInfo += " " + settings.contentCurrent + ""; contentInfo = contentInfo.replace(/\{current\}/, index+1).replace(/\{total\}/, related.length); contentInfo += ""+settings.contentPrevious+""+settings.contentNext+" "; } if (settings.inline) { loadingElement = $('
').hide().insertBefore($(href)[0]); centerModal($(href).wrapAll("
").parent(), contentInfo); } else if (settings.iframe) { centerModal($("
"), contentInfo);//timestamp to prevent caching. } else if (href.match(/\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(.*))?$/i)){ loadingElement = new Image(); loadingElement.onload = function(){ loadingElement.onload = null; centerModal($("
").css({width:this.width, height:this.height}).append($(this).css({width:this.width, height:this.height, display:"block", margin:"auto"}).attr('id', 'modalPhoto')), contentInfo); if(related.length > 1){ $(this).css({cursor:'pointer'}).click(contentNav); } }; loadingElement.src = href; }else { loadingElement = $('
').load(href, function(data, textStatus){ if(textStatus == "success"){ centerModal($(this), contentInfo); } else { centerModal($("

Request unsuccessful.

")); } }); } } settings = $.extend({}, $.fn.colorbox.settings, settings); $(this).unbind("click.colorbox").bind("click.colorbox", function () { if(settings.fixedWidth){ settings.fixedWidth = setSize(settings.fixedWidth, document.documentElement.clientWidth);} if(settings.fixedHeight){ settings.fixedHeight = setSize(settings.fixedHeight, document.documentElement.clientHeight);} if (this.rel && 'nofollow' != this.rel) { related = $("a[rel='" + this.rel + "']"); index = $(related).index(this); } else { related = $(this); index = 0; } if ($modal.data("open") !== true) { $(document).bind('keydown', keypressEvents); $close.html(settings.modalClose); $overlay.css({"opacity": settings.bgOpacity}).show(); $modal.data("open", true).css({"opacity":1}); modalPosition(setSize(settings.initialWidth, document.documentElement.clientWidth), setSize(settings.initialHeight, document.documentElement.clientHeight), 0); if ($.browser.msie && $.browser.version < 7) { $(window).bind("resize scroll", setModalOverlay); } } loadModal(settings.href ? settings.href : related[index].href, settings.title ? settings.title : related[index].title); $("a#contentPrevious, a#contentNext").die().live("click", contentNav); if(settings.overlayClose!==false){ $overlay.css({"cursor":"pointer"}).click(function(){$.fn.colorbox.close();}); } return false; }); if(settings.open!==false && $modal.data("open")!==true){ $(this).triggerHandler('click.colorbox'); } return this.each(function() { }); }; //public function for closing colorbox. To use this within an iframe use the following format: parent.$.fn.colorbox.close(); $.fn.colorbox.close = function(){ $('#contentTitle').remove(); clearLoading(); $overlay.css({cursor:"auto"}).fadeOut("fast"); $modal.stop(true, false).removeData("open").fadeOut("fast", function(){ $loaded.remove(); }); $(document).unbind('keydown', keypressEvents); $(window).unbind('resize scroll', setModalOverlay); return false; }; /* ColorBox Default Settings. The colorbox() function takes one argument, an object of key/value pairs, that are used to initialize the modal. Please do not change these settings here, instead overwrite these settings when attaching the colorbox() event to your anchors. Example (Global) : $.fn.colorbox.settings.transition = "fade"; //changes the transition to fade for all colorBox() events proceeding it's declaration. Example (Specific) : $("a[href='http://www.google.com']").colorbox({fixedWidth:"90%", fixedHeight:"450px", iframe:true}); */ $.fn.colorbox.settings = { transition : "elastic", // Transition types: "elastic", "fade", or "none". transitionSpeed : 350, // Sets the speed of the fade and elastic transitions, in milliseconds. initialWidth : "400", // Set the initial width of the modal, prior to any content being loaded. initialHeight : "400", // Set the initial height of the modal, prior to any content being loaded. fixedWidth : false, // Set a fixed width for div#loaded. Example: "500px" fixedHeight : false, // Set a fixed height for div#modalLoadedContent. Example: "500px" inline : false, // Set this to the selector of inline content to be displayed. Example "#myHiddenDiv" or "body p". iframe : false, // If 'true' specifies that content should be displayed in an iFrame. href : false, // This can be used as an alternate anchor URL for ColorBox to use, or can be used to assign a URL for non-anchor elments such as images or form buttons. title : false, // This can be used as an alternate anchor title. bgOpacity : 0.85, // The modalBackgroundOverlay opacity level. Range: 0 to 1. preloading : true, // Allows for preloading of 'Next' and 'Previous' content in a shared relation group (same values for the 'rel' attribute), after the current content has finished loading. Set to 'false' to disable. contentCurrent : "image {current} of {total}", // the format of the contentCurrent information contentPrevious : "previous", // the anchor text for the previous link in a shared relation group (same values for 'rel'). contentNext : "next", // the anchor text for the next link in a shared relation group (same 'rel' attribute'). modalClose : "close", // the anchor text for the close link. Esc will also close the modal. open : false, //Automatically opens ColorBox. (fires the click.colorbox event without waiting for user input). overlayClose : true //If true, enables closing ColorBox by clicking on the background overlay. }; })(jQuery);