source: extensions/gally/gally-default/js/gallyjs-tpp.js @ 12143

Last change on this file since 12143 was 10972, checked in by grum, 13 years ago

bug:2308 - HD Picture are not displayed
  • Property svn:executable set to *
File size: 17.3 KB
Line 
1/* -----------------------------------------------------------------------------
2  GALLY
3  Template for Piwigo
4  ------------------------------------------------------------------------------
5  file: gally/gallyjs-tpp.js
6  file release: 1.4.0
7  ------------------------------------------------------------------------------
8  author: grum at piwigo.org
9  << May the Little SpaceFrog be with you >>
10  ------------------------------------------------------------------------------
11  JS for the pictures pages
12
13  need jQuery 1.2.6
14
15  see the release_notes.txt file for more informations
16----------------------------------------------------------------------------- */
17
18var gallyPP=null;
19
20$(document).ready(
21  function()
22  {
23    gallyPP=new GallyPP();
24  }
25);
26
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    var 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); } )
97                          .bind("mousemove", function () { switchInterface('y', false); } );
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;
145      }
146    );
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    var thumbWidth=0,
190        imgTop=0,
191        cssValues = new Object;
192
193    if(mode=="init")
194    {
195      theHeaderHeight=$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight");
196
197      $("#imageToolBar").css("top", $("#imageToolBar").attr("offsetTop")+theHeaderHeight+$("#imageHeaderBar").attr("offsetHeight")+"px");
198
199      if(options.tabsPosition=="bottom")
200      {
201        copyrightArea = $("#copyright").attr("clientHeight")+1;
202        $("#theTabsContainer").css("bottom", copyrightArea+"px");
203      }
204      else if(options.tabsPosition=="top")
205      {
206        toolBarArea = $("#imageToolBar").attr("offsetTop")+$("#imageToolBar").attr("offsetHeight");
207        $("#theTabsContainer").css("top", toolBarArea+"px");
208      }
209
210      if($("#navThumbPrev").length>0)
211      {
212        $("#navThumbPrev").css("height", $("#copyright").attr("offsetTop")-$("#navThumbPrev").attr("offsetTop")-options.tabsHidden+"px");
213      }
214      if($("#navThumbNext").length>0)
215      {
216        $("#navThumbNext").css("height", $("#copyright").attr("offsetTop")-$("#navThumbNext").attr("offsetTop")-options.tabsHidden+"px");
217      }
218    }
219
220    cssValues.height = $("#theImg").attr("height")+"px";
221
222    // autoscroll
223    if(options.imageAutoScroll && ($("#theImg").attr("scrollWidth")>($("#theImage").attr("clientWidth")-2*options.marginContainer)))
224    {
225      cssValues.width = ($("#theImage").attr("clientWidth")- 2*(options.marginContainer+options.paddingContainer))+"px";
226
227      $("#theImage").bind("mousemove",
228        function(event){
229          if($("#navThumbPrev").length>0) thumbWidth=$("#navThumbPrev").attr("clientWidth");
230          deadArea = Math.max(options.imageScrollMinDeadArea, thumbWidth*1.2);
231          mouse=Math.max(Math.min(event.clientX-image.leftPos, this.clientWidth - deadArea), deadArea);
232          $("#theImg")
233            .css("left",Math.round(($("#theImg").attr("scrollWidth")-this.clientWidth) * -(mouse-deadArea)/(this.clientWidth-2*deadArea))+"px")
234            .trigger('scrolled');
235        }
236      );
237      image.isScrollable=true;
238    }
239    else
240    {
241      $("#theImage").unbind("mousemove");
242      $("#theImg").css("left", "0px");
243      cssValues.width = $("#theImg").attr("scrollWidth")+"px";
244      image.isScrollable=false;
245    }
246    $("#theImgContainer").css(cssValues);
247
248    // imagecenter
249    if($("#copyright").css("position")=="fixed")
250    {
251      $("#theImage").css("padding-bottom", $("#copyright").attr("offsetHeight")+"px");
252    }
253    switch(options.imageCenterMode)
254    {
255      case "img":
256        imgTop = $("#theImgContainer").attr('offsetHeight');
257        break;
258      case "all":
259        imgTop = $("#theImage").attr('offsetHeight');
260        break;
261      default:
262        imgTop = -10000;
263        break;
264    }
265    imgTop = ($("#copyright").attr("offsetTop") - ($("#imageHeaderBar").attr("offsetTop") + $("#imageHeaderBar").attr("offsetHeight")) - imgTop)/2 + options.imageCenterOffset;
266
267    if(imgTop<options.imageCenterTopMin)
268    {
269      imgTop=options.imageCenterTopMin;
270    }
271    imgTop=imgTop+"px";
272
273    $("#theImage").css("top", imgTop);
274
275
276    image.leftPos=$('#theImage').offset().left;
277
278    simulateHighRes();
279
280  },
281
282  switchInterface = function (show, resetTimer)
283  {
284    if((interface.initialized==1)&&(options.interfaceHidden))
285    {
286      interface.initialized=2;
287      if(show=="Y") return('');
288    }
289
290    if(!options.interfaceHidden && show=="0")  { show="1"; }
291
292    // works with jQuery 1.2.6 (support function need jQuery 1.3)
293    if(options.interfaceAnimated=="fade")
294    {
295      switch(show)
296      {
297        case '0':
298          $(".uiImg").css({opacity: 0, visibility:"hidden"});
299          interface.visible=false;
300          break;
301        case '1':
302          if(!interface.visible) $(".uiImg").css({opacity: 1, visibility:"visible"});
303          interface.visible=true;
304          if(resetTimer) resetInterfaceTimer();
305          break;
306        case '2':
307          //if(interface.visible) break;
308        case 'Y':
309        case 'y':
310          if(!interface.visible) $(".uiImg").css("visibility","visible").stop(true, false).fadeTo(options.animateDelay, 1);
311          interface.visible=true;
312          if(resetTimer) resetInterfaceTimer();
313          break;
314        default:
315          $(".uiImg").stop(true, false).fadeTo(options.animateDelay, 0, function ()
316            {
317              this.style.visibility="hidden";
318              interface.visible=false;
319            }
320          );
321          clearInterfaceTimer();
322          break;
323      }
324    }
325    else
326    {
327      //other value....
328      switch(show)
329      {
330        case 'y':
331        case 'Y':
332        case '1':
333        case '2':
334          if(!interface.visible) $(".uiImg").css("visibility", "visible");
335          interface.visible=true;
336          if(resetTimer) resetInterfaceTimer();
337          break;
338        default:
339          $(".uiImg").css("visibility", "hidden");
340          interface.visible=false;
341          clearInterfaceTimer();
342          break;
343      }
344    }
345  },
346
347  switchTabs = function(show)
348  {
349    if(show!='')
350    {
351      tabs.show=show;
352    }
353    else
354    {
355      if(tabs.show!='n')
356      {
357        tabs.show='n';
358      }
359      else
360      {
361        tabs.show='y';
362      }
363    }
364
365    if(options.tabsAnimated)
366    {
367      if(tabs.show=='y')
368      {
369        $("#theTabsContainer").animate({height:options.tabsVisible+"px"}, options.animateDelay).trigger('resize');
370      }
371      else
372      {
373        $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
374        $('#theTabs li').removeClass("ui-tabs-selected");
375        $("#theTabsContainer").animate({height:options.tabsHidden+"px"}, options.animateDelay).trigger('resize');
376      }
377    }
378    else
379    {
380      if(tabs.show=='y')
381      {
382        $("#theTabsContainer").css({height:options.tabsVisible+"px"}).trigger('resize');
383      }
384      else
385      {
386        $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
387        $('#theTabs li').removeClass("ui-tabs-selected");
388        $("#theTabsContainer").css({height:options.tabsHidden+"px"}).trigger('resize');
389      }
390    }
391  },
392
393  clearInterfaceTimer = function()
394  {
395    if(interface.timerDelay!=null)
396    {
397      window.clearInterval(interface.timerDelay);
398      interface.timerDelay=null;
399    }
400  },
401
402  resetInterfaceTimer = function()
403  {
404    clearInterfaceTimer();
405    if(options.interfaceTimerDelay>0 && options.interfaceCanSwitch) interface.timerDelay=window.setInterval(switchInterface, options.interfaceTimerDelay, "n", false);
406  },
407
408  openDisplayHigh = function(url)
409  {
410    $('#theImageHigh').css(
411      {
412        width:$("html").get(0).scrollWidth+"px",
413        height:$("html").get(0).scrollHeight+"px",
414        display:"block"
415      }
416    );
417
418    if($("#theImgHigh").attr('src')=="")
419    {
420      p = new Object();
421      p.left = (($(window).width()-$("#theImgHighContainer").attr("clientWidth")-options.paddingContainer*2)/2)+"px";
422      p.top = (($(window).height()-$("#theImgHighContainer").attr("clientHeight")-options.paddingContainer*2)/2)+"px";
423
424
425      $('#theImgHighContainer')
426        .css(
427          {
428            left:p.left,
429            top:p.top,
430            padding:options.paddingContainer+"px"
431          }
432        );
433
434
435      $("#theImgHigh")
436        .load(
437          function ()
438          {
439            image.highWidth=$("#theImgHigh").width();
440            image.highHeight=$("#theImgHigh").height();
441
442            p=calcImgHighPositionAndSize(image.zoomMode);
443
444            $('#theImgHighContainer').css("background-image", "none");
445            displayZoomHigh();
446            $("#theImgHigh").css( {display:"block"} );
447          }
448        )
449        .attr('src', url);
450
451      if(options.highResClickMode=='close')
452      {
453        $("#theImgHigh").bind('click', closeDisplayHigh);
454      }
455      else
456      {
457        // switch zoom
458        $("#theImgHigh").bind('click', switchZoomHigh);
459      }
460    }
461    else
462    {
463      p=calcImgHighPositionAndSize(image.zoomMode);
464
465      $('#theImgHighContainer')
466        .css(
467          {
468            left:p.left+"px",
469            top:p.top+"px",
470            width:p.width+"px",
471            height:p.height+"px"
472          }
473        );
474    }
475  },
476
477  calcImgHighPositionAndSize = function(zoom)
478  {
479    var p = {
480          left:options.marginContainer,
481          top:options.marginContainer,
482          width:0,
483          height:0
484        },
485        margins = (options.marginContainer+options.paddingContainer)*2;
486
487    if(zoom=='full')
488    {
489      p.width = $("html").get(0).clientWidth-margins;
490      p.height = $("html").get(0).clientHeight-margins;
491    }
492    else
493    {
494      //zoom = 'fit'
495      ratioImg = image.highWidth / image.highHeight;
496      ratioPage = $("html").get(0).clientWidth / $("html").get(0).clientHeight;
497
498      if((ratioPage > 1 && (ratioPage > ratioImg)) ||
499         (ratioPage < 1 && (ratioPage < ratioImg)))
500      {
501        p.height = $("html").get(0).clientHeight-margins;
502        p.width = p.height*ratioImg;
503      }
504      else
505      {
506        p.width = $("html").get(0).clientWidth-margins;
507        p.height = p.width/ratioImg;
508      }
509      p.left = ($("html").get(0).clientWidth-p.width)/2-options.paddingContainer;
510      p.top = ($("html").get(0).clientHeight-p.height)/2-options.paddingContainer;
511    }
512
513    if(p.width>image.highWidth)
514    {
515      p.width = image.highWidth;
516      p.left = ($("html").get(0).clientWidth-p.width)/2;
517    }
518    if(p.height>image.highHeight)
519    {
520      p.height = image.highHeight;
521      p.top = ($("html").get(0).clientHeight-p.height)/2;
522    }
523
524    return(p);
525  },
526
527  displayZoomHigh = function()
528  {
529    var container=calcImgHighPositionAndSize(image.zoomMode);
530
531    $('#theImgHighContainer').css(
532        {
533          left:container.left+"px",
534          top:container.top+"px",
535          width:container.width+"px",
536          height:container.height+"px"
537        }
538      );
539
540
541
542      if(image.zoomMode=="full")
543      {
544        $("#theImgHigh")
545          .css(
546            {
547              width:image.highWidth+"px",
548              height:image.highHeight+"px"
549            }
550          );
551        $('#theImgHighContainer').bind("mousemove",
552            function(event)
553            {
554              var deadArea = Math.max(options.marginContainer*2, options.imageScrollMinDeadArea)
555                  mouseX=Math.max(Math.min(event.clientX-container.left, container.width - deadArea), deadArea),
556                  mouseY=Math.max(Math.min(event.clientY-container.top, container.height - deadArea), deadArea);
557              $("#theImgHigh")
558                .css("left",Math.round((image.highWidth-container.width) * -(mouseX-deadArea)/(container.width-2*deadArea))+"px")
559                .css("top",Math.round((image.highHeight-container.height) * -(mouseY-deadArea)/(container.height-2*deadArea))+"px");
560            }
561          );
562      }
563      else
564      {
565        $("#theImgHigh")
566          .css(
567            {
568              width:container.width+"px",
569              height:container.height+"px",
570              left:"0px",
571              top:"0px"
572            }
573          );
574        $('#theImgHighContainer').unbind("mousemove");
575      }
576  },
577
578  closeDisplayHigh = function()
579  {
580    $('#theImageHigh').css('display', 'none');
581  },
582
583  switchZoomHigh = function()
584  {
585    if(image.zoomMode=='full')
586    {
587      image.zoomMode="fit";
588    }
589    else
590    {
591      image.zoomMode="full";
592    }
593
594    $("#theImgHighZoomButton").toggleClass('full').toggleClass('fit');
595
596    displayZoomHigh();
597  };
598
599
600  this.closeDisplayHigh = function () { closeDisplayHigh(); };
601  this.switchZoomHigh = function () { switchZoomHigh(); };
602  this.getImageProp = function () { return image; };
603  this.getInterfaceProp = function () { return interface; };
604  this.getTabsProp = function () { return tabs; };
605  this.openDisplayHigh = function (url) { openDisplayHigh(url); };
606
607  init();
608
609}
610
611
612
613
Note: See TracBrowser for help on using the repository browser.