PDA

View Full Version : Ext.ux.Lightbox?



tronlt
24 Jun 2011, 6:45 AM
Has anyone updated Ext.ux.Lightbox for Ext JS 4? Any help is appreciated.

Kcarpenter
30 Jun 2011, 6:36 AM
I've got one working that was modified from 3.0.
Now, below is our version that had been pretty heavily modified to do a whole lot more than show a picture.
I have taken out what I think was specific to us, but it should give you an idea of how to get started or this one may just work.
that being said:


#include Disclaimer.h

/*
*The code below may not work, If it doesn't sorry.
*I do know that it works on our stuff fine. As you can see from the first line comment, I HATE THIS *FILE. HATE IT. Also, most of this code isn't written directly by me and is horribly formatted - I just *hacked the crap out of it to work with EXTJS4
* 1-Post questions I will try to help.
* 2-The code below also probably has some brackets in the wrong spots or missing from where I *removed my code. Your a programmer and probably smart enough to figure out where they go :D
*/





//Everytime you open this file a baby kitten is curb stomped. Please leave now.
Ext.ux.Lightbox = (function () {
var els = {},
images = [],
activeImage,
initialized = false,
selectors = [];
var myWidth;
var myHeight;
var leftPadding;
return {
overlayOpacity: 0.85,
animate: true,
resizeSpeed: 8,
borderSize: 10,
labelImage: "Image",
labelOf: "of",

init: function () {
this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
this.overlayDuration = this.animate ? 0.2 : 0;

if (!initialized) {
Ext.apply(this, Ext.util.Observable.prototype);
Ext.util.Observable.constructor.call(this);
this.addEvents('open', 'close');
this.initMarkup();
this.initEvents();
initialized = true;
}
},


initMarkup: function () {
els.shim = Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id: 'ux-lightbox-shim'
}, true);
els.overlay = Ext.core.DomHelper.append(document.body, {
id: 'ux-lightbox-overlay',
style: 'z-index:1;opacity:0.85;filter:alpha(opacity=85)'
}, true);

var lightboxTpl = new Ext.Template(this.getTemplate());
els.lightbox = lightboxTpl.append(document.body, {}, true);
var ids = ['outerImageContainer', 'fotometaform', 'imageContainer', 'image', 'hoverNav', 'loading', 'loadingLink',
'sliderdiv', 'overlay', 'dataform', 'dataform2', 'navpane', 'outerDataContainer', 'navClose', 'navDataview'];

Ext.each(ids, function (id) {
els[id] = Ext.get('ux-lightbox-' + id);
});
Ext.each([els.overlay, els.lightbox, els.shim], function (el) {
el.setVisibilityMode(Ext.core.Element.DISPLAY);
el.hide();
});

var size = (this.animate ? 250 : 1) + 'px';
els.outerImageContainer.setStyle({
width: size,
height: size
});
},

getTemplate: function () {
return [
'<div id="ux-lightbox" >',
'<div id="ux-lightbox-outerImageContainer" style="width:'+(Ext.getBody().getViewSize().width * .5)+'">',
'<div id="ux-lightbox-imageContainer">',
'<div id="CenterImage">',
'<img class="bigDrop" id="ux-lightbox-image" />',
'</div>',//closes center image
'<div id="ux-lightbox-hoverNav" style="height: 400px; : z-index-1;">','</div>',
'<div id="ux-lightbox-loading">',
'<a id="ux-lightbox-loadingLink"></a>',
'</div>', //closes lightbox loading
'</div>', //closes image container
'<div id="ux-lightbox-navpane>">',
'<div id="ux-lightbox-navClose" style="float: right"><a href="#" id="ux-lightbox-navClose"></a></div>',
'<div id="ux-lightbox-navDataview"></div>',
'</div>',//closes navepane
'</div>', //closes outer image container
'</div>']; //closes lightbox
},

initEvents: function () {
var close = function (ev) {
hideStuff(leftPadding);
ev.preventDefault();
this.close();
};

els.overlay.on('click', close, this);
els.loadingLink.on('click', close, this);
els.navClose.on('click', close, this);
els.lightbox.on('click', function (ev) {
if (ev.getTarget().id === 'ux-lightbox') {
this.close(); //I think this is if you click on the black it closes
}
}, this);
},
//hits this before completely rendering index page
register: function(sel, group){
//if(selectors.indexOf(sel) === -1){
selectors.push(sel);

Ext.fly(document).on('click', function(ev){
var target = ev.getTarget(sel);

if (target) {
ev.preventDefault();
this.open(target, sel, group);
}
}, this);
//}
},

open: function(image, sel, group){
group = group || false;
this.setViewSize();
els.overlay.show();

images = [];

var index = 0;
if (!group) { //we're using group so go to else
images.push([image.href, image.title, image.alt]);
}else{
var setItems = Ext.query(sel);
Ext.each(setItems, function(item){
if (item.href){
images.push([item.href, item.title, item.alt]);
}
});
while (images[index][0] !== image.href) {
index++;
}
}
// calculate top and left offset for the lightbox
var pageScroll = Ext.fly(document).getScroll();
var lightboxTop = pageScroll.top + (Ext.getBody().getViewSize().height / 100);
var lightboxLeft = pageScroll.left;
els.lightbox.setStyle({
//placement of image white box
top: lightboxTop + 'px',
left: lightboxLeft + 'px'
}).show();
this.setImage(index);
this.fireEvent('open', images[index]);


},

setViewSize: function(){
var viewSize = this.getViewSize();
els.overlay.setStyle({ //this is the black shroud
width: viewSize[0] + 'px',
height: viewSize[1] + 'px'
});
els.shim.setStyle({
width: viewSize[0] + 'px',
height: viewSize[1] + 'px'
}).show();
},

setImage: function (index) {
activeImage = index;

if (this.animate) {
els.loading.show();
}

els.image.hide();
els.hoverNav.hide();
//els.dataContainer.setOpacity(0.0001);

var preload = new Image();
preload.onload = Ext.bind(function(){
els.image.dom.src = images[activeImage][0].substring(0, images[activeImage][0].length - 3) + 'JPG';
if(preload.width >= preload.height){
myHeight = (Ext.getBody().getViewSize().height * .7376);
myWidth = (Ext.getBody().getViewSize().width * .734375);//Odd number because I am odd. And it keeps a contrast ratio on all screen sizes
leftPadding = 53;
}else{
myHeight = (Ext.getBody().getViewSize().height * .7376);
myWidth = (Ext.getBody().getViewSize().width * .35625);
leftPadding = 253;
}
document.getElementById('CenterImage').style.paddingLeft = leftPadding + 'px';

})


els.myContent = Ext.core.DomHelper.append(document.getElementById('ux-lightbox-sliderdiv'), {
id: 'ux-lightbox-myContent'
}, true);
var slideshow;

var mybody = document.getElementById('myBody');

var myDiv = document.getElementById('ux-lightbox-myContent');

var wrapper = document.createElement('div');
myDiv.appendChild(wrapper);
wrapper.setAttribute('id', 'ux-lightbox-wrapper');

var thumbnails = document.createElement('div');
wrapper.appendChild(thumbnails);
thumbnails.setAttribute('id', 'ux-lightbox-thumbnails');

this.resizeImage(preload.width, preload.height);

}, this);

