git.roojs.org Git - roojs1/blob - ux/Lightbox.js

   1 /* <script type="text/javascript">
   2 // -----------------------------------------------------------------------------------
   3 // Roo lightbox - based on..
   4 //
   5 //      Lightbox v2.04
   6 //      by Lokesh Dhakar - http://www.lokeshdhakar.com
   7 //      Last Modification: 2/9/08
   8 //
   9 //      For more information, visit:
  10 //      http://lokeshdhakar.com/projects/lightbox2/
  11 //
  12 //      Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
  13 //      - Free for use in both personal and commercial projects
  14 //              - Attribution requires leaving author name, author link, and the license info intact.
  15 //
  16 //  Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
  17 //              Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
  18 //
  19 // -----------------------------------------------------------------------------------
  20 /*
  21
  22     Table of Contents
  23     -----------------
  24     Configuration
  25
  26     Lightbox Class Declaration
  27     - initialize()
  28     - updateImageList()
  29     - start()
  30     - changeImage()
  31     - resizeImageContainer()
  32     - showImage()
  33     - updateDetails()
  34     - updateNav()
  35     - enableKeyboardNav()
  36     - disableKeyboardNav()
  37     - keyboardAction()
  38     - preloadNeighborImages()
  39     - end()
  40
  41     Function Calls
  42     - document.observe()
  43
  44 */
  45 Roo.namespace('Roo.ux');
  46
  47 Roo.ux.Lightbox = function(cfg) {
  48     this.imageArray = [];
  49     Roo.apply(this,cfg);
  50     this.initialize();
  51 }
  52
  53 Roo.apply(Roo.ux.Lightbox.prototype,
  54 {
  55     // optiosn..
  56     /**
  57      * @cfg fileLoadingImage {string} loading image
  58      */
  59     fileLoadingImage:        '/lightbox/images/loading.gif',
  60     /**
  61      * @cfg fileBottomNavCloseImage {string} close image
  62      */
  63     fileBottomNavCloseImage: '/lightbox/images/closelabel.gif',
  64     /**
  65      * @cfg overlayOpacity {number} controls transparency of shadow overlay
  66      */
  67     overlayOpacity: 0.8,
  68     /**
  69      * @cfg fileLoadingImage {boolean} toggles resizing animations
  70      */
  71     animate: true,
  72     /**
  73      * @cfg resizeSpeed {number} controls the speed of the image
  74      * resizing animations (1=slowest and 10=fastest)
  75      */
  76     resizeSpeed: 9,
  77     /**
  78      * @cfg borderSize {number} if you adjust the padding in the CSS,
  79      * you will need to update this variable
  80      */
  81     borderSize: 10,
  82     /**
  83      * @cfg labelImage {string} When grouping images this is used to write: Image # of #.
  84      * Change it for non-english localization
  85      */
  86         labelImage: "Image",
  87         /**
  88      * @cfg labelOf {string}  When grouping images this is used to write: Image # of #.
  89      */
  90     labelOf: "of",
  91
  92
  93
  94
  95     /**
  96      * List of images
  97      */
  98     imageArray: false,
  99
 100     /**
 101      * Current image.
 102      *
 103      */
 104
 105     activeImage: undefined,
 106
 107     /**
 108      * initialize()
 109      *  Constructor runs on completion of the DOM loading. Calls updateImageList and then
 110      * the function inserts html at the bottom of the page which is used to display the shadow
 111      *  overlay and the image container.
 112      *
 113      *
 114      */
 115     initialize: function() {
 116
 117         this.updateImageList();
 118
 119         // TBD this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
 120         this.resizeSpeed  = Math.min(this.resizeSpeed, 10);
 121         this.resizeSpeed  = Math.max(this.resizeSpeed, 1);
 122
 123             this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
 124             this.overlayDuration = this.animate ? 0.2 : 0;  // shadow fade in/out duration
 125
 126         // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
 127         // If animations are turned off, it will be hidden as to prevent a flicker of a
 128         // white 250 by 250 box.
 129         var size = (this.animate ? 250 : 1) + 'px';
 130         var dh = Roo.DomHelper;
 131         this.el = dh.append(document.body, {
 132                 html:
 133                //   '<div id="overlay"></div>' +
 134                   '<div id="lightbox">' +
 135                   '   <div id="outerImageContainer">' +
 136                   '       <div id="imageContainer">' +
 137                   '           <img id="lightboxImage">' +
 138                   '           <div style="" id="hoverNav">' +
 139                   '               <a href="#" id="prevLink"></a>' +
 140                   '               <a href="#" id="nextLink"></a>' +
 141                   '           </div>' +
 142                   '           <div id="loading">' +
 143                   '               <a href="#" id="loadingLink">&nbsp;</a>' +
 144                   '           </div>' +
 145                   '       </div>' +
 146                   '   </div>' +
 147                   '   <div id="imageDataContainer">' +
 148                   '       <div id="imageData">' +
 149                   '           <div id="imageDetails">' +
 150                   '               <span id="caption"></span>' +
 151                   '               <span id="numberDisplay"></span>' +
 152                   '           </div>' +
 153                   '           <div id="bottomNav">' +
 154                   '               <div href="#" id="bottomNavClose"></div>' +
 155                   '           </div>' +
 156                   '       </div>' +
 157                   '   </div>' +
 158                  '</div>'
 159             }, true);
 160
 161
 162
 163         var th = this;
 164
 165         var ids =
 166             'lightbox outerImageContainer imageContainer ' +
 167             'lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
 168             'imageDataContainer imageData imageDetails caption numberDisplay '
 169             'bottomNav bottomNavClose';
 170
 171         Roo.each(ids.split(' '),
 172             function(id){
 173
 174                 th[id] = Roo.get(id);
 175                 if (!th[id]) {
 176                     return;
 177                    }
 178                 th[id].setVisibilityMode(Roo.Element.DISPLAY);
 179             });
 180
 181
 182                 //Roo.get('overlay').hide();
 183         //Roo.get('overlay').on('click', this.end, this);
 184                 Roo.get('lightbox').hide();
 185         Roo.get('lightbox').on('click',  function(event) {
 186                 if (event.getTarget().id == 'lightbox') {
 187                     this.end();
 188                 }
 189             }, this);
 190
 191                 Roo.get('outerImageContainer').setStyle({ width: size, height: size });
 192
 193                 Roo.get('prevLink').on('click',
 194             function(event) {
 195                 event.stopEvent();
 196                 this.changeImage(this.activeImage - 1);
 197             }, this);
 198
 199                 Roo.get('nextLink').on('click',
 200             function(event) {
 201                 event.stopEvent();
 202                 this.changeImage(this.activeImage + 1);
 203             },this);
 204
 205                 Roo.get('loadingLink').on('click',
 206             function(event) {
 207                 event.stopEvent();
 208                 this.end();
 209             }, this);
 210
 211                 Roo.get('bottomNavClose').on('click',
 212             function(event) {
 213                 event.stopEvent();
 214                 this.end();
 215             }, this);
 216
 217
 218     },
 219
 220     initializeCSS: function() {
 221         if (typeof(Roo.ux.Lightbox.css) != 'undefined') {
 222             return;
 223         }
 224         Roo.ux.Lightbox.css = Roo.util.CSS.createStyleSheet( {
 225             '.roo-lightbox' : {
 226                 position: 'absolute',
 227                 left: 0,
 228                 width: '100%',
 229                 'text-align': 'center',
 230                 'line-height': 0,
 231             },
 232             '.roo-lightbox a img' : { border: 'none'  },
 233             '.roo-lightbox .outerImageContainer' : {
 234                 position: 'relative';
 235                 'background-color': '#fff';
 236                 width: '250px',
 237                 height: '250px',
 238                 margin: '0 auto'
 239             }
 240         #imageContainer{ padding: 10px; }
 241
 242         #loading{
 243             position: absolute;
 244             top: 40%;
 245             left: 0%;
 246             height: 25%;
 247             width: 100%;
 248             text-align:
 249             center;
 250             line-height: 0;
 251         }
 252         #loading a {
 253             background: url(../images/loading.gif) 0 0 no-repeat;
 254             display: block;
 255             width: 32px;
 256             height: 32px;
 257              cursor: pointer;
 258         }
 259         #bottomNavClose {
 260             background: url(../images/close.gif) 0 0 no-repeat;
 261             height:26px;
 262             width:26px;
 263             cursor: pointer;
 264         }
 265         #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
 266         #imageContainer>#hoverNav{ left: 0;}
 267         #hoverNav a{ outline: none;}
 268
 269         #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
 270         #prevLink { left: 0; float: left;}
 271         #nextLink { right: 0; float: right;}
 272         #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
 273         #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
 274
 275         #i
 276
 277     /**
 278      * updateImageList()
 279      * Loops through anchor tags looking for 'lightbox' references and applies onclick
 280      * events to appropriate links. You can rerun after dynamically adding images w/ajax.
 281      *
 282      */
 283     updateImageList: function() {
 284         this.updateImageList = Roo.emptyFn;
 285         if (this.imageArray.length) {
 286             return;
 287         }
 288         Roo.each(Roo.DomQuery.select('a[rel^=lightbox]'), function(e) {
 289             this.imageArray.push(Roo.get(e));
 290             Roo.get(e).on('click', (function(event, tg, tga,tgb) {
 291
 292
 293                 event.stopEvent();
 294                 this.start(tgb);
 295             }).createDelegate(this, [e], true));
 296         }, this)
 297
 298     },
 299
 300     /**
 301     * start()
 302     *  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
 303     */
 304     start: function(imageLink) {
 305         /*
 306         // hide all the objects that cause problems..
 307         $$('select', 'object', 'embed').each(
 308             function(node){
 309             node.style.visibility = 'hidden' }
 310         );
 311         */
 312         // stretch overlay to fill page and fade in
 313         //var arrayPageSize = this.getPageSize();
 314         Roo.get(document.body).mask(false);
 315         Roo.get(document.body)._mask.setHeight(Roo.lib.Dom.getDocumentHeight())
 316         //new Effect.Appear(this.overlay,
 317         //    { duration: this.overlayDuration, from: 0.0, to: this.overlayOpacity });
 318
 319         //this.imageArray = [];
 320         var imageNum = 0;
 321
 322         if (imageLink) {
 323             imageLink = Roo.get(imageLink);
 324             //console.log(imageLink.id);
 325             Roo.each(this.imageArray, function (e, i) {
 326               //  console.log(e.id);
 327                 if (e.id == imageLink.id) {
 328                     imageNum = i;
 329                 }
 330             });
 331         }
 332
 333         // let's assume the constructor sorts out the list of images..
 334         /*
 335         if ((imageLink.rel == 'lightbox')){
 336             // if image is NOT part of a set, add single image to imageArray
 337             this.imageArray.push([imageLink.href, imageLink.title]);
 338         } else {
 339             // if image is part of a set..
 340             this.imageArray =
 341                 $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
 342                 collect(function(anchor){ return [anchor.href, anchor.title]; }).
 343                 uniq();
 344
 345             while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
 346         }
 347         */
 348         var s = Roo.get(document).getScroll();
 349
 350         // calculate top and left offset for the lightbox
 351         // weird.. why / 10?
 352         var lightboxTop = s.top + (Roo.lib.Dom.getViewHeight() / 10);
 353         var lightboxLeft = s.left
 354         this.lightbox.setStyle({
 355             top: lightboxTop + 'px',
 356             left: lightboxLeft + 'px' ,
 357             zIndex : Roo.get(document.body)._mask.getStyle('zIndex') * 1.1
 358         })
 359         //console.log("show lightbox");
 360         this.lightbox.show();
 361
 362
 363
 364         this.changeImage(imageNum);
 365     },
 366
 367     //
 368     //  changeImage()
 369     //  Hide most elements and preload image in preparation for resizing image container.
 370     //
 371     changeImage: function(imageNum) {
 372
 373         this.activeImage = imageNum; // update global var
 374
 375         // hide elements during transition
 376         if (this.animate) {
 377             this.loading.setStyle({
 378                 zIndex : Roo.get(document.body)._mask.getStyle('zIndex') * 1.2
 379             });
 380             this.loading.show();
 381             this.loadingLink.setX( (Roo.lib.Dom.getViewWidth() / 2) - 16);
 382             //this.loadingLink.show();
 383             // center the loading?
 384
 385         }
 386
 387         this.hoverNav.hide();
 388         this.prevLink.hide();
 389         this.nextLink.hide();
 390                 // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
 391         this.imageDataContainer.setStyle({opacity: .0001});
 392         this.numberDisplay.hide();
 393
 394         var imgPreloader =  Roo.DomHelper.append(document.body, { tag: 'img' } , true);
 395         // once image is preloaded, resize image container
 396
 397
 398         imgPreloader.on('load', function() {
 399
 400             this.lightboxImage.dom.src = this.imageArray[this.activeImage].dom.href;
 401
 402             this.resizeImageContainer(imgPreloader.getWidth(), imgPreloader.getHeight());
 403             imgPreloader.remove();
 404         }, this);
 405         imgPreloader.dom.src = this.imageArray[this.activeImage].dom.href;
 406     },
 407
 408     //
 409     //  resizeImageContainer()
 410     //
 411     resizeImageContainer: function(imgWidth, imgHeight) {
 412
 413         // make sure we have some sensible sizes..
 414         imgWidth = Math.max(50, imgWidth);
 415         imgHeight = Math.max(50, imgHeight);
 416
 417         // get current width and height
 418         var widthCurrent  = this.outerImageContainer.getWidth();
 419         var heightCurrent = this.outerImageContainer.getHeight();
 420
 421         //fixme need better calcs.
 422         var w = window;
 423         var ww = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
 424         var wh = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
 425
 426         ww -= 150;
 427         wh -= 150;
 428         // get new width and height
 429         var bs =  this.borderSize * 2;
 430
 431         var widthNew  =  imgWidth  + bs;
 432         var heightNew =  imgHeight + bs;
 433
 434         if (widthNew > ww || heightNew > wh) {
 435             // bigger than window.
 436             // scale here... - bit nasty..
 437             var rescale = 1.1 * Math.max( widthNew / ww , heightNew  / wh);
 438              //console.log(rescale);
 439             imgWidth = Math.floor(imgWidth / rescale);
 440             imgHeight = Math.floor(imgHeight / rescale);
 441             widthNew  =  imgWidth  + bs;
 442             heightNew =  imgHeight + bs;
 443
 444
 445         }
 446
 447         this.lightboxImage.set( { width : imgWidth, height : imgHeight });
 448
 449
 450         // scalars based on change from old to new
 451         var xScale = (widthNew  / widthCurrent)  * 100;
 452         var yScale = (heightNew / heightCurrent) * 100;
 453
 454         // calculate size difference between new and old image, and resize if necessary
 455         var wDiff = widthCurrent - widthNew;
 456         var hDiff = heightCurrent - heightNew;
 457
 458
 459         this.outerImageContainer.animate(
 460             { width: {to: widthNew}, height: {to: heightNew} },
 461             this.resizeDuration,
 462             null, // on complete
 463             'easeOut', // easing
 464             'run' // effect
 465
 466         )
 467
 468
 469         // if new and old image are same size and no scaling transition is necessary,
 470         // do a quick pause to prevent image flicker.
 471         var timeout = 0;
 472         if ((hDiff == 0) && (wDiff == 0)){
 473             timeout = 100;
 474             if (Roo.isIE) timeout = 250;
 475         }
 476
 477         (function(){
 478             this.prevLink.setStyle({ height: imgHeight + 'px' });
 479             this.nextLink.setStyle({ height: imgHeight + 'px' });
 480             this.imageDataContainer.setStyle({ width: widthNew + 'px'}); // the text area..
 481             this.showImage();
 482         }).defer(timeout / 1000, this);
 483     },
 484
 485     //
 486     //  showImage()
 487     //  Display image and begin preloading neighbors.
 488     //
 489     showImage: function(){
 490
 491         this.loading.hide();
 492         //this.loadingLink.hide();
 493         var _this=  this;
 494         this.lightboxImage.animate(
 495             {
 496                 opacity : {  to: 1.0 }
 497             },
 498             this.resizeDuration,
 499             function(){
 500                 _this.updateDetails();
 501             }
 502
 503         );
 504         this.preloadNeighborImages();
 505     },
 506
 507     //
 508     //  updateDetails()
 509     //  Display caption, image number, and bottom nav.
 510     //
 511     updateDetails: function() {
 512
 513         // if caption is not null
 514         if (this.imageArray[this.activeImage].dom.title  != ""){
 515             this.caption.update(this.imageArray[this.activeImage].dom.title);
 516             this.caption.show();
 517         }
 518
 519         // if image is part of set display 'Image x of x'
 520         if (this.imageArray.length > 1){
 521             this.numberDisplay.update(
 522                 this.labelImage + ' ' + (this.activeImage + 1) + ' ' + this.labelOf + '  ' + this.imageArray.length)
 523             this.numberDisplay.show();
 524         }
 525         var _this = this;
 526         this.imageDataContainer.animate(
 527             {
 528                 //slide down ?: , from: 0.0, to: 1.0
 529                 opacity :  {  to: 1.0 }
 530             },
 531             this.resizeDuration,
 532             function() {
 533                         // update overlay size and update nav
 534                         //var arrayPageSize = this.getPageSize();
 535                         //this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
 536                         _this.updateNav();
 537             }
 538
 539         );
 540     },
 541
 542     //
 543     //  updateNav()
 544     //  Display appropriate previous and next hover navigation.
 545     //
 546     updateNav: function() {
 547
 548         this.hoverNav.show();
 549
 550         // if not first image in set, display prev image button
 551         if (this.activeImage > 0) this.prevLink.show();
 552
 553         // if not last image in set, display next image button
 554         if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
 555
 556         this.enableKeyboardNav();
 557     },
 558
 559     //
 560     //  enableKeyboardNav()
 561     //
 562     enableKeyboardNav: function() {
 563         Roo.get(document.body).on('keydown', this.keyboardAction, this);
 564     },
 565
 566     //
 567     //  disableKeyboardNav()
 568     //
 569     disableKeyboardNav: function() {
 570         Roo.get(document.body).un('keydown', this.keyboardAction, this);
 571     },
 572
 573     //
 574     //  keyboardAction()
 575     //
 576     keyboardAction: function(event) {
 577         var keycode = event.keyCode;
 578
 579         var escapeKey;
 580         if (event.DOM_VK_ESCAPE) {  // mozilla
 581             escapeKey = event.DOM_VK_ESCAPE;
 582         } else { // ie
 583             escapeKey = 27;
 584         }
 585
 586         var key = String.fromCharCode(keycode).toLowerCase();
 587
 588         if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
 589             this.end();
 590         } else if ((key == 'p') || (keycode == 37)){ // display previous image
 591             if (this.activeImage != 0){
 592                 this.disableKeyboardNav();
 593                 this.changeImage(this.activeImage - 1);
 594             }
 595         } else if ((key == 'n') || (keycode == 39)){ // display next image
 596             if (this.activeImage != (this.imageArray.length - 1)){
 597                 this.disableKeyboardNav();
 598                 this.changeImage(this.activeImage + 1);
 599             }
 600         }
 601     },
 602
 603     //
 604     //  preloadNeighborImages()
 605     //  Preload previous and next images.
 606     //
 607     preloadNeighborImages: function(){
 608         var preloadNextImage, preloadPrevImage;
 609         if (this.imageArray.length > this.activeImage + 1){
 610             preloadNextImage = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
 611             preloadNextImage.on('load', function() { preloadNextImage.remove() });
 612             preloadNextImage.dom.src = this.imageArray[this.activeImage + 1].dom.href;
 613         }
 614         if (this.activeImage > 0){
 615             preloadPrevImage = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
 616             preloadPrevImage.on('load', function() { preloadPrevImage.remove() });
 617             preloadPrevImage.dom.src = this.imageArray[this.activeImage - 1].dom.href;
 618         }
 619
 620     },
 621
 622     //
 623     //  end()
 624     //
 625     end: function() {
 626         this.disableKeyboardNav();
 627         //console.log('lightbox hide');
 628         this.lightbox.hide();
 629         this.loading.hide();
 630         Roo.get(document.body).unmask();
 631         // show all the objects that cause problems..
 632         //$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
 633     }
 634
 635
 636 });
 637