var lb = {
/*
* Configuration constants
* i:'default lightbox target',c:'on complete',t:'lightbox bottom text section id'
*/
c:{b:'',i:'img',c:'',t:'lbt',oid:'t-oid',iid:'t-iid',imid:'t-imid',s:''},
hs:{ // hidden style object value
left:'0px',
overflow:'hidden',
position:'absolute',
top:'0px',
visibility:'hidden'
},
ms:{ // modal style
background:'#000',
left:'0px',
margin:'0px',
opacity:'0.0',
position:'absolute',
top:'0px',
zIndex:80
},
ics:{ // image container style
background:'#ddd',
border:'solid 2px #dadada',
position:'fixed',
top:'2%',
overflow:'hidden',
opacity:'0.0',
zIndex:90
},
ies:{ // image element style
margin:'6px 6px 6px 10px',
opacity:'0.0'
},
bcs:{ // bottom container style
color:'#3a3a3a',
fontSize:'11px',
margin:'6px',
overflow:'hidden',
textTransform:'uppercase',
letterSpacing:'0.2px'
},
/*
* Initialization method
*/
i:function(o){
// merge objects
lb.c = Object.merge(lb.c,o);
// define scroll size as fixed values
lb.c.s = document.getScrollSize();
// get body element
lb.c.b = $$('body');
// add onlick lightbox events
$$(lb.c.i).addEvents({
click:function(e){
// stop existing onclick event
e.stop();
// get lightbox properties
p = $(this).getProperty('lb');
// add the overlay
if(p){ lb.o(JSON.decode(p)); }
}
});
},
/*
* modal handler
*/
m:function(o){
var fx1='', fx2='';
// modal background style parameters
m = new Element('div',{id:lb.c.oid, styles:
Object.merge(Object.clone(lb.ms),{height:lb.c.s.y, width:lb.c.s.x})
});
// add event to the modal background
m.addEvents({click:function(e){
// stop existing click event and effects
e.stop(); (fx1)?fx1.cancel():''; (fx2)?fx2.cancel():'';
if($(lb.c.iid) && $(lb.c.oid)){
// fx sequence
fx1 = new Fx.Morph(lb.c.iid,{duration:300,onComplete:function(){
fx2 = new Fx.Morph(lb.c.oid,{duration:300,onComplete:function(){
$(lb.c.iid).destroy(); $(lb.c.oid).destroy();
}}).start({'opacity': '0.0'});
}}).start({'opacity': '0.0'});
}
}});
// grab the element to the body
lb.c.b.grab(m);
// add effect to modal background
(new Fx.Morph(lb.c.oid)).start({'opacity': '0.7'});
},
/*
* image handler
*/
g:function(o){
// image loader temporary container
imcc = new Element('div',{id:'d-'+lb.c.imid,styles:Object.merge(Object.clone(lb.hs),{width:'1px'})});
im = new Element('img',{id:lb.c.imid,src:o.f,styles:Object.merge(Object.clone(lb.hs),{})});
im.addEvent('load',function(){
// image calculation
l = lb.l();
// image container element
ic = new Element('div',{id:lb.c.iid,styles:
Object.merge(Object.clone(lb.ics),{left:( l.xi+($(lb.c.imid).getWidth()/2) )})
});
// image element
im = new Element('img',{id:'img-'+lb.c.iid,src:o.f,styles:
Object.merge(Object.clone(lb.ies),{height:l.imsh,width:l.imsw})
});
// bottom text container element
bc = new Element('div',{id:lb.c.t,styles:
Object.merge(Object.clone(lb.bcs),{})
});
// attach the image and container in the body
ic.grab(im);
ic.grab(bc);
lb.c.b.grab(ic);
// show the image and container
lb.s(l);
// execute the on complete
lb.c.c(o);
});
// attach the image in the body used for preloading
imcc.grab(im);
lb.c.b.grab(imcc);
},
/*
* image maximum size calculation
*/
l:function(){
// maximum size of image size acceptable
var imsw = Number.from($(lb.c.imid).getWidth());
var imsh = Number.from($(lb.c.imid).getHeight());
// get page dimension with 85% tolerance
var dsx = (document.getSize().x * 0.85);
var dsy = (document.getSize().y * 0.85);
// calculate percentage overflow
var pox = (imsw>dsx)?(imsw-dsx)/imsw:0;
var poy = (imsh>dsy)?(imsh-dsy)/imsh:0;
// percentage that will be used
var puu = (pox>poy)?pox:poy;
// adjust width and height if needed
if(pox>0||poy>0){
imsw = imsw-(imsw*puu);
imsh = imsh-(imsh*puu);
}
// calculate the center
var xi = (Number.from(lb.c.s.x) - imsw)/2;
// return maximum size and calculated center
return {xi:xi,imsw:imsw,imsh:imsh};
},
/*
* show the image and container
* - display container in the center position
*/
s:function(l){
// get rendered width and store to temporary variable and set width
wiid = $(lb.c.iid).getWidth(); $(lb.c.iid).setStyle('width','0px');
// add center sliding effect in the container
new Fx.Morph(lb.c.iid,{onComplete:function(){
// add opacity effect in the image
new Fx.Morph('img-'+lb.c.iid).start({'opacity': '1.0'});
}}).start({'width': wiid,'left':l.xi,'opacity': '1.0'});
},
/*
* overall handler
*/
o:function(o){
// destroy existing outer layer[oid], inner layer[iid], middle layer [imid] and image [img-iid]
($(lb.c.oid)) ? $(lb.c.oid).destroy() : '';
($(lb.c.iid)) ? $(lb.c.iid).destroy() : '';
($(lb.c.imid)) ? $(lb.c.imid).destroy() : '';
($('d-'+lb.c.imid)) ? $('d-'+lb.c.imid).destroy() : '';
($('img-'+lb.c.iid)) ? $('img-'+lb.c.iid).destroy() : '';
// call modal handler
lb.m(o);
// call image handler
lb.g(o);
}
}
// call init
lb.i();
<p>simple lightbox for mootools</p>
<p>
<img src="https://www.gravatar.com/avatar/3b342dc9477c684b6278766e7bc1ffcf?s=80" lb="{f:'https://www.gravatar.com/avatar/3b342dc9477c684b6278766e7bc1ffcf?s=80'}" />
</p>
p {font-family:arial; font-size:12px; margin: 12px;}