X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=ux%2FLightbox.js;h=46273de325a2fe412be5b8e7f9b64894a9d0ce11;hb=5f0c20d0c4e6eb4fb63ad64ac5dd3323de1b6c0c;hp=b6b677d98929da363241d9d532d77957f9836602;hpb=3aca00268f2a326b2ba329cc4362ddfbcccb181e;p=roojs1 diff --git a/ux/Lightbox.js b/ux/Lightbox.js index b6b677d989..46273de325 100644 --- a/ux/Lightbox.js +++ b/ux/Lightbox.js @@ -86,7 +86,8 @@ Roo.apply(Roo.ux.Lightbox.prototype, /** - * List of images + * Array of images Roo.Elements (which should be images) + * properties can be */ imageArray: false, @@ -113,8 +114,8 @@ Roo.apply(Roo.ux.Lightbox.prototype, this.resizeSpeed = Math.min(this.resizeSpeed, 10); this.resizeSpeed = Math.max(this.resizeSpeed, 1); - this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0; - this.overlayDuration = this.animate ? 0.2 : 0; // shadow fade in/out duration + this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0; + this.overlayDuration = this.animate ? 0.2 : 0; // shadow fade in/out duration // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension. // If animations are turned off, it will be hidden as to prevent a flicker of a @@ -311,7 +312,7 @@ Roo.apply(Roo.ux.Lightbox.prototype, position: 'absolute', top: '0px', width: '100%', - 'z-index': '90' + 'z-index': '40999' } }); }, @@ -356,8 +357,12 @@ Roo.apply(Roo.ux.Lightbox.prototype, // stretch overlay to fill page and fade in //var arrayPageSize = this.getPageSize(); - this.overlay.setHeight(Roo.lib.Dom.getDocumentHeight()) ; - this.overlay.setWidth(Roo.lib.Dom.getDocumentWidth()); + this.onResize(); + if (!this.resizer) { + this.resizer = Roo.EventManager.onWindowResize(this.onResize, this, true);; + } + + this.overlay.fadeIn({ endOpacity: this.overlayOpacity, easing: 'easeOut', @@ -365,7 +370,7 @@ Roo.apply(Roo.ux.Lightbox.prototype, }); //this.imageArray = []; - var imageNum = 0; + var imageNum = -1; if (imageLink) { imageLink = Roo.get(imageLink); @@ -376,8 +381,13 @@ Roo.apply(Roo.ux.Lightbox.prototype, imageNum = i; } }); + if (imageNum < 0) { + + this.imageArray.push(imageLink); + imageNum = this.imageArray.length-1; + } } - + // let's assume the constructor sorts out the list of images.. /* if ((imageLink.rel == 'lightbox')){ @@ -398,13 +408,13 @@ Roo.apply(Roo.ux.Lightbox.prototype, // weird.. why / 10? //var lightboxTop = s.top + (Roo.lib.Dom.getViewHeight() / 10); - var lightboxTop = (Roo.lib.Dom.getViewHeight() / 10); - var lightboxLeft = s.left + var lightboxTop = (Roo.lib.Dom.getViewHeight() / 10) + document.body.scrollTop; + var lightboxLeft = s.left; this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' , - zIndex : 1000 - }) + zIndex : 41000 + }); //console.log("show lightbox"); this.lightbox.show(); @@ -412,6 +422,11 @@ Roo.apply(Roo.ux.Lightbox.prototype, this.changeImage(imageNum); }, + onResize : function() + { + this.overlay.setHeight(Roo.lib.Dom.getDocumentHeight()) ; + this.overlay.setWidth(Roo.lib.Dom.getDocumentWidth()); + }, // // changeImage() // Hide most elements and preload image in preparation for resizing image container. @@ -423,7 +438,7 @@ Roo.apply(Roo.ux.Lightbox.prototype, // hide elements during transition if (this.animate) { this.loading.setStyle({ - zIndex :1200 + zIndex : 41200 }); this.loading.show(); this.loadinglink.setX( (Roo.lib.Dom.getViewWidth() / 2) - 16); @@ -444,13 +459,15 @@ Roo.apply(Roo.ux.Lightbox.prototype, imgPreloader.on('load', function() { - this.lightboximage.dom.src = this.imageArray[this.activeImage].href || + this.lightboximage.dom.src = this.imageArray[this.activeImage].srcfull || this.imageArray[this.activeImage].href || this.imageArray[this.activeImage].dom.href || this.imageArray[this.activeImage].dom.src; - this.resizeImageContainer(this.imageArray[this.activeImage].dom.lwidth || imgPreloader.getWidth(), this.imageArray[this.activeImage].dom.lheight || imgPreloader.getHeight()); + this.resizeImageContainer(this.imageArray[this.activeImage].dom.lwidth || imgPreloader.getWidth(), + this.imageArray[this.activeImage].dom.lheight || imgPreloader.getHeight()); imgPreloader.remove(); }, this); - imgPreloader.dom.src = this.imageArray[this.activeImage].href || + Roo.log(this.imageArray[this.activeImage]); + imgPreloader.dom.src = this.imageArray[this.activeImage].srcfull || this.imageArray[this.activeImage].href || this.imageArray[this.activeImage].dom.href || this.imageArray[this.activeImage].dom.src; }, @@ -482,8 +499,7 @@ Roo.apply(Roo.ux.Lightbox.prototype, var widthNew = imgWidth + bs; var heightNew = imgHeight + bs; - Roo.log(widthNew); - Roo.log(ww); + if (widthNew > ww || heightNew > wh) { // bigger than window. // scale here... - bit nasty.. @@ -516,7 +532,7 @@ Roo.apply(Roo.ux.Lightbox.prototype, 'easeOut', // easing 'run' // effect - ) + ); // if new and old image are same size and no scaling transition is necessary, @@ -524,7 +540,9 @@ Roo.apply(Roo.ux.Lightbox.prototype, var timeout = 0; if ((hDiff == 0) && (wDiff == 0)){ timeout = 100; - if (Roo.isIE) timeout = 250; + if (Roo.isIE) { + timeout = 250; + } } (function(){ @@ -572,7 +590,7 @@ Roo.apply(Roo.ux.Lightbox.prototype, // if image is part of set display 'Image x of x' if (this.imageArray.length > 1){ this.numberdisplay.update( - this.labelImage + ' ' + (this.activeImage + 1) + ' ' + this.labelOf + ' ' + this.imageArray.length) + this.labelImage + ' ' + (this.activeImage + 1) + ' ' + this.labelOf + ' ' + this.imageArray.length); this.numberdisplay.show(); } var _this = this; @@ -601,10 +619,14 @@ Roo.apply(Roo.ux.Lightbox.prototype, this.hovernav.show(); // if not first image in set, display prev image button - if (this.activeImage > 0) this.prevlink.show(); + if (this.activeImage > 0) { + this.prevlink.show(); + } // if not last image in set, display next image button - if (this.activeImage < (this.imageArray.length - 1)) this.nextlink.show(); + if (this.activeImage < (this.imageArray.length - 1)) { + this.nextlink.show(); + } this.enableKeyboardNav(); },