X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=ux%2FLightbox.js;h=1091755dfb5fcba916cee82a076bcdeb14737d7a;hb=0b69a11b1055a6d3a3fd0719bdd58b5a235de0e4;hp=b62c43b6449803fe599ad3523754a468f4b68dca;hpb=02f6ce5f5417c63f3165e94ad6b3c2cf43edfc07;p=roojs1

diff --git a/ux/Lightbox.js b/ux/Lightbox.js
index b62c43b644..1091755dfb 100644
--- a/ux/Lightbox.js
+++ b/ux/Lightbox.js
@@ -53,20 +53,13 @@ Roo.ux.Lightbox = function(cfg) {
 Roo.apply(Roo.ux.Lightbox.prototype,  
 {
     // optiosn..
-    /**
-     * @cfg fileLoadingImage {string} loading image
-     */
-    fileLoadingImage:        '/lightbox/images/loading.gif',     
-    /**
-     * @cfg fileBottomNavCloseImage {string} close image
-     */
-    fileBottomNavCloseImage: '/lightbox/images/closelabel.gif',
+     
     /**
      * @cfg overlayOpacity {number} controls transparency of shadow overlay
      */
     overlayOpacity: 0.8,   
     /**
-     * @cfg fileLoadingImage {boolean} toggles resizing animations
+     * @cfg animate {boolean} toggles resizing animations
      */
     animate: true,          
     /**
@@ -170,7 +163,6 @@ Roo.apply(Roo.ux.Lightbox.prototype,
         Roo.each(ids.split(' '), 
             function(id){ 
                 var vid = id.replace(/\-/g,'');
-                Roo.log(id);
                 th[vid] = th.el.child('.'+id); 
                 if (!th[vid]) {
                     return;
@@ -185,7 +177,7 @@ Roo.apply(Roo.ux.Lightbox.prototype,
          
 		this.lightbox.hide();
         this.lightbox.on('click',  function(event) { 
-                if (Roo.get(event.getTarget()).hasClass('lightbox')) {
+                 if (Roo.get(event.getTarget()).hasClass('roo-lightbox')) {
                     this.end(); 
                 }
             }, this);
@@ -228,13 +220,15 @@ Roo.apply(Roo.ux.Lightbox.prototype,
         if (typeof(Roo.ux.Lightbox.css) != 'undefined') {
             return;
         }
+        var rootURL = Roo.BLANK_IMAGE_URL.replace(/\/gray\/s\.gif$/, '');
+        
         Roo.ux.Lightbox.css = Roo.util.CSS.createStyleSheet( {
             '.roo-lightbox' : {
                 position: 'absolute',
                 left: 0,
                 width: '100%',
                 'text-align': 'center',
-                'line-height': 0,
+                'line-height': 0
             },
             '.roo-lightbox a img' : { border: 'none'  },
             '.roo-lightbox .outer-image-container' : {
@@ -257,20 +251,20 @@ Roo.apply(Roo.ux.Lightbox.prototype,
                 'line-height':'0'
             
             },
-            '.roo-lightbox loading a' : { 
-                background:'url(../images/loading.gif) 0 0 no-repeat', 
+            '.roo-lightbox .loading a' : { 
+                background:'url('+ rootURL  + '/ux/lightbox/loading.gif) 0 0 no-repeat', 
                 display:'block',
                 width:'32px',
                 height:'32px',
                 cursor:'pointer'
             },
-            '.roo-lightbox bottom-nav-close' : {
-                background:'url(../images/close.gif) 0 0 no-repeat', 
+            '.roo-lightbox .bottom-nav-close' : {
+                background:'url('+ rootURL  + '/ux/lightbox/close.gif) 0 0 no-repeat', 
                 height:'26px',
                 width:'26px',
                 cursor:'pointer'
             },
-            '.roo-lightbox .hoverNav' :{ 
+            '.roo-lightbox .hover-nav' :{ 
                 position:'absolute', 
                 top:'0', 
                 left:'0', 
@@ -290,10 +284,10 @@ Roo.apply(Roo.ux.Lightbox.prototype,
             '.roo-lightbox .prev-link' : { left:'0','float':'left'},
             '.roo-lightbox .next-link' : { right:'0','float':'right'},
             '.roo-lightbox .prev-link:hover, .roo-lightbox .prev-link:visited:hover ' :{ 
-                    background:'url(../images/prevlabel.gif) left 15% no-repeat'
+                    background:'url('+ rootURL  + '/ux/lightbox/prevlabel.gif) left 15% no-repeat'
             },
             '.roo-lightbox .next-link:hover, .roo-lightbox .next-link:visited:hover ' :{ 
-                background:'url(../images/nextlabel.gif) right 15% no-repeat'
+                background:'url('+ rootURL  + '/ux/lightbox/nextlabel.gif) right 15% no-repeat'
             },
 
             '.roo-lightbox .image-data-container' : { 
@@ -308,8 +302,8 @@ Roo.apply(Roo.ux.Lightbox.prototype,
             '.roo-lightbox .image-data' : { padding:'0 10px', color: '#666' },
             '.roo-lightbox .image-data .image-details ' : { width: '70%', 'float': 'left', 'text-align': 'left'}  ,
             '.roo-lightbox .image-data .caption' : { 'font-weight': 'bold' },
-            '.roo-lightbox .image-data .numberDisplay' : { 'display': 'block', clear: 'left', 'padding-bottom': '1.0em'  } ,   
-            '.roo-lightbox .image-data .bottomNavClose' : {  'float': 'right',  'padding-bottom': '0.7em','outline': 'none'} ,
+            '.roo-lightbox .image-data .number-display' : { 'display': 'block', clear: 'left', 'padding-bottom': '1.0em'  } ,   
+            '.roo-lightbox .image-data .bottom-nav-close' : {  'float': 'right',  'padding-bottom': '0.7em','outline': 'none'} ,
             '.roo-lightbox-overlay' : {
                 'background-color': 'black',
                 height: '500px',
@@ -400,10 +394,11 @@ Roo.apply(Roo.ux.Lightbox.prototype,
         }
         */
         var s = Roo.get(document).getScroll();
-        
-        // calculate top and left offset for the lightbox 
+         // calculate top and left offset for the lightbox 
         // weird.. why / 10?
-        var lightboxTop = s.top + (Roo.lib.Dom.getViewHeight() / 10);
+        
+        //var lightboxTop = s.top + (Roo.lib.Dom.getViewHeight() / 10);
+        var lightboxTop = (Roo.lib.Dom.getViewHeight() / 10);
         var lightboxLeft = s.left
         this.lightbox.setStyle({ 
             top: lightboxTop + 'px', 
@@ -414,7 +409,6 @@ Roo.apply(Roo.ux.Lightbox.prototype,
         this.lightbox.show();
         
         
-        
         this.changeImage(imageNum);
     },
 
@@ -450,12 +444,14 @@ Roo.apply(Roo.ux.Lightbox.prototype,
 
         imgPreloader.on('load', function() {
             
-            this.lightboximage.dom.src = this.imageArray[this.activeImage].dom.href;
+            this.lightboximage.dom.src = this.imageArray[this.activeImage].href || 
+                this.imageArray[this.activeImage].dom.href || this.imageArray[this.activeImage].dom.src;
             
-            this.resizeImageContainer(imgPreloader.getWidth(), 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].dom.href;
+        imgPreloader.dom.src = this.imageArray[this.activeImage].href || 
+            this.imageArray[this.activeImage].dom.href ||  this.imageArray[this.activeImage].dom.src;
     },
 
     
@@ -480,6 +476,7 @@ Roo.apply(Roo.ux.Lightbox.prototype,
         
         ww -= 150;
         wh -= 150;
+        
         // get new width and height
         var bs =  this.borderSize * 2;
         
@@ -665,12 +662,14 @@ Roo.apply(Roo.ux.Lightbox.prototype,
         if (this.imageArray.length > this.activeImage + 1){
             preloadNextImage = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
             preloadNextImage.on('load', function() { preloadNextImage.remove() });
-            preloadNextImage.dom.src = this.imageArray[this.activeImage + 1].dom.href;
+            preloadNextImage.dom.src = this.imageArray[this.activeImage + 1].href ||
+                    this.imageArray[this.activeImage + 1].dom.href || this.imageArray[this.activeImage + 1 ].dom.src;;
         }
         if (this.activeImage > 0){
             preloadPrevImage = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
             preloadPrevImage.on('load', function() { preloadPrevImage.remove() });
-            preloadPrevImage.dom.src = this.imageArray[this.activeImage - 1].dom.href;
+            preloadPrevImage.dom.src = this.imageArray[this.activeImage - 1].href || 
+                   this.imageArray[this.activeImage - 1].dom.href || this.imageArray[this.activeImage - 1].dom.src;
         }
     
     },