Simple lightbox for mootools core

Simple lightbox for mootools.

by Joey Albert Abano

HTML

<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>

CSS

p {font-family:arial; font-size:12px; margin: 12px;}

JavaScript

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...