*/
this.overlay = new Element('div', {'id': 'lbOverlay'}).inject($('wikibody'));
this.center = new Element('div', {'id': 'lbCenter', 'styles': {'width': this.options.initialWidth, 'height': this.options.initialHeight, 'marginLeft': -(this.options.initialWidth/2), 'display': 'none'}}).inject($('wikibody'));
new Element('a', {'id': 'lbCloseLink', 'href':'#', 'title':'slimbox.close.title'.localize()}).inject(this.center).onclick = this.overlay.onclick = this.close.bind(this);
this.image = new Element('div', {'id': 'lbImage'}).inject(this.center);
this.bottomContainer = new Element('div', {'id': 'lbBottomContainer', 'styles': {'display': 'none'}}).inject($('wikibody'));
this.bottom = new Element('div', {'id': 'lbBottom'}).inject(this.bottomContainer);
//new Element('a', {'id': 'lbCloseLink', 'href': '#', 'title':'slimbox.close.title'.localize()}).setHTML('slimbox.close'.localize()).inject(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
this.caption = new Element('div', {'id': 'lbCaption'}).inject(this.bottom);
var info = new Element('div').inject(this.bottom);
this.prevLink = new Element('a', {'id': 'lbPrevLink', 'href': '#', 'styles': {'display': 'none'}}).setHTML('slimbox.previous'.localize()).inject(info);
this.number = new Element('span', {'id': 'lbNumber'}).inject(info);
this.nextLink = this.prevLink.clone().setProperties({'id': 'lbNextLink' }).setHTML('slimbox.next'.localize()).inject(info);
this.prevLink.onclick = this.previous.bind(this);
this.nextLink.onclick = this.next.bind(this);
this.error = new Element('div').setProperty('id', 'lbError').setHTML(this.options.errorMessage);
new Element('div', {'styles': {'clear': 'both'}}).inject(this.bottom);
var nextEffect = this.nextEffect.bind(this);
this.fx = {
overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
resize: this.center.effects($extend({duration: this.options.resizeDuration, onComplete: nextEffect}, this.options.resizeTransition ? {transition: this.options.resizeTransition} : {})),
image: this.image.effect('opacity', {duration: 500, onComplete: nextEffect}),
bottom: this.bottom.effect('margin-top', {duration: 400, onComplete: nextEffect})
};
this.fxs = new Fx.Elements([this.center, this.image], $extend({duration: this.options.resizeDuration, onComplete: nextEffect}, this.options.resizeTransition ? {transition: this.options.resizeTransition} : {}));
this.preloadPrev = new Image();
this.preloadNext = new Image();
},
click: function(link){
var rel = link.rel.split(' ');
if (rel[0].length == 8) return this.open([[url, title, rel[1]]], 0);
var imageNum=0, images = [];
this.anchors.each(function(el){
var elRel = el.rel.split(' ');
if (elRel[0]!=rel[0]) return;
if((el.href==link.href) && (el.title==link.title)) imageNum = images.length;
images.push([el.href, el.title, elRel[1]]);
});
return this.open(images, imageNum);
},
open: function(images, imageNum){
this.images = images;
this.position();
this.setup(true);
this.top = window.getScrollTop() + (window.getHeight() / 15);
this.center.setStyles({top: this.top-20, display: ''});
this.fx.overlay.start(0.7);
return this.changeImage(imageNum);
},
position: function(){
this.overlay.setStyles({top: window.getScrollTop(), height: window.getHeight()});
},
setup: function(open){
/*var elements = $A(document.getElementsByTagName('object'));
elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
elements.each(function(el){
if (open) el.lbBackupStyle = el.style.visibility;
el.style.visibility = open ? 'hidden' : el.lbBackupStyle;
});*/
var fn = open ? 'addEvent' : 'removeEvent';
window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
//document[fn]('keydown', this.eventKeyDown);
this.step = 0;
},
/*keyboardListener: function(event){
switch (event.keyCode){
case 27: case 88: case 67: this.close(); break;
case 37: case 38: case 80: this.previous(); break;
case 13: case 32: case 39: case 40: case 78: this.next(); break;
default: return;
}
new Event(event).stop();
},*/
previous: function(){
return this.changeImage(this.activeImage-1);
},
next: function(){
return this.changeImage(this.activeImage+1);
},
changeImage: function(imageNum){
if (this.step || (imageNum < 0) || (imageNum >= this.images.length)) return false;
this.step = 1;
this.activeImage = imageNum;
this.center.style.backgroundColor = '';
this.bottomContainer.style.display = this.prevLink.style.display = this.nextLink.style.display = 'none';
this.fx.image.hide();
this.center.className = 'lbLoading';
this.preload = new Image();
this.image.empty().setStyle('overflow','hidden');
if( this.images[imageNum][2] == 'img' ){
this.options.showCaption = true;
this.preload.onload = this.nextEffect.bind(this);
this.preload.src =this.images[imageNum][0];
//this.preload.inject(this.image);
//this.nextEffect();
} else if (this.images[imageNum][2] == "inline") {
this.options.showCaption = false;
this.so = new Element('div', {});
var whh = this.images[imageNum][1].split('x');
var tmp_w = parseInt(whh[0]);
var tmp_h = parseInt(whh[1]);
this.preload.width = tmp_w;
this.preload.height = tmp_h;
this.so.innerHTML = $(this.images[imageNum][0]).innerHTML;
this.so.inject(this.image);
this.nextEffect();
} else {
this.options.showCaption = false;
this.iframeId = "lbFrame_"+new Date().getTime(); // Safari would not update iframe content that has static id.
var whh = this.images[imageNum][1].split('x');
var tmp_w = parseInt(whh[0]);
var tmp_h = parseInt(whh[1]);
this.preload.width = tmp_w;
this.preload.height = tmp_h;
this.so = new Element('iframe').setProperties({
id: this.iframeId,
name: this.iframeId,
//width: tmp_w ,
//height: tmp_h,
frameBorder:0,
//scrolling:'auto',
src:this.images[imageNum][0]
}).inject(this.image);
//var iframe = document.getElementById(this.iframeId);
if(window.ie)
this.nextEffect();
else
this.so.onload = this.nextEffect.bind(this);
// //asynchronous loading?
}
return false;
},
ajaxFailure: function (){
this.ajaxFailed = true;
this.image.setHTML('').adopt(this.error.clone());
this.nextEffect();
},
nextEffect: function(){
switch (this.step++){
case 1:
this.center.className = '';
var capt = '' + this.images[this.activeImage][1];
capt = capt.replace(/\\/g,', ');
this.caption.empty().adopt(new Element('a', {
'href':this.images[this.activeImage][0],
'title':"slimbox.directLink".localize(),'style':"width:100%;overflow:auto;white-space:normal;word-wrap:break-word;"
}).setHTML(capt || ''));
var type = (this.images[this.activeImage][2]=='img') ? "slimbox.info" : "slimbox.remoteRequest";
this.number.setHTML((this.images.length == 1) ? '' : type.localize(this.activeImage+1, this.images.length));
var img_w = this.preload.width;
var img_h = this.preload.height;
var img_w_tmp = img_w;
var img_h_tmp = img_h;
var w = Math.max(this.options.initialWidth,this.preload.width);
var h = Math.max(this.options.initialHeight,this.preload.height);
var ww = Window.getWidth()-100;
var wh = Window.getHeight()-130;
if(w > ww) { img_h = h = Math.round(h * ww/w); img_w = w = ww; }
if(h > wh) { img_w = w = Math.round(w * wh/h); img_h = h = wh; }
this.image.style.width = this.bottom.style.width = w+'px';
this.image.style.height = h+'px';
if( this.images[this.activeImage][2]=='img') {
//if (img_w_tmp == img_w && img_h_tmp == img_h) {
// this.caption.empty();
// gwurz: we want to show just the caption and not the link to the original image
// when the original is not more than 25% bigger than the shown image
if (img_w_tmp < img_w*1.25 && img_h_tmp < img_h*1.25) {
if (capt=='[Original Size]') this.caption.empty();
else this.caption.empty().adopt(new Element('div',{'style':"width:100%;overflow:auto;white-space:normal;word-wrap:break-word;"}).setHTML(capt || ''));
}
this.image.innerHTML = "
![](\""+this.images[this.activeImage][0]+"\") |
";
if (this.activeImage) this.preloadPrev.src = this.images[this.activeImage-1][0];
if (this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage+1][0];
this.number.setHTML(this.number.innerHTML);
//this.number.setHTML(this.number.innerHTML+' ['+this.preload.width+'×'+this.preload.height+']');
}
else {
this.so.style.width=(w-20)+'px';
this.so.style.height=(h-5)+'px';
}
if (this.options.showCaption) {
if (this.options.animateCaption) this.bottomContainer.setStyles({height: '0px', display: ''});
}
this.fxs.start({
'0': { height: [this.image.offsetHeight], width: [this.image.offsetWidth], marginLeft: [-this.image.offsetWidth/2] },
'1': { opacity: [1] }
});
break;
case 2:
//this.center.style.backgroundColor = '#000';
this.image.setStyle('overflow','auto');
if (this.options.showCaption) {
this.bottomContainer.setStyles({ top: (this.top-20 + this.center.clientHeight)+'px', marginLeft: this.center.style.marginLeft });
if (this.options.animateCaption){
this.fx.bottom.set(-this.bottom.offsetHeight);
this.bottomContainer.style.height = '';
this.fx.bottom.start(0);
break;
this.bottomContainer.style.height = '';
}
}
case 3:
if (this.activeImage) this.prevLink.style.display = '';
if (this.activeImage != (this.images.length - 1)) this.nextLink.style.display = '';
this.step = 0;
}
},
close: function(){
if (this.step < 0) return;
this.step = -1;
if (this.preload){
this.preload.onload = Class.empty;
this.preload = null;
}
for (var f in this.fx) this.fx[f].stop();
this.center.style.display = this.bottomContainer.style.display = 'none';
//this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
this.overlay.style.visibility = "hidden";
this.overlay.style.opacity = 0;
this.image.empty();
if (typeof(EditTools) != "undefined")
EditTools.releaseLock();
return false;
}
};
![](\""+pref+"/images/cen_lef.gif\")
![](\""+pref+"/images/cen_rig.gif\")