preload.src = images[activeImage][0].substring(0, images[activeImage][0].length - 3) + 'JPG';
},

resizeImage: function (w, h) {
var wCur = els.outerImageContainer.getWidth();
var hCur = els.outerImageContainer.getHeight();

var wNew = (w + this.borderSize * 2);
var hNew = (h + this.borderSize * 2);

var wDiff = wCur - wNew;
var hDiff = hCur - hNew;

var queueLength = 0;

if (hDiff !== 0 || wDiff !== 0) {
els.outerImageContainer.shift({
height: (Ext.getBody().getViewSize().height * .8783),
duration: this.resizeDuration
}).shift({
width: (Ext.getBody().getViewSize().width * .8203),
duration: this.resizeDuration
});
queueLength++;
}

var timeout = 0;
if ((hDiff === 0) && (wDiff === 0)) {
timeout = (Ext.isIE) ? 250 : 100;
}

Ext.defer(Ext.bind(function () {
this.showImage();
}, this), (this.resizeDuration * 1000) + timeout);
},

showImage: function () {
els.image.setWidth(myWidth);
els.image.setHeight(myHeight);

els.loading.hide();
els.image.fadeIn({
duration: this.resizeDuration,
scope: this,
callback: function () {
this.updateDetails();
}
});
this.preloadImages();
},

