Ignore:
Timestamp:
Jan 8, 2011, 5:34:17 PM (13 years ago)
Author:
grum
Message:

Release 1.4.0
Rewrite some JS
fix bug bug:1983

File:
1 edited

Legend:

Unmodified
Added
Removed

  • extensions/gally/gally-default/js/gallyjs-tpp.js

    r7337 r8528  
    44  ------------------------------------------------------------------------------
    55  file: gally/gallyjs-tpp.js
    6   file release: 1.3.4
     6  file release: 1.4.0
    77  ------------------------------------------------------------------------------
    8   author: grum at grum.dnsalias.com
     8  author: grum at piwigo.org
    99  << May the Little SpaceFrog be with you >>
    1010  ------------------------------------------------------------------------------
    … …  
    1616----------------------------------------------------------------------------- */
    1717
    18 
    19 var showtabs;
    20 var selectedTab;
    21 var interfaceTimerDelay;
    22 var isScrollable;
    23 var zoomMode;
    24 
    25 $("document").ready(
     18var gallyPP=null;
     19
     20$(document).ready(
    2621  function()
    2722  {
    28     inittoolbar();
     23    gallyPP=new GallyPP();
    2924  }
    3025);
    3126
    32 function inittoolbar()
    33 {
    34   $(document).data("initialized", 0);
    35   $(document).data("interface", false);
    36   $(document).data("highWidth", 0);
    37   $(document).data("highHeight", 0);
    38 
    39   regexp = /[1234567]\./i;
    40 
    41   if(jQuery.browser.msie && jQuery.browser.version.match(regexp))
    42   {
    43     // this features don't work with the f*****g msie browser version <= 7.0
    44     // it seems to be functionnal with ie 8.0
    45     options.interfaceAnimated="none";
    46     options.imageAutoScroll=false;
    47   }
    48 
    49   if(options.imageAutoScroll)
    50   {
    51     $("html").css("overflow-x", "hidden");
    52   }
    53   else
    54   {
    55     $("html").css("overflow-x", "scroll");
    56   }
    57 
    58   if(options.imageCenterTopBorder == "imageHeaderBar")
    59   {
    60     options.imageCenterTopMin+=$("#imageHeaderBar").get(0).offsetTop+$("#imageHeaderBar").get(0).offsetHeight;
    61   }
    62 
    63   if(!options.interfaceCanSwitch)
    64   {
    65     options.interfaceHidden=false;
    66   }
    67 
    68   zoomMode=options.defaultZoomSize;
    69   currentTab=-1;
    70   selectedTab=-1;
    71   interfaceTimerDelay = null;
    72   switchInterface('0', true);
    73   initializeImageMode("init");
    74 
    75 
    76   if((options.interfaceOnImage=="always" || (options.interfaceOnImage=="noscroll" && !isScrollable)) && options.interfaceCanSwitch)
    77   {
    78     $("#theImg").bind("mouseenter", function () { switchInterface('y', true); } )
    79                 .bind("mouseleave", function () { switchInterface('n', true); } )
    80                 .bind("mousemove", function () { switchInterface('y', true); } );
    81   }
    82 
    83   if(options.interfaceCanSwitch)
    84   {
    85     $("#imageHeaderBar").bind("mouseenter", function () { switchInterface('y', false); } )
    86                         .bind("mousemove", function () { switchInterface('y', false); } );
    87     $("#imageToolBar").bind("mouseenter", function () { switchInterface('y', true); } )
    88                       .bind("mouseleave", function () { switchInterface('n', true); } )
    89                       .bind("mousemove", function () { switchInterface('y', true); } );
    90 
    91 
    92     $("#navThumbPrev").bind("mouseenter", function () { switchInterface('Y', true); } )
    93                       .bind("mouseleave", function () { switchInterface('n', true); } )
    94                       .bind("mousemove", function () { switchInterface('y', true); } );
    95 
    96     $("#navThumbNext").bind("mouseenter", function () { switchInterface('Y', true); } )
    97                       .bind("mouseleave", function () { switchInterface('n', true); } )
    98                       .bind("mousemove", function () { switchInterface('y', true); } );
    99   }
    100 
    101 
    102   $("#navThumbPrev").css("top", $("#navThumbPrev").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");
    103   $("#navThumbNext").css("top", $("#navThumbNext").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");
    104 
    105   $("#theImage").css("top", $("#theImage").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");
    106 
    107   $("#contentid").attr("rows", options.commentRows);
    108 
    109   /* fx duration option set to 0 doesn't work so... */
    110   if(options.animateDelay>0)
    111   {
    112     $("#theTabs").tabs({ fx: { opacity: 'toggle', duration:options.animateDelay } } );
    113   }
    114   else
    115   {
    116     $("#theTabs").tabs();
    117   }
    118   switchTabs('n');
    119 
    120 
    121   if(options.interfaceCanSwitch)
    122   {
    123     $('#theTabsContainer').bind("mouseenter", function () { switchInterface('Y', false); } )
    124                           .bind("mouseleave", function () { switchInterface('n'); } )
     27function GallyPP () {
     28  var tabs={
     29        show:'n',
     30        current:-1,
     31        selected:-1
     32      },
     33      interface={
     34        visible:false,
     35        initialized:0,
     36        timerDelay:null
     37      },
     38      image={
     39        isScrollable:false,
     40        highWidth:0,
     41        highHeight:0,
     42        leftPos:0,
     43        zoomMode:''
     44      },
     45      container=null,
     46
     47  /**
     48   * initialize the object
     49   */
     50  init = function()
     51  {
     52    regexp = /[1234567]\./i;
     53
     54    if(jQuery.browser.msie && jQuery.browser.version.match(regexp))
     55    {
     56      // this features don't work with the f*****g msie browser version <= 7.0
     57      // it seems to be functionnal with ie 8.0
     58      options.interfaceAnimated="none";
     59      options.imageAutoScroll=false;
     60    }
     61
     62    if(options.imageAutoScroll)
     63    {
     64      $("html").css("overflow-x", "hidden");
     65    }
     66    else
     67    {
     68      $("html").css("overflow-x", "scroll");
     69    }
     70
     71    if(options.imageCenterTopBorder == "imageHeaderBar")
     72    {
     73      options.imageCenterTopMin+=$("#imageHeaderBar").get(0).offsetTop+$("#imageHeaderBar").get(0).offsetHeight;
     74    }
     75
     76    if(!options.interfaceCanSwitch)
     77    {
     78      options.interfaceHidden=false;
     79    }
     80
     81    image.zoomMode=options.defaultZoomSize;
     82
     83    switchInterface('0', true);
     84    initializeImageMode("init");
     85
     86
     87    if((options.interfaceOnImage=="always" || (options.interfaceOnImage=="noscroll" && !image.isScrollable)) && options.interfaceCanSwitch)
     88    {
     89      $("#theImg").bind("mouseenter", function () { switchInterface('y', true); } )
     90                  .bind("mouseleave", function () { switchInterface('n', true); } )
     91                  .bind("mousemove", function () { switchInterface('y', true); } );
     92    }
     93
     94    if(options.interfaceCanSwitch)
     95    {
     96      $("#imageHeaderBar").bind("mouseenter", function () { switchInterface('y', false); } )
    12597                          .bind("mousemove", function () { switchInterface('y', false); } );
    126   }
    127 
    128   $("#theTabs").bind('tabsselect', function(event, ui)
    129     {
    130       /* The "collapsible" option don't work with jQuery 1.2.6
    131        * This function aims to reproduct this functionnality
    132       */
    133       selectedTab=ui.index;
    134     }
    135   );
    136 
    137   $('.tab a').click(function()
    138     {
    139       /* The "collapsible" option don't work with jQuery 1.2.6
    140        * This function aims to reproduct this functionnality
    141       */
    142       $(this).get(0).blur();
    143       if(selectedTab == currentTab)
    144       {
    145         if (currentTab!=-1) switchTabs('n');
    146         currentTab=-1;
    147         selectedTab=-1;
    148       }
    149       else
    150       {
    151         if(currentTab==-1) switchTabs('y');
    152         currentTab=selectedTab;
    153       }
    154     }
    155   );
    156 
    157   $(window).resize( function () { initializeImageMode("resize"); } );
    158 
    159   $(document).data("initialized", 1).trigger('gallyInterfaceReady');
    160 }
    161 
    162 function simulateHighRes()
    163 {
    164   if(isScrollable && options.imageHaveHighRes==false && options.imageSimulateHighRes)
    165   {
    166     $('#theImgContainer').bind('click', function ()
    167       {
    168         openDisplayHigh($('#theImg').attr('src'));
    169       }
    170     ).addClass('pointer');
    171   }
    172 
    173 }
    174 
    175 function initializeImageMode(mode)
    176 {
    177   if(mode=="init")
    178   {
    179     theHeaderHeight=$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight");
    180 
    181     $("#imageToolBar").css("top", $("#imageToolBar").attr("offsetTop")+theHeaderHeight+$("#imageHeaderBar").attr("offsetHeight")+"px");
    182 
    183     if(options.tabsPosition=="bottom")
    184     {
    185       copyrightArea = $("#copyright").attr("clientHeight")+1;
    186       $("#theTabsContainer").css("bottom", copyrightArea+"px");
    187     }
    188     else if(options.tabsPosition=="top")
    189     {
    190       toolBarArea = $("#imageToolBar").attr("offsetTop")+$("#imageToolBar").attr("offsetHeight");
    191       $("#theTabsContainer").css("top", toolBarArea+"px");
    192     }
    193 
    194     if($("#navThumbPrev").length>0)
    195     {
    196       $("#navThumbPrev").css("height", $("#copyright").attr("offsetTop")-$("#navThumbPrev").attr("offsetTop")-options.tabsHidden+"px");
    197     }
    198     if($("#navThumbNext").length>0)
    199     {
    200       $("#navThumbNext").css("height", $("#copyright").attr("offsetTop")-$("#navThumbNext").attr("offsetTop")-options.tabsHidden+"px");
    201     }
    202   }
    203 
    204   cssValues = new Object;
    205   cssValues.height = $("#theImg").attr("height")+"px";
    206 
    207   // autoscroll
    208   if(options.imageAutoScroll && ($("#theImg").attr("scrollWidth")>($("#theImage").attr("clientWidth")-2*options.marginContainer)))
    209   {
    210     cssValues.width = ($("#theImage").attr("clientWidth")- 2*options.marginContainer)+"px";
    211 
    212     $("#theImage").bind("mousemove",
    213       function(event){
    214         deadArea = $("#navThumbPrev").attr("clientWidth")*1.2;
    215         mouse=Math.max(Math.min(event.clientX-this.offsetLeft, this.clientWidth - deadArea), deadArea);
    216         $("#theImg")
    217           .css("left",Math.round(($("#theImg").attr("scrollWidth")-this.clientWidth) * -(mouse-deadArea)/(this.clientWidth-2*deadArea))+"px")
    218           .trigger('scrolled');
     98      $("#imageToolBar").bind("mouseenter", function () { switchInterface('y', true); } )
     99                        .bind("mouseleave", function () { switchInterface('n', true); } )
     100                        .bind("mousemove", function () { switchInterface('y', true); } );
     101
     102
     103      $("#navThumbPrev").bind("mouseenter", function () { switchInterface('Y', true); } )
     104                        .bind("mouseleave", function () { switchInterface('n', true); } )
     105                        .bind("mousemove", function () { switchInterface('y', true); } );
     106
     107      $("#navThumbNext").bind("mouseenter", function () { switchInterface('Y', true); } )
     108                        .bind("mouseleave", function () { switchInterface('n', true); } )
     109                        .bind("mousemove", function () { switchInterface('y', true); } );
     110    }
     111
     112
     113    $("#navThumbPrev").css("top", $("#navThumbPrev").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");
     114    $("#navThumbNext").css("top", $("#navThumbNext").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");
     115
     116    $("#theImage").css("top", $("#theImage").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");
     117
     118    $("#contentid").attr("rows", options.commentRows);
     119
     120    /* fx duration option set to 0 doesn't work so... */
     121    if(options.animateDelay>0)
     122    {
     123      $("#theTabs").tabs({ fx: { opacity: 'toggle', duration:options.animateDelay } } );
     124    }
     125    else
     126    {
     127      $("#theTabs").tabs();
     128    }
     129    switchTabs('n');
     130
     131
     132    if(options.interfaceCanSwitch)
     133    {
     134      $('#theTabsContainer').bind("mouseenter", function () { switchInterface('Y', false); } )
     135                            .bind("mouseleave", function () { switchInterface('n'); } )
     136                            .bind("mousemove", function () { switchInterface('y', false); } );
     137    }
     138
     139    $("#theTabs").bind('tabsselect', function(event, ui)
     140      {
     141        /* The "collapsible" option don't work with jQuery 1.2.6
     142         * This function aims to reproduct this functionnality
     143        */
     144        tabs.selected=ui.index;
    219145      }
    220146    );
    221     isScrollable=true;
    222   }
    223   else
    224   {
    225     $("#theImage").unbind("mousemove");
    226     $("#theImg").css("left", "0px");
    227     cssValues.width = $("#theImg").attr("scrollWidth")+"px";
    228     isScrollable=false;
    229   }
    230   $("#theImgContainer").css(cssValues);
    231 
    232   // imagecenter
    233   if($("#copyright").css("position")=="fixed")
    234   {
    235     $("#theImage").css("padding-bottom", $("#copyright").attr("offsetHeight")+"px");
    236   }
    237   switch(options.imageCenterMode)
    238   {
    239     case "img":
    240       imgTop = $("#theImgContainer").attr('offsetHeight');
    241       break;
    242     case "all":
    243       imgTop = $("#theImage").attr('offsetHeight');
    244       break;
    245     default:
    246       imgTop = -10000;
    247       break;
    248   }
    249   imgTop = ($("#copyright").attr("offsetTop") - ($("#imageHeaderBar").attr("offsetTop") + $("#imageHeaderBar").attr("offsetHeight")) - imgTop)/2 + options.imageCenterOffset;
    250 
    251   if(imgTop<options.imageCenterTopMin)
    252   {
    253     imgTop=options.imageCenterTopMin;
    254   }
    255   imgTop=imgTop+"px";
    256 
    257   $("#theImage").css("top", imgTop);
    258 
    259   simulateHighRes();
    260 
    261 }
    262 
    263 function switchInterface(show, resetTimer)
    264 {
    265   /*
    266   uiImg class is affected on this elements :
    267   $("#imageToolBarContainer").stop(true, false).fadeTo(animateDelay, 1);
    268   $("#imageInfosContainer").stop(true, false).fadeTo(animateDelay, 1);
    269   $("#navThumbPrevContainer").stop(true, false).fadeTo(animateDelay, 1);
    270   $("#navThumbNextContainer").stop(true, false).fadeTo(animateDelay, 1);
    271   */
    272 
    273   if(($(document).data("initialized")==1)&&(options.interfaceHidden))
    274   {
    275     $(document).data("initialized", 2);
    276     if(show=="Y") return('');
    277   }
    278 
    279   if(!options.interfaceHidden && show=="0")  { show="1"; }
    280 
    281   // works with jQuery 1.2.6 (support function need jQuery 1.3)
    282   if(options.interfaceAnimated=="fade")
    283   {
    284     switch(show)
    285     {
    286       case '0':
    287         $(".uiImg").css({opacity: 0, visibility:"hidden"});
    288         $(document).data("interface", false);
     147
     148    $('.tab a').click(function()
     149      {
     150        /* The "collapsible" option don't work with jQuery 1.2.6
     151         * This function aims to reproduct this functionnality
     152        */
     153        $(this).get(0).blur();
     154        if(tabs.selected == tabs.current)
     155        {
     156          if (tabs.current!=-1) switchTabs('n');
     157          tabs.current=-1;
     158          tabs.selected=-1;
     159        }
     160        else
     161        {
     162          if(tabs.current==-1) switchTabs('y');
     163          tabs.current=tabs.selected;
     164        }
     165      }
     166    );
     167
     168    $(window).resize( function () { initializeImageMode("resize"); } );
     169
     170    interface.initialized=1;
     171    $(document).trigger('gallyInterfaceReady');
     172  },
     173
     174  simulateHighRes = function ()
     175  {
     176    if(image.isScrollable && options.imageHaveHighRes==false && options.imageSimulateHighRes)
     177    {
     178      $('#theImgContainer').bind('click', function ()
     179        {
     180          openDisplayHigh($('#theImg').attr('src'));
     181        }
     182      ).addClass('pointer');
     183    }
     184
     185  },
     186
     187  initializeImageMode = function (mode)
     188  {
     189    if(mode=="init")
     190    {
     191      theHeaderHeight=$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight");
     192
     193      $("#imageToolBar").css("top", $("#imageToolBar").attr("offsetTop")+theHeaderHeight+$("#imageHeaderBar").attr("offsetHeight")+"px");
     194
     195      if(options.tabsPosition=="bottom")
     196      {
     197        copyrightArea = $("#copyright").attr("clientHeight")+1;
     198        $("#theTabsContainer").css("bottom", copyrightArea+"px");
     199      }
     200      else if(options.tabsPosition=="top")
     201      {
     202        toolBarArea = $("#imageToolBar").attr("offsetTop")+$("#imageToolBar").attr("offsetHeight");
     203        $("#theTabsContainer").css("top", toolBarArea+"px");
     204      }
     205
     206      if($("#navThumbPrev").length>0)
     207      {
     208        $("#navThumbPrev").css("height", $("#copyright").attr("offsetTop")-$("#navThumbPrev").attr("offsetTop")-options.tabsHidden+"px");
     209      }
     210      if($("#navThumbNext").length>0)
     211      {
     212        $("#navThumbNext").css("height", $("#copyright").attr("offsetTop")-$("#navThumbNext").attr("offsetTop")-options.tabsHidden+"px");
     213      }
     214    }
     215
     216    cssValues = new Object;
     217    cssValues.height = $("#theImg").attr("height")+"px";
     218
     219    // autoscroll
     220    if(options.imageAutoScroll && ($("#theImg").attr("scrollWidth")>($("#theImage").attr("clientWidth")-2*options.marginContainer)))
     221    {
     222      cssValues.width = ($("#theImage").attr("clientWidth")- 2*(options.marginContainer+options.paddingContainer))+"px";
     223
     224      $("#theImage").bind("mousemove",
     225        function(event){
     226          deadArea = Math.max(options.imageScrollMinDeadArea, $("#navThumbPrev").attr("clientWidth")*1.2);
     227          mouse=Math.max(Math.min(event.clientX-image.leftPos, this.clientWidth - deadArea), deadArea);
     228          $("#theImg")
     229            .css("left",Math.round(($("#theImg").attr("scrollWidth")-this.clientWidth) * -(mouse-deadArea)/(this.clientWidth-2*deadArea))+"px")
     230            .trigger('scrolled');
     231        }
     232      );
     233      image.isScrollable=true;
     234    }
     235    else
     236    {
     237      $("#theImage").unbind("mousemove");
     238      $("#theImg").css("left", "0px");
     239      cssValues.width = $("#theImg").attr("scrollWidth")+"px";
     240      image.isScrollable=false;
     241    }
     242    $("#theImgContainer").css(cssValues);
     243
     244    // imagecenter
     245    if($("#copyright").css("position")=="fixed")
     246    {
     247      $("#theImage").css("padding-bottom", $("#copyright").attr("offsetHeight")+"px");
     248    }
     249    switch(options.imageCenterMode)
     250    {
     251      case "img":
     252        imgTop = $("#theImgContainer").attr('offsetHeight');
    289253        break;
    290       case '1':
    291         if(!$(document).data("interface")) $(".uiImg").css({opacity: 1, visibility:"visible"});
    292         $(document).data("interface", true);
    293         if(resetTimer) resetInterfaceTimer();
    294         break;
    295       case '2':
    296         //if($(document).data("interface")) break;
    297       case 'Y':
    298       case 'y':
    299         if(!$(document).data("interface")) $(".uiImg").css("visibility","visible").stop(true, false).fadeTo(options.animateDelay, 1);
    300         $(document).data("interface", true);
    301         if(resetTimer) resetInterfaceTimer();
     254      case "all":
     255        imgTop = $("#theImage").attr('offsetHeight');
    302256        break;
    303257      default:
    304         $(".uiImg").stop(true, false).fadeTo(options.animateDelay, 0, function ()
     258        imgTop = -10000;
     259        break;
     260    }
     261    imgTop = ($("#copyright").attr("offsetTop") - ($("#imageHeaderBar").attr("offsetTop") + $("#imageHeaderBar").attr("offsetHeight")) - imgTop)/2 + options.imageCenterOffset;
     262
     263    if(imgTop<options.imageCenterTopMin)
     264    {
     265      imgTop=options.imageCenterTopMin;
     266    }
     267    imgTop=imgTop+"px";
     268
     269    $("#theImage").css("top", imgTop);
     270
     271
     272    image.leftPos=$('#theImage').offset().left;
     273
     274    simulateHighRes();
     275
     276  },
     277
     278  switchInterface = function (show, resetTimer)
     279  {
     280    if((interface.initialized==1)&&(options.interfaceHidden))
     281    {
     282      interface.initialized=2;
     283      if(show=="Y") return('');
     284    }
     285
     286    if(!options.interfaceHidden && show=="0")  { show="1"; }
     287
     288    // works with jQuery 1.2.6 (support function need jQuery 1.3)
     289    if(options.interfaceAnimated=="fade")
     290    {
     291      switch(show)
     292      {
     293        case '0':
     294          $(".uiImg").css({opacity: 0, visibility:"hidden"});
     295          interface.visible=false;
     296          break;
     297        case '1':
     298          if(!interface.visible) $(".uiImg").css({opacity: 1, visibility:"visible"});
     299          interface.visible=true;
     300          if(resetTimer) resetInterfaceTimer();
     301          break;
     302        case '2':
     303          //if(interface.visible) break;
     304        case 'Y':
     305        case 'y':
     306          if(!interface.visible) $(".uiImg").css("visibility","visible").stop(true, false).fadeTo(options.animateDelay, 1);
     307          interface.visible=true;
     308          if(resetTimer) resetInterfaceTimer();
     309          break;
     310        default:
     311          $(".uiImg").stop(true, false).fadeTo(options.animateDelay, 0, function ()
     312            {
     313              this.style.visibility="hidden";
     314              interface.visible=false;
     315            }
     316          );
     317          clearInterfaceTimer();
     318          break;
     319      }
     320    }
     321    else
     322    {
     323      //other value....
     324      switch(show)
     325      {
     326        case 'y':
     327        case 'Y':
     328        case '1':
     329        case '2':
     330          if(!interface.visible) $(".uiImg").css("visibility", "visible");
     331          interface.visible=true;
     332          if(resetTimer) resetInterfaceTimer();
     333          break;
     334        default:
     335          $(".uiImg").css("visibility", "hidden");
     336          interface.visible=false;
     337          clearInterfaceTimer();
     338          break;
     339      }
     340    }
     341  },
     342
     343  switchTabs = function(show)
     344  {
     345    if(show!='')
     346    {
     347      tabs.show=show;
     348    }
     349    else
     350    {
     351      if(tabs.show!='n')
     352      {
     353        tabs.show='n';
     354      }
     355      else
     356      {
     357        tabs.show='y';
     358      }
     359    }
     360
     361    if(options.tabsAnimated)
     362    {
     363      if(tabs.show=='y')
     364      {
     365        $("#theTabsContainer").animate({height:options.tabsVisible+"px"}, options.animateDelay).trigger('resize');
     366      }
     367      else
     368      {
     369        $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
     370        $('#theTabs li').removeClass("ui-tabs-selected");
     371        $("#theTabsContainer").animate({height:options.tabsHidden+"px"}, options.animateDelay).trigger('resize');
     372      }
     373    }
     374    else
     375    {
     376      if(tabs.show=='y')
     377      {
     378        $("#theTabsContainer").css({height:options.tabsVisible+"px"}).trigger('resize');
     379      }
     380      else
     381      {
     382        $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
     383        $('#theTabs li').removeClass("ui-tabs-selected");
     384        $("#theTabsContainer").css({height:options.tabsHidden+"px"}).trigger('resize');
     385      }
     386    }
     387  },
     388
     389  clearInterfaceTimer = function()
     390  {
     391    if(interface.timerDelay!=null)
     392    {
     393      window.clearInterval(interface.timerDelay);
     394      interface.timerDelay=null;
     395    }
     396  },
     397
     398  resetInterfaceTimer = function()
     399  {
     400    clearInterfaceTimer();
     401    if(options.interfaceTimerDelay>0 && options.interfaceCanSwitch) interface.timerDelay=window.setInterval(switchInterface, options.interfaceTimerDelay, "n", false);
     402  },
     403
     404  openDisplayHigh = function(url)
     405  {
     406    $('#theImageHigh').css(
     407      {
     408        width:$("html").get(0).scrollWidth+"px",
     409        height:$("html").get(0).scrollHeight+"px",
     410        display:"block"
     411      }
     412    );
     413
     414    if($("#theImgHigh").attr('src')=="")
     415    {
     416      p = new Object();
     417      p.left = (($(window).width()-$("#theImgHighContainer").attr("clientWidth")-options.paddingContainer*2)/2)+"px";
     418      p.top = (($(window).height()-$("#theImgHighContainer").attr("clientHeight")-options.paddingContainer*2)/2)+"px";
     419
     420
     421      $('#theImgHighContainer')
     422        .css(
    305423          {
    306             this.style.visibility="hidden";
    307             $(document).data("interface", false);
     424            left:p.left,
     425            top:p.top,
     426            padding:options.paddingContainer+"px"
    308427          }
    309428        );
    310         clearInterfaceTimer();
    311         break;
    312     }
    313   }
    314   else
    315   {
    316     //other value....
    317     switch(show)
    318     {
    319       case 'y':
    320       case 'Y':
    321       case '1':
    322       case '2':
    323         if(!$(document).data("interface")) $(".uiImg").css("visibility", "visible");
    324         $(document).data("interface", true);
    325         if(resetTimer) resetInterfaceTimer();
    326         break;
    327       default:
    328         $(".uiImg").css("visibility", "hidden");
    329         $(document).data("interface", false);
    330         clearInterfaceTimer();
    331         break;
    332     }
    333   }
    334 }
    335 
    336 function switchTabs(show)
    337 {
    338   if(show!='')
    339   {
    340     showtabs=show;
    341   }
    342   else
    343   {
    344     if(showtabs!='n')
    345     {
    346       showtabs='n';
    347     }
    348     else
    349     {
    350       showtabs='y';
    351     }
    352   }
    353 
    354   if(options.tabsAnimated)
    355   {
    356     if(showtabs=='y')
    357     {
    358       $("#theTabsContainer").animate({height:options.tabsVisible+"px"}, options.animateDelay).trigger('resize');
    359     }
    360     else
    361     {
    362       $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
    363       $('#theTabs li').removeClass("ui-tabs-selected");
    364       $("#theTabsContainer").animate({height:options.tabsHidden+"px"}, options.animateDelay).trigger('resize');
    365     }
    366   }
    367   else
    368   {
    369     if(showtabs=='y')
    370     {
    371       $("#theTabsContainer").css({height:options.tabsVisible+"px"}).trigger('resize');
    372     }
    373     else
    374     {
    375       $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
    376       $('#theTabs li').removeClass("ui-tabs-selected");
    377       $("#theTabsContainer").css({height:options.tabsHidden+"px"}).trigger('resize');
    378     }
    379   }
    380 }
    381 
    382 function clearInterfaceTimer()
    383 {
    384   if(interfaceTimerDelay!=null)
    385   {
    386     window.clearInterval(interfaceTimerDelay);
    387     interfaceTimerDelay=null;
    388   }
    389 }
    390 
    391 function resetInterfaceTimer()
    392 {
    393   clearInterfaceTimer();
    394   if(options.interfaceTimerDelay>0 && options.interfaceCanSwitch) interfaceTimerDelay=window.setInterval(switchInterface, options.interfaceTimerDelay, "n", false);
    395 }
    396 
    397 function openDisplayHigh(url)
    398 {
    399   $('#theImageHigh').css(
    400     {
    401       width:$("html").get(0).scrollWidth+"px",
    402       height:$("html").get(0).scrollHeight+"px",
    403       display:"block"
    404     }
    405   );
    406 
    407   if($("#theImgHigh").attr('src')=="")
    408   {
    409     p = new Object();
    410     p.left = (($(window).width()-$("#theImgHighContainer").attr("clientWidth")-options.paddingContainer*2)/2)+"px";
    411     p.top = (($(window).height()-$("#theImgHighContainer").attr("clientHeight")-options.paddingContainer*2)/2)+"px";
    412 
    413 
    414     $('#theImgHighContainer')
    415       .css(
     429
     430
     431      $("#theImgHigh")
     432        .load(
     433          function ()
     434          {
     435            image.highWidth=$("#theImgHigh").width();
     436            image.highHeight=$("#theImgHigh").height();
     437
     438            p=calcImgHighPositionAndSize(image.zoomMode);
     439
     440            $('#theImgHighContainer').css("background-image", "none");
     441            displayZoomHigh();
     442            $("#theImgHigh").css( {display:"block"} );
     443          }
     444        )
     445        .attr('src', url);
     446
     447      if(options.highResClickMode=='close')
     448      {
     449        $("#theImgHigh").bind('click', closeDisplayHigh);
     450      }
     451      else
     452      {
     453        // switch zoom
     454        $("#theImgHigh").bind('click', switchZoomHigh);
     455      }
     456    }
     457    else
     458    {
     459      p=calcImgHighPositionAndSize(image.zoomMode);
     460
     461      $('#theImgHighContainer')
     462        .css(
     463          {
     464            left:p.left+"px",
     465            top:p.top+"px",
     466            width:p.width+"px",
     467            height:p.height+"px"
     468          }
     469        );
     470    }
     471  },
     472
     473  calcImgHighPositionAndSize = function(zoom)
     474  {
     475    var p = {
     476          left:options.marginContainer,
     477          top:options.marginContainer,
     478          width:0,
     479          height:0
     480        },
     481        margins = (options.marginContainer+options.paddingContainer)*2;
     482
     483    if(zoom=='full')
     484    {
     485      p.width = $("html").get(0).clientWidth-margins;
     486      p.height = $("html").get(0).clientHeight-margins;
     487    }
     488    else
     489    {
     490      //zoom = 'fit'
     491      ratioImg = image.highWidth / image.highHeight;
     492      ratioPage = $("html").get(0).clientWidth / $("html").get(0).clientHeight;
     493
     494      if((ratioPage > 1 && (ratioPage > ratioImg)) ||
     495         (ratioPage < 1 && (ratioPage < ratioImg)))
     496      {
     497        p.height = $("html").get(0).clientHeight-margins;
     498        p.width = p.height*ratioImg;
     499      }
     500      else
     501      {
     502        p.width = $("html").get(0).clientWidth-margins;
     503        p.height = p.width/ratioImg;
     504      }
     505      p.left = ($("html").get(0).clientWidth-p.width)/2-options.paddingContainer;
     506      p.top = ($("html").get(0).clientHeight-p.height)/2-options.paddingContainer;
     507    }
     508
     509    if(p.width>image.highWidth)
     510    {
     511      p.width = image.highWidth;
     512      p.left = ($("html").get(0).clientWidth-p.width)/2;
     513    }
     514    if(p.height>image.highHeight)
     515    {
     516      p.height = image.highHeight;
     517      p.top = ($("html").get(0).clientHeight-p.height)/2;
     518    }
     519
     520    return(p);
     521  },
     522
     523  displayZoomHigh = function()
     524  {
     525    container=calcImgHighPositionAndSize(image.zoomMode);
     526
     527    $('#theImgHighContainer').css(
    416528        {
    417           left:p.left,
    418           top:p.top,
    419           padding:options.paddingContainer+"px"
     529          left:container.left+"px",
     530          top:container.top+"px",
     531          width:container.width+"px",
     532          height:container.height+"px"
    420533        }
    421534      );
    422535
    423536
    424     $("#theImgHigh")
    425       .load(
    426         function ()
    427         {
    428           $(document).data("highWidth", $("#theImgHigh").width());
    429           $(document).data("highHeight", $("#theImgHigh").height());
    430 
    431           p=calcImgHighPositionAndSize(zoomMode);
    432 
    433           $('#theImgHighContainer').css("background-image", "none")
    434           displayZoomHigh();
    435           $("#theImgHigh").css( {display:"block"} );
    436         }
    437       )
    438       .attr('src', url);
    439 
    440     if(options.highResClickMode=='close')
    441     {
    442       $("#theImgHigh").bind('click', closeDisplayHigh);
    443     }
    444     else
    445     {
    446       // switch zoom
    447       $("#theImgHigh").bind('click', switchZoomHigh);
    448     }
    449   }
    450   else
    451   {
    452     p=calcImgHighPositionAndSize(zoomMode);
    453 
    454     $('#theImgHighContainer')
    455       .css(
    456         {
    457           left:p.left+"px",
    458           top:p.top+"px",
    459           width:p.width+"px",
    460           height:p.height+"px"
    461         }
    462       );
    463   }
     537
     538      if(image.zoomMode=="full")
     539      {
     540        $("#theImgHigh")
     541          .css(
     542            {
     543              width:image.highWidth+"px",
     544              height:image.highHeight+"px"
     545            }
     546          );
     547        $('#theImgHighContainer').bind("mousemove",
     548            function(event)
     549            {
     550              deadArea = Math.max(options.marginContainer*2, options.imageScrollMinDeadArea);
     551              mouseX=Math.max(Math.min(event.clientX-container.left, container.width - deadArea), deadArea);
     552              mouseY=Math.max(Math.min(event.clientY-container.top, container.height - deadArea), deadArea);
     553              $("#theImgHigh")
     554                .css("left",Math.round((image.highWidth-container.width) * -(mouseX-deadArea)/(container.width-2*deadArea))+"px")
     555                .css("top",Math.round((image.highHeight-container.height) * -(mouseY-deadArea)/(container.height-2*deadArea))+"px");
     556            }
     557          );
     558      }
     559      else
     560      {
     561        $("#theImgHigh")
     562          .css(
     563            {
     564              width:container.width+"px",
     565              height:container.height+"px",
     566              left:"0px",
     567              top:"0px"
     568            }
     569          );
     570        $('#theImgHighContainer').unbind("mousemove");
     571      }
     572  },
     573
     574  closeDisplayHigh = function()
     575  {
     576    $('#theImageHigh').css('display', 'none');
     577  },
     578
     579  switchZoomHigh = function()
     580  {
     581    if(image.zoomMode=='full')
     582    {
     583      image.zoomMode="fit";
     584    }
     585    else
     586    {
     587      image.zoomMode="full";
     588    }
     589
     590    $("#theImgHighZoomButton").toggleClass('full').toggleClass('fit');
     591
     592    displayZoomHigh();
     593  };
     594
     595
     596  this.closeDisplayHigh = function () { closeDisplayHigh(); };
     597  this.switchZoomHigh = function () { switchZoomHigh(); };
     598  this.getImageProp = function () { return image; };
     599  this.getInterfaceProp = function () { return interface; };
     600  this.getTabsProp = function () { return tabs; };
     601
     602  init();
     603
    464604}
    465605
    466 function calcImgHighPositionAndSize(zoom)
    467 {
    468   p = new Object();
    469 
    470   if(zoom=='full')
    471   {
    472     p.width = ($("html").get(0).clientWidth-(options.marginContainer+options.paddingContainer)*2);
    473     p.height = ($("html").get(0).clientHeight-(options.marginContainer+options.paddingContainer)*2);
    474     p.left=options.marginContainer;
    475     p.top=options.marginContainer;
    476 
    477     if(p.width>$(document).data("highWidth"))
    478     {
    479       p.width = $(document).data("highWidth")-options.paddingContainer*2;
    480       p.left = ($("html").get(0).clientWidth-p.width)/2;
    481     }
    482 
    483     if(p.height>$(document).data("highHeight"))
    484     {
    485       p.height = $(document).data("highHeight")-options.paddingContainer*2;
    486       p.top = ($("html").get(0).clientHeight-p.height)/2;
    487     }
    488   }
    489   else
    490   {
    491     //zoom = 'fit'
    492     ratioImg = $(document).data("highWidth") / $(document).data("highHeight");
    493     ratioPage = $("html").get(0).clientWidth / $("html").get(0).clientHeight;
    494 
    495     if((ratioPage > 1 && (ratioPage > ratioImg)) ||
    496        (ratioPage < 1 && (ratioPage < ratioImg)))
    497     {
    498       p.height = ($("html").get(0).clientHeight-(options.marginContainer+options.paddingContainer)*2);
    499       p.width = p.height*ratioImg;
    500     }
    501     else
    502     {
    503       p.width = ($("html").get(0).clientWidth-(options.marginContainer+options.paddingContainer)*2);
    504       p.height = p.width/ratioImg;
    505     }
    506     p.left = ($("html").get(0).clientWidth-p.width)/2;
    507     p.top = ($("html").get(0).clientHeight-p.height)/2;
    508   }
    509 
    510   return(p);
    511 }
    512 
    513 function closeDisplayHigh()
    514 {
    515   $('#theImageHigh').css('display', 'none');
    516 }
    517 
    518 function switchZoomHigh()
    519 {
    520   if(zoomMode=='full')
    521   {
    522     zoomMode="fit";
    523   }
    524   else
    525   {
    526     zoomMode="full";
    527   }
    528 
    529   $("#theImgHighZoomButton").toggleClass('full').toggleClass('fit');
    530 
    531   displayZoomHigh();
    532 }
    533 
    534 function displayZoomHigh()
    535 {
    536   p=calcImgHighPositionAndSize(zoomMode);
    537 
    538   $('#theImgHighContainer').css(
    539       {
    540         left:p.left+"px",
    541         top:p.top+"px",
    542         width:p.width+"px",
    543         height:p.height+"px"
    544       }
    545     );
    546 
    547 
    548 
    549     if(zoomMode=="full")
    550     {
    551       $("#theImgHigh")
    552         .css(
    553           {
    554             width:$(document).data("highWidth")+"px",
    555             height:$(document).data("highHeight")+"px"
    556           }
    557         );
    558       $('#theImgHighContainer').bind("mousemove",
    559           function(event)
    560           {
    561             deadArea = options.marginContainer*2;
    562             mouseX=Math.max(Math.min(event.clientX-this.offsetLeft, this.clientWidth - deadArea), deadArea);
    563             mouseY=Math.max(Math.min(event.clientY-this.offsetTop, this.clientHeight - deadArea), deadArea);
    564             $("#theImgHigh")
    565               .css("left",Math.round(($("#theImgHigh").attr("scrollWidth")-this.clientWidth) * -(mouseX-deadArea)/(this.clientWidth-2*deadArea))+"px")
    566               .css("top",Math.round(($("#theImgHigh").attr("scrollHeight")-this.clientHeight) * -(mouseY-deadArea)/(this.clientHeight-2*deadArea))+"px");
    567           }
    568         );
    569     }
    570     else
    571     {
    572       $("#theImgHigh")
    573         .css(
    574           {
    575             width:p.width+"px",
    576             height:p.height+"px",
    577             left:"0px",
    578             top:"0px"
    579           }
    580         );
    581       $('#theImgHighContainer').unbind("mousemove");
    582     }
    583 }
    584 
    585 
    586 
    587 
     606
     607
     608
Note: See TracChangeset for help on using the changeset viewer.