// only run this code if this is the _top window. if this // is an iframe, we will reference this func (bottom of script) if(top.location==window.location) { top.lightbox_clickfunc = function(ev) { ev = new Event(ev); var obj = $(ev.target); // climb the dom from the source of the click // right up to the tag, to check if the // event was inside an tag while( obj && obj.getTag ) { if( obj.getTag() == 'a' ) { if( obj.getAttribute('rel') == 'lightbox' ) { // keep track of how many lightboxes are open, stacked // on top of one another (so we can open images inside // lightboxed iframes, above their own lightbox) if( top.lb_num ) top.lb_num++; else top.lb_num = 1; // when the overlay, pic-in-lightbox, // or close button is clicked... var close_func = function() { // if this is the "last" lightbox, remove the overlay, too. // otherwise just remove the "top" lightbox, and decrement if(top.$('lb-overlay') && top.lb_num==1) top.$('lb-overlay').remove(); if(top.$('lbc-'+top.lb_num)) top.$('lbc-'+top.lb_num).remove(); top.lb_num--; } // if there is already an overlay over // the _top window, recycle it var overlay; if(top.$('lb-overlay')) { overlay = $(top.$('lb-overlay')); } else { // fade the document using an overlay div as big as the // window, with an 80% opaque png background (in css) overlay = new Element( 'div', { id: 'lb-overlay', 'class': 'lb-overlay', styles: { width: Client.getWidth(), height: Client.getScrollHeight() }, // when the overlay is clicked, // remove it and the lightbox events: { click: close_func } }).injectInside($(top.document.body)); } // when the "content" of the lightbox is loaded... var load_func = function() { var t = this; var s = t.getSize(); t.removeEvents('load'); // measure the img/iframe (in ie, it must // be injected before it can be measured) if(Client.Engine.ie) t.injectInside($(top.document.body)); var w = t.naturalWidth || t.offsetWidth; var h = t.naturalHeight || t.offsetHeight; // create a container div the same size as // the content, and center it in the viewport var c = new Element('div', { 'class': 'lb-container', id: 'lbc-'+top.lb_num, styles: { width: w + 'px', height: h + 'px', left: (Client.getScrollLeft() + ((Client.getWidth() /2)-(w/2))) + 'px', top: (Client.getScrollTop() + ((Client.getHeight()/2)-(h/2))) + 'px' }}).injectInside($(top.document.body)); // inject the (img/iframe) into the container, and // remove the styles which were hiding this from view t.injectTop(c).setStyles({ position: '', left: '' }); // resize the overlay, in case the width and/or // height of the window has (by injecting the img) top.$('lb-overlay').setStyles({ width: Client.getWidth(), height: Client.getScrollHeight() }); // if this is an image (not an iframe), also close // the lightbox when it is clicked (for super-big images) if(t.getTag()=='img') t.addEvent( 'click', close_func ); // add a 'close' button to the container new Element( 'div', { 'class': 'close', title: 'Close this window', events: { click: close_func } }).injectTop(c); }; // if this link is aimed at a image, create a new full-size // tag to hold the target. otherwise, use an