updateDetails: function () {

},

preloadImages: function () {
var next, prev;
if (images.length > activeImage + 1) {
next = new Image();
next.src = images[activeImage + 1][0];
}
if (activeImage > 0) {
prev = new Image();
prev.src = images[activeImage - 1][0];
}
},
close: function () {
els.lightbox.hide();
els.overlay.hide();
els.shim.hide();
this.fireEvent('close', activeImage);
},

getViewSize: function () {
//this is the black shaded area
return [Ext.getBody().getViewSize().width, Ext.getBody().getViewSize().height];
}

};
})();
Ext.Loader.onReady(Ext.ux.Lightbox.init, Ext.ux.Lightbox);

jeroenooms
3 Jul 2011, 1:35 AM
I need the same thing. Please report your experiences, ts.

Shn
27 Oct 2011, 7:15 AM
Hi,

I couldn't get Kcarpenter's version to work (there are indeed a couple brackets to delete) as it seems to be very different from the version originally available there : "http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/"
I took the original version, which worked with extjs 3 and tuned it a little to work with extjs 4. I couldn't get all the animations (fadeIn and fadeOut) to work, so if anyone wants to help out and make it better, they'd be welcome.
I also had to modified the css to make it look exactly the same as before (only a couple places, just do a diff with the previous version to check what's new).
I've only tested it with one image, so I can't guarantee it'll work with multiple images !

Please check the licensing from the original version, which I didn't include in my code below.

Here's the css code :


#ux-lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 15000;
text-align: center;
line-height: 0;
}

#ux-lightbox img {
width: auto;
height: auto;
}

#ux-lightbox a img {
border: none;
}

#ux-lightbox-outerImageContainer {
position: relative;
background-color: #f3efec;
width: 250px;
height: 250px;
margin: 0 auto;
}

#ux-lightbox-imageContainer {
padding: 10px;
}

#ux-lightbox-loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
background: url(images/lb-load.gif) no-repeat center 15%;
}

#ux-lightbox-hoverNav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}

#ux-lightbox-imageContainer > #ux-lightbox-hoverNav {
left: 0;
}

#ux-lightbox-hoverNav a{
outline: none;
}

#ux-lightbox-navPrev,
#ux-lightbox-navNext {
width: 49%;
height: 100%;
*background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover *//* the * is there to avoid errors in other browsers*/
display: block;
}

#ux-lightbox-navPrev { left: 0; float: left;}
#ux-lightbox-navNext { right: 0; float: right;}
#ux-lightbox-navPrev:hover, #ux-lightbox-navPrev:visited:hover { background: url(images/lb-prev.png) left 33% no-repeat; }
#ux-lightbox-navNext:hover, #ux-lightbox-navNext:visited:hover { background: url(images/lb-next.png) right 33% no-repeat; }

#ux-lightbox-outerDataContainer {
margin: 0 auto;
width: 100%;
}

#ux-lightbox-dataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #f3efec;
overflow: auto;
line-height: 1.4em;
}

#ux-lightbox-data{ padding:0 10px; color: #666; }
#ux-lightbox-data #ux-lightbox-details{ width: 80%; float: left; text-align: left; }
#ux-lightbox-data #ux-lightbox-caption{ font-weight: bold; }
#ux-lightbox-data #ux-lightbox-imageNumber{ display: block; clear: left; padding-bottom: 1.0em; }
#ux-lightbox-data #ux-lightbox-navClose{ background: url(images/lb-close.gif) no-repeat; width: 66px; height: 22px; float: right; padding-bottom: 0.7em; outline: none;}
#ux-lightbox-data #ux-lightbox-navClose:hover{ background-image: url(images/lb-close-over.gif);}

