js/lightbox.js

   1 /*
   2         Lightbox
   3 */
   4 //
   5 // Configuration
   6 //
   7 var loadingImage = 'images/loading.gif';
   8 var closeButton = 'images/close.gif';
   9
  10 //
  11 // Init script
  12 //
  13 document.write('<LINK rel="stylesheet" href="js/lightbox.css" type="text/css" />');
  14 addLoadEvent(lb_Init);
  15
  16 // Variables
  17 var lb_Overlay, lb_Lightbox, lb_LoadingImage;
  18
  19 //
  20 // Init lightbox
  21 //
  22 function lb_Init(){
  23         var body = document.body || document.documentElement;
  24         // Create loading image
  25         lb_LoadingImage = insertElement(body,'IMG','loadingImage');
  26         lb_LoadingImage.src = loadingImage;
  27         // Create lightbox container
  28         lb_Lightbox = insertElement(body,'DIV','lightbox');
  29         // Create shaded overlay
  30         lb_Overlay = insertElement(body,'DIV','overlay');
  31         setOpacity(lb_Overlay, 0);
  32         lb_Overlay.onclick = hideLightbox;
  33 }
  34
  35 //
  36 // Do Animation func
  37 //
  38 function linear(t){return t;}
  39 function giperbolic(t){return 1 + Math.pow(t - 1, 3);}
  40 function backout(g){return function(t){return (-1 * t * (t + g - 2)) / (1 - g);};};
  41
  42 function lb_animate(el, p, to, d, ease, cb){
  43         var op = p == 'opacity', v;
  44         var from = op ? getOpacity(el):parseFloat(el[p]?el[p]:el.style[p]);
  45         if(isNaN(from)) from = 0;
  46         var delta = to - from;
  47         if(delta == 0){if (cb) cb(); return;} // nothing to animate
  48         if(!d){fn(1); if (cb) cb(); return;}  // cancel the animation
  49         // Animation func
  50         function fn(e){
  51                 v = from + e * delta;
  52                 if(op) setOpacity(el, v);
  53                 else if (el[p]) el[p] = v + 'px';
  54                 else el.style[p] = v + 'px';
  55         }
  56         var begin = new Date().getTime(),
  57                 end = begin + d,
  58                 time,
  59                 timer = setInterval(function(){time = new Date().getTime();if(time >= end){clearInterval(timer);fn(1); if (cb) cb();}else fn(ease((time - begin) / d));}, 10); // 10 ms interval is minimum on webkit
  60 }
  61
  62 //
  63 // Show object in center of window
  64 //
  65 function lb_showAndAlign(obj){
  66         var page = getPageRect();
  67         var s = obj.style;
  68         s.display = 'block';
  69         var top = (page.height - obj.offsetHeight) / 2 + page.top;
  70         s.top  = (top < 0 ? 0 : top) + 'px';
  71         s.left = ((page.width - obj.offsetWidth) / 2) + 'px';
  72 }
  73
  74 //
  75 // Hide Select boxes as they will 'peek' through the image in IE
  76 //
  77 function lb_selectBoxVisibility(state){
  78         selects = document.getElementsByTagName("select");
  79                 for (i = 0; i != selects.length; i++)
  80                         selects[i].style.visibility = state;
  81 }
  82 //
  83 // Show full screen overlay
  84 //
  85 function lb_drawOverlay(){
  86         // make select boxes hidden
  87         lb_selectBoxVisibility("hidden");
  88         // set height of Overlay to take up whole page and show
  89         var page= getPageRect();
  90         lb_Overlay.style.width  = (page.width > page.scrollX ? page.width : page.scrollX)+ 'px';
  91         lb_Overlay.style.height = (page.height> page.scrollY ? page.height: page.scrollY)+ 'px';
  92         lb_Overlay.style.display = 'block';
  93         lb_animate(lb_Overlay, 'opacity', 80, 400, giperbolic);
  94         // Center and show loadingImage if it need and exists
  95         lb_showAndAlign(document.getElementById('loadingImage'));
  96 }
  97 //
  98 // Hide
  99 //
 100 function hideLightbox(){
 101         // hide lightbox and overlay
 102         lb_LoadingImage.style.display = 'none';
 103         lb_Lightbox.style.display = 'none';
 104         lb_Lightbox.innerHTML = '';
 105         lb_animate(lb_Overlay, 'opacity', 0, 400, giperbolic, function (){lb_Overlay.style.display = 'none';});
 106         // make select boxes visible
 107         lb_selectBoxVisibility("visible");
 108         return false;
 109 }
 110 //
 111 // Preloads images. Pleace new image in lightbox then centers and display.
 112 //
 113 function showLightbox(){
 114         var objLink = this;
 115         lb_drawOverlay();
 116         setOpacity(lb_Lightbox, 0);
 117         // Prepare load inner data
 118         var imgPreload = new Image();
 119         imgPreload.onload=function(){
 120                 // Hide loadingImage if exists
 121                 lb_LoadingImage.style.display = 'none';
 122                 lb_Lightbox.onclick = hideLightbox;
 123                 var title = objLink.getAttribute('title');
 124                 var page = getPageRect();
 125                 var height = page.height > 25 + imgPreload.height ? imgPreload.height : page.height - 25;
 126                 lb_Lightbox.innerHTML =
 127                 '<a href="#" title="Click to close">' +
 128                 '       <img id="lightboxImage"/ src="' + objLink.href + '" height=' + height + 'px>' +
 129                 '       <img id="closeButton" src="' + closeButton + '" onclick="return hideLightbox();"/>' +
 130                 '</a>' +
 131                 (title ? '<div id="lightboxCaption">' + title + '</div>':'');
 132                 // Show popup
 133                 lb_showAndAlign(lb_Lightbox);
 134                 lb_animate(lb_Lightbox, 'opacity', 100, 900, giperbolic);
 135         }
 136         imgPreload.src = objLink.href;
 137         return false;
 138 }
 139 //
 140 // Preloads html.
 141 //
 142 function showAjaxBox(){
 143         lb_drawOverlay();
 144         function showHtmlBox(html)
 145         {
 146                 if (lb_LoadingImage.style.display == 'none')
 147                         return;
 148                 // Hide loadingImage if exists
 149                 lb_LoadingImage.style.display = 'none';
 150                 lb_Lightbox.innerHTML = html+'<img id="closeButton" src="' + closeButton + '" onclick="return hideLightbox();"/>';
 151                 execHTMLScripts(lb_Lightbox);
 152                 parseHref(lb_Lightbox);
 153                 lb_showAndAlign(lb_Lightbox);
 154                 //setOpacity(lb_Lightbox, 0);
 155                 //lb_animate(lb_Lightbox, 'opacity', 100, 800, giperbolic);
 156         }
 157         my_AJAX.GETupload('ajax.php?'+this.href.split('?')[1], showHtmlBox);
 158         return false;
 159 }