js/lightbox.js

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