#ux-lightbox-overlay,
#ux-lightbox-shim{
border: 0;
position: absolute;
top: 0;
left: 0;
z-index: 14999;
width: 100%;
height: 500px;
background-color: #000;
padding: 0;
margin: 0;
}

#ux-lightbox-shim {
z-index: 89;
background-color: transparent;
filter: alpha(opacity=0);
}

/* the box-sizing stuff is there to overload the .x-border-box modified by extjs' theme */
#ux-lightbox-bottomNav, #ux-lightbox-bottomNav *{ box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-webkit-box-sizing:content-box }


... and the javascript code :


Ext.ns('Ext.ux');

Ext.ux.Lightbox = (function(){
var els = {},
images = [],
activeImage,
initialized = false,
selectors = [];

return {
overlayOpacity: 0.85,
animate: true,
resizeSpeed: 8,
borderSize: 10,
labelImage: "Image",
labelOf: "of",

init: function() {
this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
this.overlayDuration = this.animate ? 0.2 : 0;

if(!initialized) {
Ext.apply(this, Ext.util.Observable.prototype);
Ext.util.Observable.constructor.call(this);
this.addEvents('open', 'close');
this.initMarkup();
this.initEvents();
initialized = true;
}
},

initMarkup: function() {
els.shim = Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id: 'ux-lightbox-shim'
}, true);
els.overlay = Ext.core.DomHelper.append(document.body, {
id: 'ux-lightbox-overlay',
style: 'opacity:'+this.overlayOpacity+';filter:alpha(opacity='+(this.overlayOpacity*100)+')'
}, true);

var lightboxTpl = new Ext.Template(this.getTemplate());
els.lightbox = lightboxTpl.append(document.body, {}, true);

var ids =
['outerImageContainer', 'imageContainer', 'image', 'hoverNav', 'navPrev', 'navNext', 'loading', 'loadingLink',
'outerDataContainer', 'dataContainer', 'data', 'details', 'caption', 'imageNumber', 'bottomNav', 'navClose'];

Ext.each(ids, function(id){
els[id] = Ext.get('ux-lightbox-' + id);
});

Ext.each([els.overlay, els.lightbox, els.shim], function(el){
el.setVisibilityMode(Ext.Element.DISPLAY)
el.hide();
});

var size = (this.animate ? 250 : 1) + 'px';
els.outerImageContainer.setStyle({
width: size,
height: size
});
},

getTemplate : function() {
return [
'<div id="ux-lightbox">',
'<div id="ux-lightbox-outerImageContainer">',
'<div id="ux-lightbox-imageContainer">',
'<img id="ux-lightbox-image">',
'<div id="ux-lightbox-hoverNav">',
'<a href="#" id="ux-lightbox-navPrev"></a>',
'<a href="#" id="ux-lightbox-navNext"></a>',
'</div>',
'<div id="ux-lightbox-loading">',
'<a id="ux-lightbox-loadingLink"></a>',
'</div>',
'</div>',
'</div>',
'<div id="ux-lightbox-outerDataContainer">',
'<div id="ux-lightbox-dataContainer">',
'<div id="ux-lightbox-data">',
'<div id="ux-lightbox-details">',
'<span id="ux-lightbox-caption"></span>',
'<span id="ux-lightbox-imageNumber"></span>',
'</div>',
'<div id="ux-lightbox-bottomNav">',
'<a href="#" id="ux-lightbox-navClose"></a>',
'</div>',
'</div>',
'</div>',
'</div>',
'</div>'
];
},

initEvents: function() {
var close = function(ev) {
ev.preventDefault();
this.close();
};

els.overlay.on('click', close, this);
els.loadingLink.on('click', close, this);
els.navClose.on('click', close, this);

els.lightbox.on('click', function(ev) {
if(ev.getTarget().id == 'ux-lightbox') {
this.close();
}
}, this);

els.navPrev.on('click', function(ev) {
ev.preventDefault();
this.setImage(activeImage - 1);
}, this);

els.navNext.on('click', function(ev) {
ev.preventDefault();
this.setImage(activeImage + 1);
}, this);
},

register: function(sel, group) {
if(selectors.indexOf(sel) === -1) {
selectors.push(sel);

Ext.fly(document).on('click', function(ev){
var target = ev.getTarget(sel);

if (target) {
ev.preventDefault();
this.open(target, sel, group);
}
}, this);
}
},

open: function(image, sel, group) {
group = group || false;
this.setViewSize();
els.overlay.show();

images = [];

var index = 0;
if(!group) {
images.push([image.href, image.title]);
}
else {
var setItems = Ext.query(sel);
Ext.each(setItems, function(item) {
if(item.href) {
images.push([item.href, item.title]);
}
});

while (images[index][0] != image.href) {
index++;
}
}

// calculate top and left offset for the lightbox
var pageScroll = Ext.fly(document).getScroll();

var lightboxTop = pageScroll.top + (Ext.Element.getViewportHeight() / 10);
var lightboxLeft = pageScroll.left;
els.lightbox.setStyle({
top: lightboxTop + 'px',
left: lightboxLeft + 'px'
}).show();

this.setImage(index);

this.fireEvent('open', images[index]);
},

setViewSize: function(){
var viewSize = this.getViewSize();
els.overlay.setStyle({
width: viewSize[0] + 'px',
height: viewSize[1] + 'px'
});
els.shim.setStyle({
width: viewSize[0] + 'px',
height: viewSize[1] + 'px'
}).show();
},

setImage: function(index){
activeImage = index;

this.disableKeyNav();
if (this.animate) {
els.loading.show();
}

els.image.hide();
els.hoverNav.hide();
els.navPrev.hide();
els.navNext.hide();
els.dataContainer.setOpacity(0.0001);
els.imageNumber.hide();

var preload = new Image();
preload.onload = Ext.bind(function(){
els.image.dom.src = images[activeImage][0];
this.resizeImage(preload.width, preload.height);
}, this);
preload.src = images[activeImage][0];
},

resizeImage: function(w, h){
var wCur = els.outerImageContainer.getWidth();
var hCur = els.outerImageContainer.getHeight();

var wNew = (w + this.borderSize * 2);
var hNew = (h + this.borderSize * 2);

var wDiff = wCur - wNew;
var hDiff = hCur - hNew;

var afterResize = function(){
els.hoverNav.setWidth(els.imageContainer.getWidth() + 'px');

els.navPrev.setHeight(h + 'px');
els.navNext.setHeight(h + 'px');

els.outerDataContainer.setWidth(wNew + 'px');

this.showImage();
};

if (hDiff != 0 || wDiff != 0) {
els.outerImageContainer.shift({
height: hNew,
width: wNew,
duration: this.resizeDuration,
scope: this,
callback: afterResize,
delay: 50
});
}
else {
afterResize.call(this);
}
},

showImage: function(){
els.loading.hide();
els.image.show({
duration: this.resizeDuration,
easing: 'easeIn'
});
this.updateDetails();
this.preloadImages();
},

updateDetails: function(){
var detailsWidth = els.data.getWidth(true) - els.navClose.getWidth() - 10;
els.details.setWidth((detailsWidth > 0 ? detailsWidth : 0) + 'px');

els.caption.update(images[activeImage][1]);

els.caption.show();
if (images.length > 1) {
els.imageNumber.update(this.labelImage + ' ' + (activeImage + 1) + ' ' + this.labelOf + ' ' + images.length);
els.imageNumber.show();
}

els.dataContainer.fadeIn({
duration: this.resizeDuration/2,
scope: this,
callback: function() {
var viewSize = this.getViewSize();
els.overlay.setHeight(viewSize[1] + 'px');
this.updateNav();
}
});
},

updateNav: function(){
this.enableKeyNav();

els.hoverNav.show();

// if not first image in set, display prev image button
if (activeImage > 0)
els.navPrev.show();

// if not last image in set, display next image button
if (activeImage < (images.length - 1))
els.navNext.show();
},

enableKeyNav: function() {
Ext.fly(document).on('keydown', this.keyNavAction, this);
},

disableKeyNav: function() {
Ext.fly(document).un('keydown', this.keyNavAction, this);
},

keyNavAction: function(ev) {
var keyCode = ev.getKey();

if (
keyCode == 88 || // x
keyCode == 67 || // c
keyCode == 27
) {
this.close();
}
else if (keyCode == 80 || keyCode == 37){ // display previous image
if (activeImage != 0){
this.setImage(activeImage - 1);
}
}
else if (keyCode == 78 || keyCode == 39){ // display next image
if (activeImage != (images.length - 1)){
this.setImage(activeImage + 1);
}
}
},

preloadImages: function(){
var next, prev;
if (images.length > activeImage + 1) {
next = new Image();
next.src = images[activeImage + 1][0];
}
if (activeImage > 0) {
prev = new Image();
prev.src = images[activeImage - 1][0];
}
},

close: function(){
this.disableKeyNav();
els.lightbox.hide();
els.overlay.hide();
els.shim.hide();
this.fireEvent('close', activeImage);
},

getViewSize: function() {
return [Ext.Element.getViewWidth(), Ext.Element.getViewHeight()];
}
}
})();

