Changeset 4621


Ignore:
Timestamp:
Jan 4, 2010, 7:32:52 PM (11 years ago)
Author:
patdenice
Message:

[Plugin][Lightbox]
Update Colorbox to 1.3.5
Add grey2 theme.

Location:
extensions/lightbox
Files:
30 added
34 deleted
8 edited

Legend:

Unmodified
Added
Removed
  • extensions/lightbox

    • Property svn:ignore set to
      colorbox
  • extensions/lightbox/admin/admin.php

    r3609 r4621  
    5959{
    6060  if (is_dir($path . '/' . $node)
    61     and is_file($path . '/' . $node . '/theme.css'))
     61    and is_file($path . '/' . $node . '/colorbox.css'))
    6262  {
    6363    array_push($themes, $node);
  • extensions/lightbox/jquery.colorbox.js

    r3298 r4621  
    1 /*
    2         ColorBox v1.1.6 - a full featured, light-weight, customizable lightbox based on jQuery 1.3
    3         (c) 2009 Jack Moore - www.colorpowered.com - jack@colorpowered.com
    4         Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
    5 */
    6 
    7 /* Line 173 modified for Piwigo */
    8 
    9 (function($){
    10 var settings, loadedWidth, loadedHeight, interfaceHeight, interfaceWidth, index, related, loadingElement, $modal, modalWrap, $loadingOverlay, $overlay, $modalContent, $loaded, $close, $borderTopCenter, $borderMiddleLeft, $borderMiddleRight, $borderBottomCenter;
    11 function setModalOverlay(){
    12         $overlay.css({"position":"absolute", width:$(window).width(), height:$(window).height(), top:$(window).scrollTop(), left:$(window).scrollLeft()});
    13 }
    14 function keypressEvents(e){
    15         if(e.keyCode == 37){
    16                 e.preventDefault();
    17                 $(document).unbind('keydown', keypressEvents);
    18                 $("a#contentPrevious").click();
    19         } else if(e.keyCode == 39){
    20                 e.preventDefault();
    21                 $(document).unbind('keydown', keypressEvents);
    22                 $("a#contentNext").click();
     1// ColorBox v1.3.5 - a full featured, light-weight, customizable lightbox based on jQuery 1.3
     2// c) 2009 Jack Moore - www.colorpowered.com - jack@colorpowered.com
     3// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
     4
     5(function ($) {
     6        // Shortcuts (to increase compression)
     7        var colorbox = 'colorbox',
     8        hover = 'hover',
     9        TRUE = true,
     10        FALSE = false,
     11        cboxPublic,
     12        isIE = !$.support.opacity,
     13        isIE6 = isIE && !window.XMLHttpRequest,
     14
     15        // Event Strings (to increase compression)
     16        cbox_open = 'cbox_open',
     17        cbox_load = 'cbox_load',
     18        cbox_complete = 'cbox_complete',
     19        cbox_cleanup = 'cbox_cleanup',
     20        cbox_closed = 'cbox_closed',
     21        cbox_resize = 'resize.cbox_resize',
     22
     23        // Cached jQuery Object Variables
     24        $overlay,
     25        $cbox,
     26        $wrap,
     27        $content,
     28        $topBorder,
     29        $leftBorder,
     30        $rightBorder,
     31        $bottomBorder,
     32        $related,
     33        $window,
     34        $loaded,
     35        $loadingBay,
     36        $loadingOverlay,
     37        $loadingGraphic,
     38        $title,
     39        $current,
     40        $slideshow,
     41        $next,
     42        $prev,
     43        $close,
     44
     45        // Variables for cached values or use across multiple functions
     46        interfaceHeight,
     47        interfaceWidth,
     48        loadedHeight,
     49        loadedWidth,
     50        element,
     51        bookmark,
     52        index,
     53        settings,
     54        open,
     55        active,
     56       
     57        // ColorBox Default Settings.   
     58        // See http://colorpowered.com/colorbox for details.
     59        defaults = {
     60                transition: "elastic",
     61                speed: 350,
     62                width: FALSE,
     63                height: FALSE,
     64                innerWidth: FALSE,
     65                innerHeight: FALSE,
     66                initialWidth: "400",
     67                initialHeight: "400",
     68                maxWidth: FALSE,
     69                maxHeight: FALSE,
     70                scalePhotos: TRUE,
     71                scrolling: TRUE,
     72                inline: FALSE,
     73                html: FALSE,
     74                iframe: FALSE,
     75                photo: FALSE,
     76                href: FALSE,
     77                title: FALSE,
     78                rel: FALSE,
     79                opacity: 0.9,
     80                preloading: TRUE,
     81                current: "image {current} of {total}",
     82                previous: "previous",
     83                next: "next",
     84                close: "close",
     85                open: FALSE,
     86                overlayClose: TRUE,
     87               
     88                slideshow: FALSE,
     89                slideshowAuto: TRUE,
     90                slideshowSpeed: 2500,
     91                slideshowStart: "start slideshow",
     92                slideshowStop: "stop slideshow",
     93               
     94                onOpen: FALSE,
     95                onLoad: FALSE,
     96                onComplete: FALSE,
     97                onCleanup: FALSE,
     98                onClosed: FALSE
     99        };
     100       
     101        // ****************
     102        // HELPER FUNCTIONS
     103        // ****************
     104               
     105        // Convert % values to pixels
     106        function setSize(size, dimension) {
     107                dimension = dimension === 'x' ? $window.width() : $window.height();//document.documentElement.clientWidth : document.documentElement.clientHeight;
     108                return (typeof size === 'string') ? Math.round((size.match(/%/) ? (dimension / 100) * parseInt(size, 10) : parseInt(size, 10))) : size;
    23109        }
    24 }
    25 function clearLoading(){
    26         if($("#colorboxInlineTemp").length > 0){
    27                 $loaded.children().insertAfter("#colorboxInlineTemp");
     110
     111        // Checks an href to see if it is a photo.
     112        // There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.
     113        function isImage(url) {
     114                url = $.isFunction(url) ? url.call(element) : url;
     115                return settings.photo || url.match(/\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(\.*))?$/i);
    28116        }
    29         if(loadingElement){$(loadingElement).remove();}
    30 }
    31 
    32 // Convert % values to pixels
    33 function setSize(size, dimension){
    34         return (typeof size == 'string') ? (size.match(/%/) ? (dimension/100)*parseInt(size, 10) : parseInt(size, 10)) : size;
    35 }
    36 
    37 /*
    38   Initialize the modal: store common calculations, preload the interface graphics, append the html.
    39   This preps colorbox for a speedy open when clicked, and lightens the burdon on the browser by only
    40   having to run once, instead of each time colorbox is opened.
    41 */
    42 $(function(){//jQuery shortcut for $(document).ready(function(){});
    43         $("body").append(
    44                 $overlay = $('<div id="modalBackgroundOverlay" />').hide(),
    45                 $modal = $('<div id="colorbox" />').css("opacity", 0)
    46         );
    47 
    48         $('<div id="modalWrap" />').appendTo($modal).append(
    49                 $('<div><div id="borderTopLeft" /><div id="borderTopCenter" /><div id="borderTopRight" /></div>'),
    50                 $borderMiddleLeft = $('<div id="borderMiddleLeft" />'),
    51                 $modalContent = $('<div id="modalContent" />'),
    52                 $borderMiddleRight = $('<div id="borderMiddleRight" />'),
    53                 $('<div><div id="borderBottomLeft" /><div id="borderBottomCenter" /><div id="borderBottomRight" /></div>')
    54         );
    55         $modalContent.append(
    56                 //loaded is filled with temporary HTML to allow the CSS backgrounds for those elements to load before ColorBox is actually called.
    57                 $loaded = $('<div id="modalLoadedContent"><a id="contentNext" href="#"></a><a id="contentPrevious" href="#"></a><span id="contentCurrent"></span><span id="contentTitle"></span><div id="preloadPrevious"></div><div id="preloadNext"></div><div id="preloadClose"></div></div>'),
    58                 $loadingOverlay = $('<div id="modalLoadingOverlay" />'),
    59                 $close = $('<a id="modalClose" href="#"></a>')
    60         );
    61 
    62         $(document).bind("keydown.colorClose", function(e){
    63                 if (e.keyCode == 27) {
    64                         e.preventDefault();
    65                         $.fn.colorbox.close();
    66                 }
    67         });
    68 
    69         $close.click(function(event){
    70                 event.preventDefault();
    71                 $.fn.colorbox.close();
    72         });
    73 
    74         $borderTopCenter = $("#borderTopCenter");
    75         $borderBottomCenter = $("#borderBottomCenter");
    76 
    77         interfaceHeight = $borderTopCenter.height()+$borderBottomCenter.height()+$modalContent.outerHeight(true) - $modalContent.height();//Subtraction needed for IE6
    78         interfaceWidth = $borderMiddleLeft.width()+$borderMiddleRight.width()+$modalContent.outerWidth(true) - $modalContent.width();
    79 
    80         loadedHeight = $loaded.outerHeight(true);
    81         loadedWidth = $loaded.outerWidth(true);
    82 
    83         $loaded.empty();
    84         $modal.css({"padding-bottom":interfaceHeight,"padding-right":interfaceWidth}).hide();//the padding removes the need to do size conversions during the animation step.
    85 
    86         //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.
    87         $("#contentPrevious, #contentNext, #modalClose").live('mouseover', function(){$(this).addClass("hover");});
    88         $("#contentPrevious, #contentNext, #modalClose").live('mouseout', function(){$(this).removeClass("hover");});
    89 });
    90 
    91 $.fn.colorbox = function(settings, callback) {
    92 
    93         function modalPosition(mWidth, mHeight, speed, loadedCallback){
    94117       
    95                 var winHeight = document.documentElement.clientHeight;
    96                 var posTop = winHeight/2 - mHeight/2;
    97                 var posLeft = document.documentElement.clientWidth/2 - mWidth/2;
    98                 //keeps the box from expanding to an inaccessible area offscreen.
    99                 if(mHeight > winHeight){posTop -=(mHeight - winHeight);}
    100                 if(posTop < 0){posTop = 0;}
    101                 if(posLeft < 0){posLeft = 0;}
     118        // Assigns functions results to their respective settings.  This allows functions to be used to set ColorBox options.
     119        function process() {
     120                for (var i in settings) {
     121                        if ($.isFunction(settings[i]) && i.substring(0, 2) !== 'on') { // checks to make sure the function isn't one of the callbacks, they will be handled at the appropriate time.
     122                            settings[i] = settings[i].call(element);
     123                        }
     124                }
     125        }
     126
     127        function launch(elem) {
     128               
     129                element = elem;
     130               
     131                settings = $(element).data(colorbox);
     132               
     133                process(); // Convert functions to their returned values.
     134               
     135                var rel = settings.rel || element.rel;
     136               
     137                if (rel && rel !== 'nofollow') {
     138                        $related = $('.cboxElement').filter(function () {
     139                                var relRelated = $(this).data(colorbox).rel || this.rel;
     140                                return (relRelated === rel);
     141                        });
     142                        index = $related.index(element);
     143                       
     144                        // Check direct calls to ColorBox.
     145                        if (index < 0) {
     146                                $related = $related.add(element);
     147                                index = $related.length - 1;
     148                        }
     149                } else {
     150                        $related = $(element);
     151                        index = 0;
     152                }
     153               
     154                if (!open) {
     155                        open = TRUE;
     156                       
     157                        active = TRUE; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
     158                       
     159                        bookmark = element;
     160                       
     161                        bookmark.blur(); // Remove the focus from the calling element.
     162                       
     163                        // Set Navigation Key Bindings
     164                        $().bind("keydown.cbox_close", function (e) {
     165                                if (e.keyCode === 27) {
     166                                        e.preventDefault();
     167                                        cboxPublic.close();
     168                                }
     169                        }).bind("keydown.cbox_arrows", function (e) {
     170                                if ($related.length > 1) {
     171                                        if (e.keyCode === 37) {
     172                                                e.preventDefault();
     173                                                $prev.click();
     174                                        } else if (e.keyCode === 39) {
     175                                                e.preventDefault();
     176                                                $next.click();
     177                                        }
     178                                }
     179                        });
     180                       
     181                        if (settings.overlayClose) {
     182                                $overlay.css({"cursor": "pointer"}).one('click', cboxPublic.close);
     183                        }
     184                       
     185                        $.event.trigger(cbox_open);
     186                        if (settings.onOpen) {
     187                                settings.onOpen.call(element);
     188                        }
     189                       
     190                        $overlay.css({"opacity": settings.opacity}).show();
     191                       
     192                        // Opens inital empty ColorBox prior to content being loaded.
     193                        settings.w = setSize(settings.initialWidth, 'x');
     194                        settings.h = setSize(settings.initialHeight, 'y');
     195                        cboxPublic.position(0);
     196                       
     197                        if (isIE6) {
     198                                $window.bind('resize.cboxie6 scroll.cboxie6', function () {
     199                                        $overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()});
     200                                }).trigger("scroll.cboxie6");
     201                        }
     202                }
     203               
     204                $current.add($prev).add($next).add($slideshow).add($title).hide();
     205               
     206                $close.html(settings.close).show();
     207               
     208                cboxPublic.slideshow();
     209               
     210                cboxPublic.load();
     211        }
     212
     213        // ****************
     214        // PUBLIC FUNCTIONS
     215        // Usage format: $.fn.colorbox.close();
     216        // Usage from within an iframe: parent.$.fn.colorbox.close();
     217        // ****************
    102218       
    103                 posTop+=$(window).scrollTop();
    104                 posLeft+=$(window).scrollLeft();
    105        
    106                 mWidth = mWidth - interfaceWidth;
    107                 mHeight = mHeight - interfaceHeight;
    108 
    109                 function modalDimensions(that){
    110                         $modalContent[0].style.width = $borderTopCenter[0].style.width = $borderBottomCenter[0].style.width = that.style.width;
    111                         $modalContent[0].style.height = $borderMiddleLeft[0].style.height = $borderMiddleRight[0].style.height = that.style.height;
    112                 }
    113 
    114                 $modal.animate({height:mHeight, width:mWidth, top:posTop, left:posLeft}, {duration: speed,
     219        cboxPublic = $.fn.colorbox = function (options, callback) {
     220                var $this = this;
     221               
     222                if (!$this.length) {
     223                        if ($this.selector === '') { // empty selector means a direct call, ie: $.fn.colorbox();
     224                                $this = $($this);
     225                                options.open = TRUE;
     226                        } else { // else the selector didn't match anything, and colorbox should go ahead and return.
     227                                return this;
     228                        }
     229                }
     230               
     231                $this.each(function () {
     232                        var data = $.extend({}, $(this).data(colorbox) ? $(this).data(colorbox) : defaults, options);
     233                       
     234                        $(this).data(colorbox, data).addClass("cboxElement");
     235                       
     236                        if (callback) {
     237                                $(this).data(colorbox).onComplete = callback;
     238                        }
     239                });
     240               
     241                if (options && options.open) {
     242                        launch($this);
     243                }
     244               
     245                return this;
     246        };
     247
     248        // Initialize ColorBox: store common calculations, preload the interface graphics, append the html.
     249        // This preps colorbox for a speedy open when clicked, and lightens the burdon on the browser by only
     250        // having to run once, instead of each time colorbox is opened.
     251        cboxPublic.init = function () {
     252               
     253                // jQuery object generator to save a bit of space
     254                function $div(id) {
     255                        return $('<div id="cbox' + id + '"/>');
     256                }
     257               
     258                // Create & Append jQuery Objects
     259                $window = $(window);
     260                $cbox = $('<div id="colorbox"/>');
     261                $overlay = $div("Overlay").hide();
     262                $wrap = $div("Wrapper");
     263                $content = $div("Content").append(
     264                        $loaded = $div("LoadedContent").css({width: 0, height: 0}),
     265                        $loadingOverlay = $div("LoadingOverlay"),
     266                        $loadingGraphic = $div("LoadingGraphic"),
     267                        $title = $div("Title"),
     268                        $current = $div("Current"),
     269                        $slideshow = $div("Slideshow"),
     270                        $next = $div("Next"),
     271                        $prev = $div("Previous"),
     272                        $close = $div("Close")
     273                );
     274                $wrap.append( // The 3x3 Grid that makes up ColorBox
     275                        $('<div/>').append(
     276                                $div("TopLeft"),
     277                                $topBorder = $div("TopCenter"),
     278                                $div("TopRight")
     279                        ),
     280                        $('<div/>').append(
     281                                $leftBorder = $div("MiddleLeft"),
     282                                $content,
     283                                $rightBorder = $div("MiddleRight")
     284                        ),
     285                        $('<div/>').append(
     286                                $div("BottomLeft"),
     287                                $bottomBorder = $div("BottomCenter"),
     288                                $div("BottomRight")
     289                        )
     290                ).children().children().css({'float': 'left'});
     291               
     292                $loadingBay = $("<div style='position:absolute; top:0; left:0; width:9999px; height:0;'/>");
     293               
     294                $('body').prepend($overlay, $cbox.append($wrap, $loadingBay));
     295                               
     296                if (isIE) {
     297                        $cbox.addClass('cboxIE');
     298                        if (isIE6) {
     299                                $overlay.css('position', 'absolute');
     300                        }
     301                }
     302               
     303                // Add rollover event to navigation elements
     304                $content.children()
     305                .addClass(hover)
     306                .mouseover(function () { $(this).addClass(hover); })
     307                .mouseout(function () { $(this).removeClass(hover); });
     308               
     309                // Cache values needed for size calculations
     310                interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(TRUE) - $content.height();//Subtraction needed for IE6
     311                interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(TRUE) - $content.width();
     312                loadedHeight = $loaded.outerHeight(TRUE);
     313                loadedWidth = $loaded.outerWidth(TRUE);
     314               
     315                // Setting padding to remove the need to do size conversions during the animation step.
     316                $cbox.css({"padding-bottom": interfaceHeight, "padding-right": interfaceWidth}).hide();
     317               
     318                // Setup button & key events.
     319                $next.click(cboxPublic.next);
     320                $prev.click(cboxPublic.prev);
     321                $close.click(cboxPublic.close);
     322               
     323                // Adding the 'hover' class allowed the browser to load the hover-state
     324                // background graphics.  The class can now can be removed.
     325                $content.children().removeClass(hover);
     326               
     327                $('.cboxElement').live('click', function (e) {
     328                        if (e.button !== 0 && typeof e.button !== 'undefined') {// checks to see if it was a non-left mouse-click.
     329                                return TRUE;
     330                        } else {
     331                                launch(this);                   
     332                                return FALSE;
     333                        }
     334                });
     335        };
     336
     337        cboxPublic.position = function (speed, loadedCallback) {
     338                var
     339                animate_speed,
     340                winHeight = $window.height(),
     341                // keeps the top and left positions within the browser's viewport.
     342                posTop = Math.max(winHeight - settings.h - loadedHeight - interfaceHeight,0)/2 + $window.scrollTop(),
     343                posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft();
     344               
     345                // setting the speed to 0 to reduce the delay between same-sized content.
     346                animate_speed = ($cbox.width() === settings.w+loadedWidth && $cbox.height() === settings.h+loadedHeight) ? 0 : speed;
     347               
     348                // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
     349                // but it has to be shrank down around the size of div#colorbox when it's done.  If not,
     350                // it can invoke an obscure IE bug when using iframes.
     351                $wrap[0].style.width = $wrap[0].style.height = "9999px";
     352               
     353                function modalDimensions (that) {
     354                        // loading overlay size has to be sure that IE6 uses the correct height.
     355                        $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width;
     356                        $loadingGraphic[0].style.height = $loadingOverlay[0].style.height = $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height;
     357                }
     358               
     359                $cbox.dequeue().animate({width:settings.w+loadedWidth, height:settings.h+loadedHeight, top:posTop, left:posLeft}, {duration: animate_speed,
    115360                        complete: function(){
     361                                modalDimensions(this);
     362                               
     363                                active = FALSE;
     364                               
     365                                // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
     366                                $wrap[0].style.width = (settings.w+loadedWidth+interfaceWidth) + "px";
     367                                $wrap[0].style.height = (settings.h+loadedHeight+interfaceHeight) + "px";
     368                               
    116369                                if (loadedCallback) {loadedCallback();}
    117                                 modalDimensions(this);
    118                                 if ($.browser.msie && $.browser.version < 7) {setModalOverlay();}
    119370                        },
    120371                        step: function(){
    121                                 modalDimensions(this);         
     372                                modalDimensions(this);
    122373                        }
    123374                });
    124         }
    125         var preloads = [];
    126         function preload(){
    127                 if(settings.preloading !== false && related.length>1 && related[index].href.match(/\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(.*))?$/i)){
    128                         var previous, next;
    129                         previous = index > 0 ? related[index-1].href : related[related.length-1].href;
    130                         next = index < related.length-1 ? related[index+1].href : related[0].href;
    131                         return [$("<img />").attr("src", next), $("<img />").attr("src", previous)];
    132                 }
    133                 return false;
    134         }
     375        };
     376
     377        cboxPublic.resize = function (object) {
     378                if(!open){ return; }
     379               
     380                var topMargin,
     381                prev,
     382                prevSrc,
     383                next,
     384                nextSrc,
     385                photo,
     386                timeout,
     387                speed = settings.transition==="none" ? 0 : settings.speed;
     388               
     389                $window.unbind(cbox_resize);
     390               
     391                if(!object){
     392                        timeout = setTimeout(function(){ // timer allows IE to render the dimensions before attempting to calculate the height
     393                                var $child = $loaded.wrapInner("<div style='overflow:auto'></div>").children(); // temporary wrapper to get an accurate estimate of just how high the total content should be.
     394                                settings.h = $child.height();
     395                                $loaded.css({height:settings.h});
     396                                $child.replaceWith($child.children()); // ditch the temporary wrapper div used in height calculation
     397                                cboxPublic.position(speed);
     398                        }, 1);
     399                        return;
     400                }
     401               
     402                $loaded.remove();
     403                $loaded = $('<div id="cboxLoadedContent"/>').html(object);
     404               
     405                function getWidth(){
     406                        settings.w = settings.w || $loaded.width();
     407                        settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
     408                        return settings.w;
     409                }
     410                function getHeight(){
     411                        settings.h = settings.h || $loaded.height();
     412                        settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
     413                        return settings.h;
     414                }
     415               
     416                $loaded.hide()
     417                .appendTo($loadingBay)// content has to be appended to the DOM for accurate size calculations.  Appended to an absolutely positioned element, rather than BODY, which avoids an extremely brief display of the vertical scrollbar in Firefox that can occur for a small minority of websites.
     418                .css({width:getWidth(), overflow:settings.scrolling ? 'auto' : 'hidden'})
     419                .css({height:getHeight()})// sets the height independently from the width in case the new width influences the value of height.
     420                .prependTo($content);
     421               
     422                $('#cboxPhoto').css({cssFloat:'none'});// floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width.
     423               
     424                // Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay.
     425                if (isIE6) {
     426                        $('select:not(#colorbox select)').filter(function(){
     427                                return this.style.visibility !== 'hidden';
     428                        }).css({'visibility':'hidden'}).one(cbox_cleanup, function(){
     429                                this.style.visibility = 'inherit';
     430                        });
     431                }
     432                               
     433                function setPosition (s) {
     434                        cboxPublic.position(s, function(){
     435                                if (!open) { return; }
     436                               
     437                                if (isIE) {
     438                                        //This fadeIn helps the bicubic resampling to kick-in.
     439                                        if( photo ){$loaded.fadeIn(100);}
     440                                        //IE adds a filter when ColorBox fades in and out that can cause problems if the loaded content contains transparent pngs.
     441                                        $cbox[0].style.removeAttribute("filter");
     442                                }
     443                               
     444                                //Waited until the iframe is added to the DOM & it is visible before setting the src.
     445                                //This increases compatability with pages using DOM dependent JavaScript.
     446                                if(settings.iframe){
     447                                        $loaded.append("<iframe id='cboxIframe'" + (settings.scrolling ? " " : "scrolling='no'") + " name='iframe_"+new Date().getTime()+"' frameborder=0 src='"+(settings.href || element.href)+"' " + (isIE ? "allowtransparency='true'" : '') + " />");
     448                                }
     449                               
     450                                $loaded.show();
     451                               
     452                                $title.html(settings.title || element.title);
     453                               
     454                                $title.show();
     455                               
     456                                if ($related.length>1) {
     457                                        $current.html(settings.current.replace(/\{current\}/, index+1).replace(/\{total\}/, $related.length)).show();
     458                                        $next.html(settings.next).show();
     459                                        $prev.html(settings.previous).show();
     460                                       
     461                                        if(settings.slideshow){
     462                                                $slideshow.show();
     463                                        }
     464                                }
     465                               
     466                                $loadingOverlay.hide();
     467                                $loadingGraphic.hide();
     468                               
     469                                $.event.trigger(cbox_complete);
     470                                if (settings.onComplete) {
     471                                        settings.onComplete.call(element);
     472                                }
     473                               
     474                                if (settings.transition === 'fade'){
     475                                        $cbox.fadeTo(speed, 1, function(){
     476                                                if(isIE){$cbox[0].style.removeAttribute("filter");}
     477                                        });
     478                                }
     479                               
     480                                $window.bind(cbox_resize, function(){
     481                                        cboxPublic.position(0);
     482                                });
     483                        });
     484                }
     485               
     486                if((settings.transition === 'fade' && $cbox.fadeTo(speed, 0, function(){setPosition(0);})) || setPosition(speed)){}
     487               
     488                // Preloads images within a rel group
     489                if (settings.preloading && $related.length>1) {
     490                        prev = index > 0 ? $related[index-1] : $related[$related.length-1];
     491                        next = index < $related.length-1 ? $related[index+1] : $related[0];
     492                        nextSrc = $(next).data(colorbox).href || next.href;
     493                        prevSrc = $(prev).data(colorbox).href || prev.href;
     494                       
     495                        if(isImage(nextSrc)){
     496                                $('<img />').attr('src', nextSrc);
     497                        }
     498                       
     499                        if(isImage(prevSrc)){
     500                                $('<img />').attr('src', prevSrc);
     501                        }
     502                }
     503        };
     504
     505        cboxPublic.load = function () {
     506                var href, img, setResize, resize = cboxPublic.resize;
     507               
     508                active = TRUE;
     509               
     510                /*
     511                 
     512                // I decided to comment this out because I can see it causing problems as users
     513                // really should just set the dimensions on their IMG elements instead,
     514                // but I'm leaving the code in as it may be useful to someone.
     515                // To use, uncomment the function and change 'if(textStatus === "success"){ resize(this); }'
     516                // to 'if(textStatus === "success"){ preload(this); }'
     517               
     518                // Preload loops through the HTML to find IMG elements and loads their sources.
     519                // This allows the resize method to accurately estimate the dimensions of the new content.
     520                function preload(html){
     521                        var
     522                        $ajax = $(html),
     523                        $imgs = $ajax.find('img'),
     524                        x = $imgs.length;
     525                       
     526                        function loadloop(){
     527                                var img = new Image();
     528                                x = x-1;
     529                                if(x >= 0){
     530                                        img.onload = loadloop;
     531                                        img.src = $imgs[x].src;
     532                                } else {
     533                                        resize($ajax);
     534                                }
     535                        }
     536                       
     537                        loadloop();
     538                }
     539                */
     540               
     541                element = $related[index];
     542               
     543                settings = $(element).data(colorbox);
     544               
     545                //convert functions to static values
     546                process();
     547               
     548                $.event.trigger(cbox_load);
     549                if (settings.onLoad) {
     550                        settings.onLoad.call(element);
     551                }
     552               
     553                // Evaluate the height based on the optional height and width settings.
     554                settings.h = settings.height ?
     555                                setSize(settings.height, 'y') - loadedHeight - interfaceHeight :
     556                                settings.innerHeight ?
     557                                        setSize(settings.innerHeight, 'y') :
     558                                        FALSE;
     559                settings.w = settings.width ?
     560                                setSize(settings.width, 'x') - loadedWidth - interfaceWidth :
     561                                settings.innerWidth ?
     562                                        setSize(settings.innerWidth, 'x') :
     563                                        FALSE;
     564               
     565                // Sets the minimum dimensions for use in image scaling
     566                settings.mw = settings.w;
     567                settings.mh = settings.h;
     568               
     569                // Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
     570                // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
     571                if(settings.maxWidth){
     572                        settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth;
     573                        settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
     574                }
     575                if(settings.maxHeight){
     576                        settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight;
     577                        settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
     578                }
     579               
     580                href = settings.href || $(element).attr("href");
     581               
     582                $loadingOverlay.show();
     583                $loadingGraphic.show();
     584               
     585                if (settings.inline) {
     586                        // Inserts an empty placeholder where inline content is being pulled from.
     587                        // An event is bound to put inline content back when ColorBox closes or loads new content.
     588                        $('<div id="cboxInlineTemp" />').hide().insertBefore($(href)[0]).bind(cbox_load+' '+cbox_cleanup, function(){
     589                                $(this).replaceWith($loaded.children());
     590                        });
     591                        resize($(href));
     592                } else if (settings.iframe) {
     593                        // IFrame element won't be added to the DOM until it is ready to be displayed,
     594                        // to avoid problems with DOM-ready JS that might be trying to run in that iframe.
     595                        resize(" ");
     596                } else if (settings.html) {
     597                        resize(settings.html);
     598                } else if (isImage(href)){
     599                        img = new Image();
     600                        img.onload = function(){
     601                                var percent;
     602                               
     603                                img.onload = null;
     604                               
     605                                img.id = 'cboxPhoto';
     606                               
     607                                $(img).css({margin:'auto', border:'none', display:'block', cssFloat:'left'});
     608                               
     609                                if(settings.scalePhotos){
     610                                        setResize = function(){
     611                                                img.height -= img.height * percent;
     612                                                img.width -= img.width * percent;       
     613                                        };
     614                                        if(settings.mw && img.width > settings.mw){
     615                                                percent = (img.width - settings.mw) / img.width;
     616                                                setResize();
     617                                        }
     618                                        if(settings.mh && img.height > settings.mh){
     619                                                percent = (img.height - settings.mh) / img.height;
     620                                                setResize();
     621                                        }
     622                                }
     623                               
     624                                if (settings.h) {
     625                                        img.style.marginTop = Math.max(settings.h - img.height,0)/2 + 'px';
     626                                }
     627                               
     628                                resize(img);
     629                               
     630                                if($related.length > 1){
     631                                        $(img).css({cursor:'pointer'}).click(cboxPublic.next);
     632                                }
     633                               
     634                                if(isIE){
     635                                        img.style.msInterpolationMode='bicubic';
     636                                }
     637                        };
     638                        img.src = href;
     639                } else {
     640                        $('<div />').appendTo($loadingBay).load(href, function(data, textStatus){
     641                                if(textStatus === "success"){
     642                                        resize(this);
     643                                } else {
     644                                        resize($("<p>Request unsuccessful.</p>"));
     645                                }
     646                        });
     647                }
     648        };
     649
     650        // Navigates to the next page/image in a set.
     651        cboxPublic.next = function () {
     652                if(!active){
     653                        index = index < $related.length-1 ? index+1 : 0;
     654                        cboxPublic.load();
     655                }
     656        };
    135657       
    136         function contentNav(){
    137                 $loadingOverlay.show();
    138                 if($(this).attr("id") == "contentPrevious"){
    139                         index = index > 0 ? index-1 : related.length-1;
    140                 } else {
    141                         index = index < related.length-1 ? index+1 : 0;
    142                 }
    143                 loadModal(related[index].href, related[index].title);
    144                 return false;
    145         }
    146        
    147         function centerModal (object, contentInfo){
    148                 if($modal.data("open")!==true){ return false; }
    149 
    150                 var speed = settings.transition=="none" ? 0 : settings.transitionSpeed;
    151                 $loaded.remove();
    152                 $loaded = $(object);
    153        
    154                 $loaded.hide()
    155                 .appendTo('body')
    156                 .css({width:(settings.fixedWidth)?settings.fixedWidth - loadedWidth - interfaceWidth:$loaded.width()}).css({height:(settings.fixedHeight)?settings.fixedHeight - loadedHeight - interfaceHeight:$loaded.height()})
    157                 .attr({id:"modalLoadedContent"})
    158                 .append(contentInfo)
    159                 .prependTo($modalContent);
    160 
    161                 if($("#modalPhoto").length > 0 && settings.fixedHeight){
    162                         var topMargin = (parseInt($loaded[0].style.height, 10) - parseInt($("#modalPhoto")[0].style.height, 10))/2;
    163                         $("#modalPhoto").css({marginTop:(topMargin > 0?topMargin:0)});
    164                 }
    165        
    166                 function setPosition(s){
    167                         modalPosition(parseInt($loaded[0].style.width, 10)+loadedWidth+interfaceWidth, parseInt($loaded[0].style.height, 10)+loadedHeight+interfaceHeight, s, function(){
    168                                 if($modal.data("open")!==true){
    169                                         return false;
    170                                 }
    171                                 $loaded.show();
    172                                 $loadingOverlay.hide();
    173                                 $(document).bind('keydown', keypressEvents);
    174                                 if (callback) {
    175                                         callback(related[index]); /* ----- PIWIGO MODIFICATION ----- */
    176                                 }
    177                                 if (settings.transition === "fade"){
    178                                         $modal.animate({"opacity":1}, speed);
    179                                 }
    180                                 return true;
     658        cboxPublic.prev = function () {
     659                if(!active){
     660                        index = index > 0 ? index-1 : $related.length-1;
     661                        cboxPublic.load();
     662                }
     663        };
     664
     665        cboxPublic.slideshow = function () {
     666                var stop, timeOut, className = 'cboxSlideshow_';
     667               
     668                $slideshow.bind(cbox_closed, function(){
     669                        $slideshow.unbind();
     670                        clearTimeout(timeOut);
     671                        $cbox.removeClass(className+"off"+" "+className+"on");
     672                });
     673               
     674                function start(){
     675                        $slideshow
     676                        .text(settings.slideshowStop)
     677                        .bind(cbox_complete, function(){
     678                                timeOut = setTimeout(cboxPublic.next, settings.slideshowSpeed);
     679                        })
     680                        .bind(cbox_load, function(){
     681                                clearTimeout(timeOut); 
     682                        }).one("click", function(){
     683                                stop();
     684                                $(this).removeClass(hover);
    181685                        });
    182                 }
    183                 if (settings.transition == "fade") {
    184                         $modal.animate({"opacity":0}, speed, function(){setPosition(0);});
    185                 } else {
    186                         setPosition(speed);
    187                 }
    188                 var preloads = preload();
    189                 return true;
    190         }
    191        
    192         function loadModal(href, title){
    193                 clearLoading();
    194                 var contentInfo = "<p id='contentTitle'>"+title+"</p>";
    195                 if(related.length>1){
    196                         contentInfo += "<span id='contentCurrent'> " + settings.contentCurrent + "</span>";
    197                         contentInfo = contentInfo.replace(/\{current\}/, index+1).replace(/\{total\}/, related.length);
    198                         contentInfo += "<a id='contentPrevious' href='#'>"+settings.contentPrevious+"</a><a id='contentNext' href='#'>"+settings.contentNext+"</a> ";
    199                 }
    200                 if (settings.inline) {
    201                         loadingElement = $('<div id="colorboxInlineTemp" />').hide().insertBefore($(href)[0]);
    202                         centerModal($(href).wrapAll("<div />").parent(), contentInfo);
    203                 } else if (settings.iframe) {
    204                         centerModal($("<div><iframe name='iframe_"+new Date().getTime()+" 'frameborder=0 src =" + href + "></iframe></div>"), contentInfo);//timestamp to prevent caching.
    205                 } else if (href.match(/\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(.*))?$/i)){
    206                         loadingElement = new Image();
    207                         loadingElement.onload = function(){
    208                                 loadingElement.onload = null;
    209                                 centerModal($("<div />").css({width:this.width, height:this.height}).append($(this).css({width:this.width, height:this.height, display:"block", margin:"auto"}).attr('id', 'modalPhoto')), contentInfo);
    210                                 if(related.length > 1){
    211                                         $(this).css({cursor:'pointer'}).click(contentNav);
    212                                 }
    213                         };
    214                         loadingElement.src = href;
    215                 }else {
    216                         loadingElement = $('<div />').load(href, function(data, textStatus){
    217                                 if(textStatus == "success"){
    218                                         centerModal($(this), contentInfo);
    219                                 } else {
    220                                         centerModal($("<p>Request unsuccessful.</p>"));
    221                                 }
     686                        $cbox.removeClass(className+"off").addClass(className+"on");
     687                }
     688               
     689                stop = function(){
     690                        clearTimeout(timeOut);
     691                        $slideshow
     692                        .text(settings.slideshowStart)
     693                        .unbind(cbox_complete+' '+cbox_load)
     694                        .one("click", function(){
     695                                start();
     696                                timeOut = setTimeout(cboxPublic.next, settings.slideshowSpeed);
     697                                $(this).removeClass(hover);
    222698                        });
    223                 }
    224         }
    225 
    226         settings = $.extend({}, $.fn.colorbox.settings, settings);
    227        
    228         $(this).unbind("click.colorbox").bind("click.colorbox", function () {
    229                 if(settings.fixedWidth){ settings.fixedWidth = setSize(settings.fixedWidth, document.documentElement.clientWidth);}
    230                 if(settings.fixedHeight){ settings.fixedHeight = setSize(settings.fixedHeight, document.documentElement.clientHeight);}
    231                 if (this.rel && 'nofollow' != this.rel) {
    232                         related = $("a[rel='" + this.rel + "']");
    233                         index = $(related).index(this);
    234                 }
    235                 else {
    236                         related = $(this);
    237                         index = 0;
    238                 }
    239 
    240                 if ($modal.data("open") !== true) {
    241                         $(document).bind('keydown', keypressEvents);
    242                         $close.html(settings.modalClose);
    243                         $overlay.css({"opacity": settings.bgOpacity}).show();
    244                         $modal.data("open", true).css({"opacity":1});
    245 
    246                         modalPosition(setSize(settings.initialWidth, document.documentElement.clientWidth), setSize(settings.initialHeight, document.documentElement.clientHeight), 0);
    247 
    248                         if ($.browser.msie && $.browser.version < 7) {
    249                                 $(window).bind("resize scroll", setModalOverlay);
    250                         }
    251                 }
    252 
    253                 loadModal(settings.href ? settings.href : related[index].href, settings.title ? settings.title : related[index].title);
    254                 $("a#contentPrevious, a#contentNext").die().live("click", contentNav);
    255 
    256                 if(settings.overlayClose!==false){
    257                         $overlay.css({"cursor":"pointer"}).click(function(){$.fn.colorbox.close();});
    258                 }
    259                 return false;
    260         });
    261 
    262         if(settings.open!==false && $modal.data("open")!==true){
    263                 $(this).triggerHandler('click.colorbox');
    264         }
    265 
    266         return this.each(function() {
    267         });
    268 };
    269 
    270 //public function for closing colorbox.  To use this within an iframe use the following format: parent.$.fn.colorbox.close();
    271 $.fn.colorbox.close = function(){
    272 
    273         $('#contentTitle').remove();
    274         clearLoading();
    275         $overlay.css({cursor:"auto"}).fadeOut("fast");
    276         $modal.stop(true, false).removeData("open").fadeOut("fast", function(){
    277                 $loaded.remove();
    278         });
    279         $(document).unbind('keydown', keypressEvents);
    280         $(window).unbind('resize scroll', setModalOverlay);
    281         return false;
    282 };
    283 
    284 /*
    285         ColorBox Default Settings.
    286        
    287         The colorbox() function takes one argument, an object of key/value pairs, that are used to initialize the modal.
    288        
    289         Please do not change these settings here, instead overwrite these settings when attaching the colorbox() event to your anchors.
    290         Example (Global)        : $.fn.colorbox.settings.transition = "fade"; //changes the transition to fade for all colorBox() events proceeding it's declaration.
    291         Example (Specific)      : $("a[href='http://www.google.com']").colorbox({fixedWidth:"90%", fixedHeight:"450px", iframe:true});
    292 */
    293 $.fn.colorbox.settings = {
    294         transition : "elastic", // Transition types: "elastic", "fade", or "none".
    295         transitionSpeed : 350, // Sets the speed of the fade and elastic transitions, in milliseconds.
    296         initialWidth : "400", // Set the initial width of the modal, prior to any content being loaded.
    297         initialHeight : "400", // Set the initial height of the modal, prior to any content being loaded.
    298         fixedWidth : false, // Set a fixed width for div#loaded.  Example: "500px"
    299         fixedHeight : false, // Set a fixed height for div#modalLoadedContent.  Example: "500px"
    300         inline : false, // Set this to the selector of inline content to be displayed.  Example "#myHiddenDiv" or "body p".
    301         iframe : false, // If 'true' specifies that content should be displayed in an iFrame.
    302         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.
    303         title : false, // This can be used as an alternate anchor title.
    304         bgOpacity : 0.85, // The modalBackgroundOverlay opacity level. Range: 0 to 1.
    305         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.
    306         contentCurrent : "image {current} of {total}", // the format of the contentCurrent information
    307         contentPrevious : "previous", // the anchor text for the previous link in a shared relation group (same values for 'rel').
    308         contentNext : "next", // the anchor text for the next link in a shared relation group (same 'rel' attribute').
    309         modalClose : "close", // the anchor text for the close link.  Esc will also close the modal.
    310         open : false, //Automatically opens ColorBox. (fires the click.colorbox event without waiting for user input).
    311         overlayClose : true  //If true, enables closing ColorBox by clicking on the background overlay.
    312 };
    313 
    314 })(jQuery);
    315 
     699                        $cbox.removeClass(className+"on").addClass(className+"off");
     700                };
     701               
     702                if(settings.slideshow && $related.length>1){
     703                        if(settings.slideshowAuto){
     704                                start();
     705                        } else {
     706                                stop();
     707                        }
     708                }
     709        };
     710
     711        // Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close();
     712        cboxPublic.close = function () {
     713               
     714                $.event.trigger(cbox_cleanup);
     715                if (settings.onCleanup) {
     716                        settings.onCleanup.call(element);
     717                }
     718               
     719                open = FALSE;
     720                $().unbind("keydown.cbox_close keydown.cbox_arrows");
     721                $window.unbind(cbox_resize+' resize.cboxie6 scroll.cboxie6');
     722                $overlay.css({cursor: 'auto'}).fadeOut('fast');
     723               
     724                $cbox
     725                .stop(TRUE, FALSE)
     726                .fadeOut('fast', function () {
     727                        $loaded.remove();
     728                        $cbox.css({'opacity': 1});
     729                       
     730                        try{
     731                                bookmark.focus();
     732                        } catch (er){
     733                                // do nothing
     734                        }
     735                       
     736                        $.event.trigger(cbox_closed);
     737                        if (settings.onClosed) {
     738                                settings.onClosed.call(element);
     739                        }
     740                });
     741        };
     742
     743        // A method for fetching the current element ColorBox is referencing.
     744        // returns a jQuery object.
     745        cboxPublic.element = function(){ return $(element); };
     746
     747        cboxPublic.settings = defaults;
     748
     749        // Initializes ColorBox when the DOM has loaded
     750        $(cboxPublic.init);
     751
     752}(jQuery));
  • extensions/lightbox/lightbox.php

    r3298 r4621  
    1010$template->func_known_script(array('id'=>'colorbox', 'src'=>get_root_url().'plugins/lightbox/jquery.colorbox.js'), $smarty);
    1111$template->block_html_head('', '
    12 <link rel="stylesheet" href="'.get_root_url().'plugins/lightbox/colorbox.css" type="text/css" media="screen">
    13 <link rel="stylesheet" href="'.get_root_url().'plugins/lightbox/theme/'.$params['theme'].'/theme.css" type="text/css" media="screen">
    14 <!--[if IE]>
    15   <link type="text/css" media="screen" rel="stylesheet" href="'.get_root_url().'plugins/lightbox/theme/'.$params['theme'].'/theme-ie.css" title="example" />
    16 <![endif]-->
     12<link rel="stylesheet" href="'.get_root_url().'plugins/lightbox/theme/'.$params['theme'].'/colorbox.css" type="text/css" media="screen">
    1713<script type="text/javascript">
    1814$(document).ready(function(){
     
    2117});
    2218$(".thumbnails a").colorbox({
    23   contentCurrent: "",
     19  current: "",
    2420  transition: "'.$params['transition'].'",
    25   transitionSpeed: "'.$params['transition_speed'].'",
     21  speed: "'.$params['transition_speed'].'",
    2622  initialWidth: "'.(!empty($params['initial_width']) ? $params['initial_width'] : $config_default['initial_width']).'",
    2723  initialHeight: "'.(!empty($params['initial_height']) ? $params['initial_height'] : $config_default['initial_height']).'",
    28   fixedWidth: '.(!empty($params['fixed_width']) ? '"'.$params['fixed_width'].'"' : 'false').',
    29   fixedHeight: '.(!empty($params['fixed_height']) ? '"'.$params['fixed_height'].'"' : 'false').'
     24  width: '.(!empty($params['fixed_width']) ? '"'.$params['fixed_width'].'"' : 'false').',
     25  height: '.(!empty($params['fixed_height']) ? '"'.$params['fixed_height'].'"' : 'false').'
    3026  },
    31   function(img) {
     27  function() {
    3228    $.post("'.get_root_url().'plugins/lightbox/save_history.php", {
    33       imgid:   img.id,
     29      imgid:   this.id,
    3430      catid:   "'.@$page['category']['id'].'",
    3531      section: "'.@$page['section'].'",
  • extensions/lightbox/main.inc.php

    r3298 r4621  
    22/*
    33Plugin Name: Lightbox
    4 Version: 2.0.c
     4Version: auto
    55Description: Display pictures in a lightbox.
    66Plugin URI: http://fr.piwigo.org/ext/extension_view.php?eid=280
  • extensions/lightbox/theme

    • Property svn:ignore set to
      clear2
Note: See TracChangeset for help on using the changeset viewer.