home *** CD-ROM | disk | FTP | other *** search
/ csi.uticak12.org / csi.uticak12.org.tar / csi.uticak12.org / js / lightbox.js < prev    next >
Text File  |  2011-10-20  |  18KB  |  497 lines
  1. // -----------------------------------------------------------------------------------
  2. //
  3. //    Lightbox v2.04
  4. //    by Lokesh Dhakar - http://www.lokeshdhakar.com
  5. //    Last Modification: 2/9/08
  6. //
  7. //    For more information, visit:
  8. //    http://lokeshdhakar.com/projects/lightbox2/
  9. //
  10. //    Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
  11. //      - Free for use in both personal and commercial projects
  12. //        - Attribution requires leaving author name, author link, and the license info intact.
  13. //    
  14. //  Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
  15. //          Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
  16. //
  17. // -----------------------------------------------------------------------------------
  18. /*
  19.  
  20.     Table of Contents
  21.     -----------------
  22.     Configuration
  23.  
  24.     Lightbox Class Declaration
  25.     - initialize()
  26.     - updateImageList()
  27.     - start()
  28.     - changeImage()
  29.     - resizeImageContainer()
  30.     - showImage()
  31.     - updateDetails()
  32.     - updateNav()
  33.     - enableKeyboardNav()
  34.     - disableKeyboardNav()
  35.     - keyboardAction()
  36.     - preloadNeighborImages()
  37.     - end()
  38.     
  39.     Function Calls
  40.     - document.observe()
  41.    
  42. */
  43. // -----------------------------------------------------------------------------------
  44.  
  45. //
  46. //  Configurationl
  47. //
  48. LightboxOptions = Object.extend({
  49.     fileLoadingImage:        'images/loading.gif',     
  50.     fileBottomNavCloseImage: 'images/closelabel.gif',
  51.  
  52.     overlayOpacity: 0.8,   // controls transparency of shadow overlay
  53.  
  54.     animate: true,         // toggles resizing animations
  55.     resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)
  56.  
  57.     borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable
  58.  
  59.     // When grouping images this is used to write: Image # of #.
  60.     // Change it for non-english localization
  61.     labelImage: "Image",
  62.     labelOf: "of"
  63. }, window.LightboxOptions || {});
  64.  
  65. // -----------------------------------------------------------------------------------
  66.  
  67. var Lightbox = Class.create();
  68.  
  69. Lightbox.prototype = {
  70.     imageArray: [],
  71.     activeImage: undefined,
  72.     
  73.     // initialize()
  74.     // Constructor runs on completion of the DOM loading. Calls updateImageList and then
  75.     // the function inserts html at the bottom of the page which is used to display the shadow 
  76.     // overlay and the image container.
  77.     //
  78.     initialize: function() {    
  79.         
  80.         this.updateImageList();
  81.         
  82.         this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
  83.  
  84.         if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
  85.         if (LightboxOptions.resizeSpeed < 1)  LightboxOptions.resizeSpeed = 1;
  86.  
  87.         this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
  88.         this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;  // shadow fade in/out duration
  89.  
  90.         // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
  91.         // If animations are turned off, it will be hidden as to prevent a flicker of a
  92.         // white 250 by 250 box.
  93.         var size = (LightboxOptions.animate ? 250 : 1) + 'px';
  94.         
  95.  
  96.         // Code inserts html at the bottom of the page that looks similar to this:
  97.         //
  98.         //  <div id="overlay"></div>
  99.         //  <div id="lightbox">
  100.         //      <div id="outerImageContainer">
  101.         //          <div id="imageContainer">
  102.         //              <img id="lightboxImage">
  103.         //              <div style="" id="hoverNav">
  104.         //                  <a href="#" id="prevLink"></a>
  105.         //                  <a href="#" id="nextLink"></a>
  106.         //              </div>
  107.         //              <div id="loading">
  108.         //                  <a href="#" id="loadingLink">
  109.         //                      <img src="images/loading.gif">
  110.         //                  </a>
  111.         //              </div>
  112.         //          </div>
  113.         //      </div>
  114.         //      <div id="imageDataContainer">
  115.         //          <div id="imageData">
  116.         //              <div id="imageDetails">
  117.         //                  <span id="caption"></span>
  118.         //                  <span id="numberDisplay"></span>
  119.         //              </div>
  120.         //              <div id="bottomNav">
  121.         //                  <a href="#" id="bottomNavClose">
  122.         //                      <img src="images/close.gif">
  123.         //                  </a>
  124.         //              </div>
  125.         //          </div>
  126.         //      </div>
  127.         //  </div>
  128.  
  129.  
  130.         var objBody = $$('body')[0];
  131.  
  132.         objBody.appendChild(Builder.node('div',{id:'overlay'}));
  133.     
  134.         objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
  135.             Builder.node('div',{id:'outerImageContainer'}, 
  136.                 Builder.node('div',{id:'imageContainer'}, [
  137.                     Builder.node('img',{id:'lightboxImage'}), 
  138.                     Builder.node('div',{id:'hoverNav'}, [
  139.                         Builder.node('a',{id:'prevLink', href: '#' }),
  140.                         Builder.node('a',{id:'nextLink', href: '#' })
  141.                     ]),
  142.                     Builder.node('div',{id:'loading'}, 
  143.                         Builder.node('a',{id:'loadingLink', href: '#' }, 
  144.                             Builder.node('img', {src: LightboxOptions.fileLoadingImage})
  145.                         )
  146.                     )
  147.                 ])
  148.             ),
  149.             Builder.node('div', {id:'imageDataContainer'},
  150.                 Builder.node('div',{id:'imageData'}, [
  151.                     Builder.node('div',{id:'imageDetails'}, [
  152.                         Builder.node('span',{id:'caption'}),
  153.                         Builder.node('span',{id:'numberDisplay'})
  154.                     ]),
  155.                     Builder.node('div',{id:'bottomNav'},
  156.                         Builder.node('a',{id:'bottomNavClose', href: '#' },
  157.                             Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
  158.                         )
  159.                     )
  160.                 ])
  161.             )
  162.         ]));
  163.  
  164.  
  165.         $('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
  166.         $('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
  167.         $('outerImageContainer').setStyle({ width: size, height: size });
  168.         $('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
  169.         $('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
  170.         $('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
  171.         $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
  172.  
  173.         var th = this;
  174.         (function(){
  175.             var ids = 
  176.                 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 
  177.                 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';   
  178.             $w(ids).each(function(id){ th[id] = $(id); });
  179.         }).defer();
  180.     },
  181.  
  182.     //
  183.     // updateImageList()
  184.     // Loops through anchor tags looking for 'lightbox' references and applies onclick
  185.     // events to appropriate links. You can rerun after dynamically adding images w/ajax.
  186.     //
  187.     updateImageList: function() {   
  188.         this.updateImageList = Prototype.emptyFunction;
  189.  
  190.         document.observe('click', (function(event){
  191.             var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
  192.             if (target) {
  193.                 event.stop();
  194.                 this.start(target);
  195.             }
  196.         }).bind(this));
  197.     },
  198.     
  199.     //
  200.     //  start()
  201.     //  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
  202.     //
  203.     start: function(imageLink) {    
  204.  
  205.         $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
  206.  
  207.         // stretch overlay to fill page and fade in
  208.         var arrayPageSize = this.getPageSize();
  209.         $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
  210.  
  211.         new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
  212.  
  213.         this.imageArray = [];
  214.         var imageNum = 0;       
  215.  
  216.         if ((imageLink.rel == 'lightbox')){
  217.             // if image is NOT part of a set, add single image to imageArray
  218.             this.imageArray.push([imageLink.href, imageLink.title]);         
  219.         } else {
  220.             // if image is part of a set..
  221.             this.imageArray = 
  222.                 $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
  223.                 collect(function(anchor){ return [anchor.href, anchor.title]; }).
  224.                 uniq();
  225.             
  226.             while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
  227.         }
  228.  
  229.         // calculate top and left offset for the lightbox 
  230.         var arrayPageScroll = document.viewport.getScrollOffsets();
  231.         var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
  232.         var lightboxLeft = arrayPageScroll[0];
  233.         this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
  234.         
  235.         this.changeImage(imageNum);
  236.     },
  237.  
  238.     //
  239.     //  changeImage()
  240.     //  Hide most elements and preload image in preparation for resizing image container.
  241.     //
  242.     changeImage: function(imageNum) {   
  243.         
  244.         this.activeImage = imageNum; // update global var
  245.  
  246.         // hide elements during transition
  247.         if (LightboxOptions.animate) this.loading.show();
  248.         this.lightboxImage.hide();
  249.         this.hoverNav.hide();
  250.         this.prevLink.hide();
  251.         this.nextLink.hide();
  252.         // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
  253.         this.imageDataContainer.setStyle({opacity: .0001});
  254.         this.numberDisplay.hide();      
  255.         
  256.         var imgPreloader = new Image();
  257.         
  258.         // once image is preloaded, resize image container
  259.  
  260.  
  261.         imgPreloader.onload = (function(){
  262.             this.lightboxImage.src = this.imageArray[this.activeImage][0];
  263.             this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
  264.         }).bind(this);
  265.         imgPreloader.src = this.imageArray[this.activeImage][0];
  266.     },
  267.  
  268.     //
  269.     //  resizeImageContainer()
  270.     //
  271.     resizeImageContainer: function(imgWidth, imgHeight) {
  272.  
  273.         // get current width and height
  274.         var widthCurrent  = this.outerImageContainer.getWidth();
  275.         var heightCurrent = this.outerImageContainer.getHeight();
  276.  
  277.         // get new width and height
  278.         var widthNew  = (imgWidth  + LightboxOptions.borderSize * 2);
  279.         var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
  280.  
  281.         // scalars based on change from old to new
  282.         var xScale = (widthNew  / widthCurrent)  * 100;
  283.         var yScale = (heightNew / heightCurrent) * 100;
  284.  
  285.         // calculate size difference between new and old image, and resize if necessary
  286.         var wDiff = widthCurrent - widthNew;
  287.         var hDiff = heightCurrent - heightNew;
  288.  
  289.         if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'}); 
  290.         if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}); 
  291.  
  292.         // if new and old image are same size and no scaling transition is necessary, 
  293.         // do a quick pause to prevent image flicker.
  294.         var timeout = 0;
  295.         if ((hDiff == 0) && (wDiff == 0)){
  296.             timeout = 100;
  297.             if (Prototype.Browser.IE) timeout = 250;   
  298.         }
  299.  
  300.         (function(){
  301.             this.prevLink.setStyle({ height: imgHeight + 'px' });
  302.             this.nextLink.setStyle({ height: imgHeight + 'px' });
  303.             this.imageDataContainer.setStyle({ width: widthNew + 'px' });
  304.  
  305.             this.showImage();
  306.         }).bind(this).delay(timeout / 1000);
  307.     },
  308.     
  309.     //
  310.     //  showImage()
  311.     //  Display image and begin preloading neighbors.
  312.     //
  313.     showImage: function(){
  314.         this.loading.hide();
  315.         new Effect.Appear(this.lightboxImage, { 
  316.             duration: this.resizeDuration, 
  317.             queue: 'end', 
  318.             afterFinish: (function(){ this.updateDetails(); }).bind(this) 
  319.         });
  320.         this.preloadNeighborImages();
  321.     },
  322.  
  323.     //
  324.     //  updateDetails()
  325.     //  Display caption, image number, and bottom nav.
  326.     //
  327.     updateDetails: function() {
  328.     
  329.         // if caption is not null
  330.         if (this.imageArray[this.activeImage][1] != ""){
  331.             this.caption.update(this.imageArray[this.activeImage][1]).show();
  332.         }
  333.         
  334.         // if image is part of set display 'Image x of x' 
  335.         if (this.imageArray.length > 1){
  336.             this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length).show();
  337.         }
  338.  
  339.         new Effect.Parallel(
  340.             [ 
  341.                 new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), 
  342.                 new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration }) 
  343.             ], 
  344.             { 
  345.                 duration: this.resizeDuration, 
  346.                 afterFinish: (function() {
  347.                     // update overlay size and update nav
  348.                     var arrayPageSize = this.getPageSize();
  349.                     this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
  350.                     this.updateNav();
  351.                 }).bind(this)
  352.             } 
  353.         );
  354.     },
  355.  
  356.     //
  357.     //  updateNav()
  358.     //  Display appropriate previous and next hover navigation.
  359.     //
  360.     updateNav: function() {
  361.  
  362.         this.hoverNav.show();               
  363.  
  364.         // if not first image in set, display prev image button
  365.         if (this.activeImage > 0) this.prevLink.show();
  366.  
  367.         // if not last image in set, display next image button
  368.         if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
  369.         
  370.         this.enableKeyboardNav();
  371.     },
  372.  
  373.     //
  374.     //  enableKeyboardNav()
  375.     //
  376.     enableKeyboardNav: function() {
  377.         document.observe('keydown', this.keyboardAction); 
  378.     },
  379.  
  380.     //
  381.     //  disableKeyboardNav()
  382.     //
  383.     disableKeyboardNav: function() {
  384.         document.stopObserving('keydown', this.keyboardAction); 
  385.     },
  386.  
  387.     //
  388.     //  keyboardAction()
  389.     //
  390.     keyboardAction: function(event) {
  391.         var keycode = event.keyCode;
  392.  
  393.         var escapeKey;
  394.         if (event.DOM_VK_ESCAPE) {  // mozilla
  395.             escapeKey = event.DOM_VK_ESCAPE;
  396.         } else { // ie
  397.             escapeKey = 27;
  398.         }
  399.  
  400.         var key = String.fromCharCode(keycode).toLowerCase();
  401.         
  402.         if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
  403.             this.end();
  404.         } else if ((key == 'p') || (keycode == 37)){ // display previous image
  405.             if (this.activeImage != 0){
  406.                 this.disableKeyboardNav();
  407.                 this.changeImage(this.activeImage - 1);
  408.             }
  409.         } else if ((key == 'n') || (keycode == 39)){ // display next image
  410.             if (this.activeImage != (this.imageArray.length - 1)){
  411.                 this.disableKeyboardNav();
  412.                 this.changeImage(this.activeImage + 1);
  413.             }
  414.         }
  415.     },
  416.  
  417.     //
  418.     //  preloadNeighborImages()
  419.     //  Preload previous and next images.
  420.     //
  421.     preloadNeighborImages: function(){
  422.         var preloadNextImage, preloadPrevImage;
  423.         if (this.imageArray.length > this.activeImage + 1){
  424.             preloadNextImage = new Image();
  425.             preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
  426.         }
  427.         if (this.activeImage > 0){
  428.             preloadPrevImage = new Image();
  429.             preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
  430.         }
  431.     
  432.     },
  433.  
  434.     //
  435.     //  end()
  436.     //
  437.     end: function() {
  438.         this.disableKeyboardNav();
  439.         this.lightbox.hide();
  440.         new Effect.Fade(this.overlay, { duration: this.overlayDuration });
  441.         $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
  442.     },
  443.  
  444.     //
  445.     //  getPageSize()
  446.     //
  447.     getPageSize: function() {
  448.             
  449.          var xScroll, yScroll;
  450.         
  451.         if (window.innerHeight && window.scrollMaxY) {    
  452.             xScroll = window.innerWidth + window.scrollMaxX;
  453.             yScroll = window.innerHeight + window.scrollMaxY;
  454.         } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
  455.             xScroll = document.body.scrollWidth;
  456.             yScroll = document.body.scrollHeight;
  457.         } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  458.             xScroll = document.body.offsetWidth;
  459.             yScroll = document.body.offsetHeight;
  460.         }
  461.         
  462.         var windowWidth, windowHeight;
  463.         
  464.         if (self.innerHeight) {    // all except Explorer
  465.             if(document.documentElement.clientWidth){
  466.                 windowWidth = document.documentElement.clientWidth; 
  467.             } else {
  468.                 windowWidth = self.innerWidth;
  469.             }
  470.             windowHeight = self.innerHeight;
  471.         } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  472.             windowWidth = document.documentElement.clientWidth;
  473.             windowHeight = document.documentElement.clientHeight;
  474.         } else if (document.body) { // other Explorers
  475.             windowWidth = document.body.clientWidth;
  476.             windowHeight = document.body.clientHeight;
  477.         }    
  478.         
  479.         // for small pages with total height less then height of the viewport
  480.         if(yScroll < windowHeight){
  481.             pageHeight = windowHeight;
  482.         } else { 
  483.             pageHeight = yScroll;
  484.         }
  485.     
  486.         // for small pages with total width less then width of the viewport
  487.         if(xScroll < windowWidth){    
  488.             pageWidth = xScroll;        
  489.         } else {
  490.             pageWidth = windowWidth;
  491.         }
  492.  
  493.         return [pageWidth,pageHeight];
  494.     }
  495. }
  496.  
  497. document.observe('dom:loaded', function () { new Lightbox(); });