Ext.onReady(Ext.ux.Lightbox.init, Ext.ux.Lightbox);


I'm aware of the imperfection of my workarounds so please let me know if it doesn't work or if things could be done differently.

Edit: There are problems with the z-index's not being correctly set (it's in the css and should be dynamic). I'll either work on that and use ExtJS' z-index manager or do a new plugin from scratch

bseddon
29 Feb 2012, 2:24 PM
This implementation is created on the bones of the lightbox in ExtJS 3.1.0 core. It's implemented as a component (extends Ext.component) so it can be used this way.

Changes

The implementation is a little different in order to:

allow the render target to be set programmatically;
for the render target to be changed;
for the click handlers to be removed from all images; and
to make it possible to close a show programmatically.

Demo

A demo is available here (http://s3downloads.lyquidity.com/ExtJS/ext4/gallery.html). This is also the source of the code. The html file includes the code and css in-line. The version of ExtJS used is 4.0.7 (by referencing the Sencha CDN).

Using

The steps to use the lightbox are similar to the steps when using the 3.1 example. The main difference is that unlike the 3.1 example the lightbox is not created at page load time. Instead the component is instantiated when needed and removed when not needed.

// Tear down an existing lightbox if one exists
if (Ext.Lightbox) Ext.Lightbox.remove();

// The component will use the default render target (body) if one is not provided
Ext.Lightbox = Ext.create('Ext.ux.Lightbox', Ext.get('lightboxdisplay'));


// Finally add all the images. Each one will become clickable. 'content' is the id of a tag in which to look for the images. This is optional as will default to the whole DOM.
Ext.Lightbox.register('a[rel^=lightbox]', false, content);

SCHERPOntwikkeling
6 Mar 2012, 7:31 AM
We hacked the v3 version to work with v4.


/*!
* Original lightbox script was made for ext3 SCHERP Ontwikkeling (scherpontwikkeling.nl) changed it to work on ext4
*/
Ext.ns('Ext.ux');

Ext.ux.Lightbox = (function(){
var els = {},
images = [],
activeImage,
initialized = false,
selectors = [];

return {
overlayOpacity: 0.85,
animate: true,
resizeSpeed: 8,
borderSize: 10,
labelImage: "Image",
labelOf: "of",

init: function() {
this.resizeDuration = this.animate ? 500 : 0;
this.overlayDuration = this.animate ? 500 : 0;

if(!initialized) {
Ext.apply(this, Ext.util.Observable.prototype);
Ext.util.Observable.constructor.call(this);
this.addEvents('open', 'close');
this.initMarkup();
this.initEvents();
initialized = true;
}
},

initMarkup: function() {
els.shim = Ext.getBody().createChild({
tag: 'iframe',
id: 'ux-lightbox-shim'
}, null, true);
els.overlay = Ext.getBody().createChild({
id: 'ux-lightbox-overlay'
}, null, true);

els.shim = Ext.get(els.shim);
els.overlay = Ext.get(els.overlay);

var lightboxTpl = new Ext.Template(this.getTemplate());
els.lightbox = lightboxTpl.append(document.body, {}, true);

var ids =
['outerImageContainer', 'imageContainer', 'image', 'hoverNav', 'navPrev', 'navNext', 'loading', 'loadingLink',
'outerDataContainer', 'dataContainer', 'data', 'details', 'caption', 'imageNumber', 'bottomNav', 'navClose'];

Ext.each(ids, function(id){
els[id] = Ext.get('ux-lightbox-' + id);
});

Ext.each([els.overlay, els.lightbox, els.shim], function(el){
Ext.get(el).setStyle('display', 'block');
//el.setVisibilityMode(Ext.Element.DISPLAY)
Ext.get(el).hide();
});

var size = (this.animate ? 250 : 1) + 'px';
els.outerImageContainer.setStyle({
width: size,
height: size
});
},

getTemplate : function() {
return [
'<div id="ux-lightbox">',
'<div id="ux-lightbox-outerImageContainer">',
'<div id="ux-lightbox-imageContainer">',
'<img id="ux-lightbox-image">',
'<div id="ux-lightbox-hoverNav">',
'<a href="#" id="ux-lightbox-navPrev"></a>',
'<a href="#" id="ux-lightbox-navNext"></a>',
'</div>',
'<div id="ux-lightbox-loading">',
'<a id="ux-lightbox-loadingLink"></a>',
'</div>',
'</div>',
'</div>',
'<div id="ux-lightbox-outerDataContainer">',
'<div id="ux-lightbox-dataContainer">',
'<div id="ux-lightbox-data">',
'<div id="ux-lightbox-details">',
'<span id="ux-lightbox-caption"></span>',
'<span id="ux-lightbox-imageNumber"></span>',
'</div>',
'<div id="ux-lightbox-bottomNav">',
'<a href="#" id="ux-lightbox-navClose"></a>',
'</div>',
'</div>',
'</div>',
'</div>',
'</div>'
];
},

initEvents: function() {
var close = function(ev) {
ev.preventDefault();
this.close();
};

els.overlay.on('click', close, this);
els.loadingLink.on('click', close, this);
els.navClose.on('click', close, this);

els.lightbox.on('click', function(ev) {
if(ev.getTarget().id == 'ux-lightbox') {
this.close();
}
}, this);

els.navPrev.on('click', function(ev) {
ev.preventDefault();
this.setImage(activeImage - 1);
}, this);

els.navNext.on('click', function(ev) {
ev.preventDefault();
this.setImage(activeImage + 1);
}, this);
},

register: function(sel, group) {
if(selectors.indexOf(sel) === -1) {
selectors.push(sel);

Ext.fly(document).on('click', function(ev){
var target = ev.getTarget(sel);

if (target) {
ev.preventDefault();
this.open(target, sel, group);
}
}, this);
}
},

open: function(image, sel, group) {
group = group || false;
this.setViewSize();
els.overlay.fadeIn({
duration: this.overlayDuration,
endOpacity: this.overlayOpacity,
callback: function() {
images = [];

var index = 0;
if(!group) {
images.push([image.href, image.title]);
}
else {
var setItems = Ext.query(sel);
Ext.each(setItems, function(item) {
if(item.href) {
images.push([item.href, item.title]);
}
});

while (images[index][0] != image.href) {
index++;
}
}

// calculate top and left offset for the lightbox
var pageScroll = Ext.fly(document).getScroll();

var lightboxTop = pageScroll.top + (Ext.Element.getViewportHeight() / 10);
var lightboxLeft = pageScroll.left;
els.lightbox.setStyle({
top: lightboxTop + 'px',
left: lightboxLeft + 'px'
}).show();

this.setImage(index);

this.fireEvent('open', images[index]);

},
scope: this
});
},

setViewSize: function(){
var viewSize = this.getViewSize();
Ext.get(els.overlay).setStyle({
width: viewSize[0] + 'px',
height: viewSize[1] + 'px'
});
Ext.get(els.shim).setStyle({
width: viewSize[0] + 'px',
height: viewSize[1] + 'px'
}).show();
},

setImage: function(index){
activeImage = index;

this.disableKeyNav();
if (this.animate) {
els.loading.show();
}

els.image.hide();
els.hoverNav.hide();
els.navPrev.hide();
els.navNext.hide();
els.dataContainer.setOpacity(0.0001);
els.imageNumber.hide();

var preload = new Image();
preload.onload = Ext.bind(function(){
els.image.dom.src = images[activeImage][0];
this.resizeImage(preload.width, preload.height);
},this);
preload.src = images[activeImage][0];
},

resizeImage: function(w, h){
var wCur = els.outerImageContainer.getWidth();
var hCur = els.outerImageContainer.getHeight();

var wNew = (w + this.borderSize * 2);
var hNew = (h + this.borderSize * 2);

var wDiff = wCur - wNew;
var hDiff = hCur - hNew;

var afterResize = function(){
els.hoverNav.setWidth(els.imageContainer.getWidth() + 'px');

els.navPrev.setHeight(h + 'px');
els.navNext.setHeight(h + 'px');

els.outerDataContainer.setWidth(wNew + 'px');

this.showImage();
};

if (hDiff != 0 || wDiff != 0) {
els.outerImageContainer.shift({
height: hNew,
width: wNew,
duration: this.resizeDuration,
scope: this,
callback: afterResize,
delay: 50
});
}
else {
afterResize.call(this);
}
},

showImage: function(){
els.loading.hide();

Ext.get(els.image).setStyle('visibility', 'visible');
Ext.get(els.image).setStyle('opacity', 0);
els.image.fadeIn({
opacity: 1,
duration: this.resizeDuration,
scope: this,
callback: function(){
this.updateDetails();
}
});
this.preloadImages();
},

updateDetails: function(){
var detailsWidth = els.data.getWidth(true) - els.navClose.getWidth() - 10;
els.details.setWidth((detailsWidth > 0 ? detailsWidth : 0) + 'px');

els.caption.update(images[activeImage][1]);

els.caption.show();
if (images.length > 1) {
els.imageNumber.update(this.labelImage + ' ' + (activeImage + 1) + ' ' + this.labelOf + ' ' + images.length);
els.imageNumber.show();
}

els.dataContainer.fadeIn({
duration: this.resizeDuration/2,
scope: this,
callback: function() {
var viewSize = this.getViewSize();
els.overlay.setHeight(viewSize[1] + 'px');
this.updateNav();
}
});
},

updateNav: function(){
this.enableKeyNav();

els.hoverNav.show();

// if not first image in set, display prev image button
if (activeImage > 0)
els.navPrev.show();

// if not last image in set, display next image button
if (activeImage < (images.length - 1))
els.navNext.show();
},

enableKeyNav: function() {
Ext.fly(document).on('keydown', this.keyNavAction, this);
},

disableKeyNav: function() {
Ext.fly(document).un('keydown', this.keyNavAction, this);
},

keyNavAction: function(ev) {
var keyCode = ev.getKey();

if (
keyCode == 88 || // x
keyCode == 67 || // c
keyCode == 27
) {
this.close();
}
else if (keyCode == 80 || keyCode == 37){ // display previous image
if (activeImage != 0){
this.setImage(activeImage - 1);
}
}
else if (keyCode == 78 || keyCode == 39){ // display next image
if (activeImage != (images.length - 1)){
this.setImage(activeImage + 1);
}
}
},

preloadImages: function(){
var next, prev;
if (images.length > activeImage + 1) {
next = new Image();
next.src = images[activeImage + 1][0];
}
if (activeImage > 0) {
prev = new Image();
prev.src = images[activeImage - 1][0];
}
},

close: function(){
this.disableKeyNav();
els.lightbox.hide();
els.overlay.fadeOut({
duration: this.overlayDuration
});
els.image.setStyle('display', 'none');
els.shim.hide();
this.fireEvent('close', activeImage);
},

getViewSize: function() {
return [Ext.Element.getViewportWidth(), Ext.Element.getViewportHeight()];
}
}
})();

Ext.onReady(Ext.ux.Lightbox.init, Ext.ux.Lightbox);

Greets Dimitri
SCHERP Ontwikkeling

fabio.policeno
17 Aug 2012, 1:06 PM
animate: false no remove animate. Any ideas?

Thank's