' +
- '
' +
- ' ![]()
' +
- '
' +
- ' ' +
- ' ' +
+ '' +
+ '
' +
+ '
' +
+ ' ' +
- '
' +
- '
' +
- '
' +
- ' ' +
- ' ' +
+ '
' +
+ '
' +
+ '
' +
@@ -162,115 +155,123 @@ Roo.apply(Roo.ux.Lightbox.prototype,
var th = this;
- var ids =
- 'lightbox outerImageContainer imageContainer ' +
- 'lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
- 'imageDataContainer imageData imageDetails caption numberDisplay '
- 'bottomNav bottomNavClose';
+ var ids = 'roo-lightbox outer-image-container image-container ' +
+ 'lightbox-image hover-nav prev-link next-link loading loading-link ' +
+ 'image-data-container image-data image-details caption number-display ' +
+ 'bottom-nav bottom-nav-close roo-lightbox-overlay';
Roo.each(ids.split(' '),
function(id){
-
- th[id] = Roo.get(id);
- if (!th[id]) {
+ var vid = id.replace(/\-/g,'');
+ th[vid] = th.el.child('.'+id);
+ if (!th[vid]) {
return;
- }
- th[id].setVisibilityMode(Roo.Element.DISPLAY);
+ }
+
+ th[vid].setVisibilityMode(Roo.Element.DISPLAY);
});
-
+ this.lightbox = this.roolightbox;
- //Roo.get('overlay').hide();
- //Roo.get('overlay').on('click', this.end, this);
- Roo.get('lightbox').hide();
- Roo.get('lightbox').on('click', function(event) {
- if (event.getTarget().id == 'lightbox') {
+ this.overlay = this.roolightboxoverlay;
+ this.overlay.hide();
+
+ this.lightbox.hide();
+ this.lightbox.on('click', function(event) {
+ if (Roo.get(event.getTarget()).hasClass('roo-lightbox')) {
this.end();
}
}, this);
- Roo.get('outerImageContainer').setStyle({ width: size, height: size });
+ this.outerimagecontainer.setStyle({ width: size, height: size });
- Roo.get('prevLink').on('click',
+ this.prevlink.on('click',
function(event) {
event.stopEvent();
this.changeImage(this.activeImage - 1);
}, this);
- Roo.get('nextLink').on('click',
+ this.nextlink.on('click',
function(event) {
event.stopEvent();
this.changeImage(this.activeImage + 1);
},this);
- Roo.get('loadingLink').on('click',
+ this.loadinglink.on('click',
function(event) {
event.stopEvent();
this.end();
}, this);
- Roo.get('bottomNavClose').on('click',
+ this.bottomnavclose.on('click',
+ function(event) {
+ event.stopEvent();
+ this.end();
+ }, this);
+
+ this.overlay.on('click',
function(event) {
event.stopEvent();
this.end();
}, this);
-
},
initializeCSS: function() {
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' : {
- position: 'relative';
- 'background-color': '#fff';
+ position: 'relative',
+ 'background-color': '#fff',
width: '250px',
height: '250px',
margin: '0 auto'
},
- '.roo-lightbox image-container' :{ padding: '10px' }
+ '.roo-lightbox image-container' :{ padding: '10px' },
- '.roo-lightbox .loading' {
- position:'absolute;
+ '.roo-lightbox .loading' : {
+ position:'absolute',
top:'40%',
left:'0%',
height:'25%',
width:'100%',
- text-align:'center',
- line-height:'0'
+ 'text-align':'center',
+ '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',
height:'100%',
width:'100%',
'z-index':'10'
- }
+ },
'.roo-lightbox .image-container>.hover-nav' :{ left:'0' },
'.roo-lightbox .hover-nav a' :{ outline:'none'},
@@ -283,26 +284,37 @@ 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' : {
font: '10px Verdana, Helvetica, sans-serif',
- background-color: #fff;
- margin: 0 auto;
- line-height: 1.4em;
- overflow: auto;
- width: 100% ;
- }
+ 'background-color': '#fff',
+ margin: '0 auto',
+ 'line-height': '1.4em',
+ overflow: 'auto',
+ width: '100%'
+ },
- '.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' : { 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 .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',
+ left: '0px',
+ position: 'absolute',
+ top: '0px',
+ width: '100%',
+ 'z-index': '90'
+ }
+ });
+ },
@@ -343,11 +355,15 @@ Roo.apply(Roo.ux.Lightbox.prototype,
*/
// stretch overlay to fill page and fade in
//var arrayPageSize = this.getPageSize();
- Roo.get(document.body).mask(false);
- Roo.get(document.body)._mask.setHeight(Roo.lib.Dom.getDocumentHeight())
- //new Effect.Appear(this.overlay,
- // { duration: this.overlayDuration, from: 0.0, to: this.overlayOpacity });
-
+
+ this.overlay.setHeight(Roo.lib.Dom.getDocumentHeight()) ;
+ this.overlay.setWidth(Roo.lib.Dom.getDocumentWidth());
+ this.overlay.fadeIn({
+ endOpacity: this.overlayOpacity,
+ easing: 'easeOut',
+ duration: this.overlayDuration
+ });
+
//this.imageArray = [];
var imageNum = 0;
@@ -378,21 +394,21 @@ 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',
left: lightboxLeft + 'px' ,
- zIndex : Roo.get(document.body)._mask.getStyle('zIndex') * 1.1
+ zIndex : 1000
})
//console.log("show lightbox");
this.lightbox.show();
-
this.changeImage(imageNum);
},
@@ -407,36 +423,39 @@ Roo.apply(Roo.ux.Lightbox.prototype,
// hide elements during transition
if (this.animate) {
this.loading.setStyle({
- zIndex : Roo.get(document.body)._mask.getStyle('zIndex') * 1.2
+ zIndex :1200
});
this.loading.show();
- this.loadingLink.setX( (Roo.lib.Dom.getViewWidth() / 2) - 16);
+ this.loadinglink.setX( (Roo.lib.Dom.getViewWidth() / 2) - 16);
//this.loadingLink.show();
// center the loading?
}
- this.hoverNav.hide();
- this.prevLink.hide();
- this.nextLink.hide();
+ this.hovernav.hide();
+ this.prevlink.hide();
+ this.nextlink.hide();
// HACK: Opera9 does not currently support scriptaculous opacity and appear fx
- this.imageDataContainer.setStyle({opacity: .0001});
- this.numberDisplay.hide();
+ this.imagedatacontainer.setStyle({opacity: .0001});
+ this.numberdisplay.hide();
var imgPreloader = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
// once image is preloaded, resize image container
-
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;
},
+
+
//
// resizeImageContainer()
//
@@ -447,8 +466,8 @@ Roo.apply(Roo.ux.Lightbox.prototype,
imgHeight = Math.max(50, imgHeight);
// get current width and height
- var widthCurrent = this.outerImageContainer.getWidth();
- var heightCurrent = this.outerImageContainer.getHeight();
+ var widthCurrent = this.outerimagecontainer.getWidth();
+ var heightCurrent = this.outerimagecontainer.getHeight();
//fixme need better calcs.
var w = window;
@@ -457,6 +476,7 @@ Roo.apply(Roo.ux.Lightbox.prototype,
ww -= 150;
wh -= 150;
+
// get new width and height
var bs = this.borderSize * 2;
@@ -476,7 +496,7 @@ Roo.apply(Roo.ux.Lightbox.prototype,
}
- this.lightboxImage.set( { width : imgWidth, height : imgHeight });
+ this.lightboximage.set( { width : imgWidth, height : imgHeight });
// scalars based on change from old to new
@@ -488,7 +508,7 @@ Roo.apply(Roo.ux.Lightbox.prototype,
var hDiff = heightCurrent - heightNew;
- this.outerImageContainer.animate(
+ this.outerimagecontainer.animate(
{ width: {to: widthNew}, height: {to: heightNew} },
this.resizeDuration,
null, // on complete
@@ -507,9 +527,9 @@ Roo.apply(Roo.ux.Lightbox.prototype,
}
(function(){
- this.prevLink.setStyle({ height: imgHeight + 'px' });
- this.nextLink.setStyle({ height: imgHeight + 'px' });
- this.imageDataContainer.setStyle({ width: widthNew + 'px'}); // the text area..
+ this.prevlink.setStyle({ height: imgHeight + 'px' });
+ this.nextlink.setStyle({ height: imgHeight + 'px' });
+ this.imagedatacontainer.setStyle({ width: widthNew + 'px'}); // the text area..
this.showImage();
}).defer(timeout / 1000, this);
},
@@ -523,7 +543,7 @@ Roo.apply(Roo.ux.Lightbox.prototype,
this.loading.hide();
//this.loadingLink.hide();
var _this= this;
- this.lightboxImage.animate(
+ this.lightboximage.animate(
{
opacity : { to: 1.0 }
},
@@ -550,12 +570,12 @@ 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.numberdisplay.update(
this.labelImage + ' ' + (this.activeImage + 1) + ' ' + this.labelOf + ' ' + this.imageArray.length)
- this.numberDisplay.show();
+ this.numberdisplay.show();
}
var _this = this;
- this.imageDataContainer.animate(
+ this.imagedatacontainer.animate(
{
//slide down ?: , from: 0.0, to: 1.0
opacity : { to: 1.0 }
@@ -577,13 +597,13 @@ Roo.apply(Roo.ux.Lightbox.prototype,
//
updateNav: function() {
- this.hoverNav.show();
+ 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();
},
@@ -605,7 +625,8 @@ Roo.apply(Roo.ux.Lightbox.prototype,
//
// keyboardAction()
//
- keyboardAction: function(event) {
+ keyboardAction: function(event)
+ {
var keycode = event.keyCode;
var escapeKey;
@@ -641,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;
}
},
@@ -659,6 +682,7 @@ Roo.apply(Roo.ux.Lightbox.prototype,
//console.log('lightbox hide');
this.lightbox.hide();
this.loading.hide();
+ this.overlay.hide();
Roo.get(document.body).unmask();
// show all the objects that cause problems..
//$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
' +
+ ' ' +
+ ' ' +
'
' +
- ' ' +
'