// -----------------------------------------------------------------------------------
//
// lightbox v2.03.3
// by lokesh dhakar - http://www.huddletogether.com
// 5/21/06
//
// for more information on this script, visit:
// http://huddletogether.com/projects/lightbox2/
//
// licensed under the creative commons attribution 2.5 license - http://creativecommons.org/licenses/by/2.5/
//
// credit also due to those who have helped, inspired, and made their code available to the public.
// including: scott upton(uptonic.com), peter-paul koch(quirksmode.com), thomas fuchs(mir.aculo.us), and others.
//
//
// -----------------------------------------------------------------------------------
/*
table of contents
-----------------
configuration
global variables
extending built-in objects
- object.extend(element)
- array.prototype.removeduplicates()
- array.prototype.empty()
lightbox class declaration
- initialize()
- updateimagelist()
- start()
- changeimage()
- resizeimagecontainer()
- showimage()
- updatedetails()
- updatenav()
- enablekeyboardnav()
- disablekeyboardnav()
- keyboardaction()
- preloadneighborimages()
- end()
miscellaneous functions
- getpagescroll()
- getpagesize()
- getkey()
- listenkey()
- showselectboxes()
- hideselectboxes()
- showflash()
- hideflash()
- pause()
- initlightbox()
function calls
- addloadevent(initlightbox)
*/
// -----------------------------------------------------------------------------------
//
// configuration
//
var fileloadingimage = "images/loading.gif";
var filebottomnavcloseimage = "images/closelabel.gif";
var overlayopacity = 0.8; // controls transparency of shadow overlay
var animate = true; // toggles resizing animations
var resizespeed = 7; // controls the speed of the image resizing animations (1=slowest and 10=fastest)
var bordersize = 10; //if you adjust the padding in the css, you will need to update this variable
// -----------------------------------------------------------------------------------
//
// global variables
//
var imagearray = new array;
var activeimage;
if(animate == true){
overlayduration = 0.2; // shadow fade in/out duration
if(resizespeed > 10){ resizespeed = 10;}
if(resizespeed < 1){ resizespeed = 1;}
resizeduration = (11 - resizespeed) * 0.15;
} else {
overlayduration = 0;
resizeduration = 0;
}
// -----------------------------------------------------------------------------------
//
// additional methods for element added by su, couloir
// - further additions by lokesh dhakar (huddletogether.com)
//
object.extend(element, {
getwidth: function(element) {
element = $(element);
return element.offsetwidth;
},
setwidth: function(element,w) {
element = $(element);
element.style.width = w +"px";
},
setheight: function(element,h) {
element = $(element);
element.style.height = h +"px";
},
settop: function(element,t) {
element = $(element);
element.style.top = t +"px";
},
setleft: function(element,l) {
element = $(element);
element.style.left = l +"px";
},
setsrc: function(element,src) {
element = $(element);
element.src = src;
},
sethref: function(element,href) {
element = $(element);
element.href = href;
},
setinnerhtml: function(element,content) {
element = $(element);
element.innerhtml = content;
}
});
// -----------------------------------------------------------------------------------
//
// extending built-in array object
// - array.removeduplicates()
// - array.empty()
//
array.prototype.removeduplicates = function () {
for(i = 0; i < this.length; i++){
for(j = this.length-1; j>i; j--){
if(this[i][0] == this[j][0]){
this.splice(j,1);
}
}
}
}
// -----------------------------------------------------------------------------------
array.prototype.empty = function () {
for(i = 0; i <= this.length; i++){
this.shift();
}
}
// -----------------------------------------------------------------------------------
//
// lightbox class declaration
// - initialize()
// - start()
// - changeimage()
// - resizeimagecontainer()
// - showimage()
// - updatedetails()
// - updatenav()
// - enablekeyboardnav()
// - disablekeyboardnav()
// - keyboardnavaction()
// - preloadneighborimages()
// - end()
//
// structuring of code inspired by scott upton (http://www.uptonic.com/)
//
var lightbox = class.create();
lightbox.prototype = {
// initialize()
// constructor runs on completion of the dom loading. calls updateimagelist and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
this.updateimagelist();
// code inserts html at the bottom of the page that looks similar to this:
//
//
//
//
//
//
//
//
//
//
//
//
var objbody = document.getelementsbytagname("body").item(0);
var objoverlay = document.createelement("div");
objoverlay.setattribute('id','overlay');
objoverlay.style.display = 'none';
objoverlay.onclick = function() { mylightbox.end(); }
objbody.appendchild(objoverlay);
var objlightbox = document.createelement("div");
objlightbox.setattribute('id','lightbox');
objlightbox.style.display = 'none';
objlightbox.onclick = function(e) { // close lightbox is user clicks shadow overlay
if (!e) var e = window.event;
var clickobj = event.element(e).id;
if ( clickobj == 'lightbox') {
mylightbox.end();
}
};
objbody.appendchild(objlightbox);
var objouterimagecontainer = document.createelement("div");
objouterimagecontainer.setattribute('id','outerimagecontainer');
objlightbox.appendchild(objouterimagecontainer);
// when lightbox starts it will resize itself from 250 by 250 to the current image dimension.
// if animations are turned off, it will be hidden as to prevent a flicker of a
// white 250 by 250 box.
if(animate){
element.setwidth('outerimagecontainer', 250);
element.setheight('outerimagecontainer', 250);
} else {
element.setwidth('outerimagecontainer', 1);
element.setheight('outerimagecontainer', 1);
}
var objimagecontainer = document.createelement("div");
objimagecontainer.setattribute('id','imagecontainer');
objouterimagecontainer.appendchild(objimagecontainer);
var objlightboximage = document.createelement("img");
objlightboximage.setattribute('id','lightboximage');
objimagecontainer.appendchild(objlightboximage);
var objhovernav = document.createelement("div");
objhovernav.setattribute('id','hovernav');
objimagecontainer.appendchild(objhovernav);
var objprevlink = document.createelement("a");
objprevlink.setattribute('id','prevlink');
objprevlink.setattribute('href','#');
objhovernav.appendchild(objprevlink);
var objnextlink = document.createelement("a");
objnextlink.setattribute('id','nextlink');
objnextlink.setattribute('href','#');
objhovernav.appendchild(objnextlink);
var objloading = document.createelement("div");
objloading.setattribute('id','loading');
objimagecontainer.appendchild(objloading);
var objloadinglink = document.createelement("a");
objloadinglink.setattribute('id','loadinglink');
objloadinglink.setattribute('href','#');
objloadinglink.onclick = function() { mylightbox.end(); return false; }
objloading.appendchild(objloadinglink);
var objloadingimage = document.createelement("img");
objloadingimage.setattribute('src', fileloadingimage);
objloadinglink.appendchild(objloadingimage);
var objimagedatacontainer = document.createelement("div");
objimagedatacontainer.setattribute('id','imagedatacontainer');
objlightbox.appendchild(objimagedatacontainer);
var objimagedata = document.createelement("div");
objimagedata.setattribute('id','imagedata');
objimagedatacontainer.appendchild(objimagedata);
var objimagedetails = document.createelement("div");
objimagedetails.setattribute('id','imagedetails');
objimagedata.appendchild(objimagedetails);
var objcaption = document.createelement("span");
objcaption.setattribute('id','caption');
objimagedetails.appendchild(objcaption);
var objnumberdisplay = document.createelement("span");
objnumberdisplay.setattribute('id','numberdisplay');
objimagedetails.appendchild(objnumberdisplay);
var objbottomnav = document.createelement("div");
objbottomnav.setattribute('id','bottomnav');
objimagedata.appendchild(objbottomnav);
var objbottomnavcloselink = document.createelement("a");
objbottomnavcloselink.setattribute('id','bottomnavclose');
objbottomnavcloselink.setattribute('href','#');
objbottomnavcloselink.onclick = function() { mylightbox.end(); return false; }
objbottomnav.appendchild(objbottomnavcloselink);
var objbottomnavcloseimage = document.createelement("img");
objbottomnavcloseimage.setattribute('src', filebottomnavcloseimage);
objbottomnavcloselink.appendchild(objbottomnavcloseimage);
},
//
// updateimagelist()
// loops through anchor tags looking for 'lightbox' references and applies onclick
// events to appropriate links. you can rerun after dynamically adding images w/ajax.
//
updateimagelist: function() {
if (!document.getelementsbytagname){ return; }
var anchors = document.getelementsbytagname('a');
var areas = document.getelementsbytagname('area');
// loop through all anchor tags
for (var i=0; i 1){
element.show('numberdisplay');
element.setinnerhtml( 'numberdisplay', "image " + eval(activeimage + 1) + " of " + imagearray.length);
}
new effect.parallel(
[ new effect.slidedown( 'imagedatacontainer', { sync: true, duration: resizeduration, from: 0.0, to: 1.0 }),
new effect.appear('imagedatacontainer', { sync: true, duration: resizeduration }) ],
{ duration: resizeduration, afterfinish: function() {
// update overlay size and update nav
var arraypagesize = getpagesize();
element.setheight('overlay', arraypagesize[1]);
mylightbox.updatenav();
}
}
);
},
//
// updatenav()
// display appropriate previous and next hover navigation.
//
updatenav: function() {
element.show('hovernav');
// if not first image in set, display prev image button
if(activeimage != 0){
element.show('prevlink');
document.getelementbyid('prevlink').onclick = function() {
mylightbox.changeimage(activeimage - 1); return false;
}
}
// if not last image in set, display next image button
if(activeimage != (imagearray.length - 1)){
element.show('nextlink');
document.getelementbyid('nextlink').onclick = function() {
mylightbox.changeimage(activeimage + 1); return false;
}
}
this.enablekeyboardnav();
},
//
// enablekeyboardnav()
//
enablekeyboardnav: function() {
document.onkeydown = this.keyboardaction;
},
//
// disablekeyboardnav()
//
disablekeyboardnav: function() {
document.onkeydown = '';
},
//
// keyboardaction()
//
keyboardaction: function(e) {
if (e == null) { // ie
keycode = event.keycode;
escapekey = 27;
} else { // mozilla
keycode = e.keycode;
escapekey = e.dom_vk_escape;
}
key = string.fromcharcode(keycode).tolowercase();
if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapekey)){ // close lightbox
mylightbox.end();
} else if((key == 'p') || (keycode == 37)){ // display previous image
if(activeimage != 0){
mylightbox.disablekeyboardnav();
mylightbox.changeimage(activeimage - 1);
}
} else if((key == 'n') || (keycode == 39)){ // display next image
if(activeimage != (imagearray.length - 1)){
mylightbox.disablekeyboardnav();
mylightbox.changeimage(activeimage + 1);
}
}
},
//
// preloadneighborimages()
// preload previous and next images.
//
preloadneighborimages: function(){
if((imagearray.length - 1) > activeimage){
preloadnextimage = new image();
preloadnextimage.src = imagearray[activeimage + 1][0];
}
if(activeimage > 0){
preloadprevimage = new image();
preloadprevimage.src = imagearray[activeimage - 1][0];
}
},
//
// end()
//
end: function() {
this.disablekeyboardnav();
element.hide('lightbox');
new effect.fade('overlay', { duration: overlayduration});
showselectboxes();
showflash();
}
}
// -----------------------------------------------------------------------------------
//
// getpagescroll()
// returns array with x,y page scroll values.
// core code from - quirksmode.com
//
function getpagescroll(){
var xscroll, yscroll;
if (self.pageyoffset) {
yscroll = self.pageyoffset;
xscroll = self.pagexoffset;
} else if (document.documentelement && document.documentelement.scrolltop){ // explorer 6 strict
yscroll = document.documentelement.scrolltop;
xscroll = document.documentelement.scrollleft;
} else if (document.body) {// all other explorers
yscroll = document.body.scrolltop;
xscroll = document.body.scrollleft;
}
arraypagescroll = new array(xscroll,yscroll)
return arraypagescroll;
}
// -----------------------------------------------------------------------------------
//
// getpagesize()
// returns array with page width, height and window width, height
// core code from - quirksmode.com
// edit for firefox by phaez
//
function getpagesize(){
var xscroll, yscroll;
if (window.innerheight && window.scrollmaxy) {
xscroll = window.innerwidth + window.scrollmaxx;
yscroll = window.innerheight + window.scrollmaxy;
} else if (document.body.scrollheight > document.body.offsetheight){ // all but explorer mac
xscroll = document.body.scrollwidth;
yscroll = document.body.scrollheight;
} else { // explorer mac...would also work in explorer 6 strict, mozilla and safari
xscroll = document.body.offsetwidth;
yscroll = document.body.offsetheight;
}
var windowwidth, windowheight;
// console.log(self.innerwidth);
// console.log(document.documentelement.clientwidth);
if (self.innerheight) { // all except explorer
if(document.documentelement.clientwidth){
windowwidth = document.documentelement.clientwidth;
} else {
windowwidth = self.innerwidth;
}
windowheight = self.innerheight;
} else if (document.documentelement && document.documentelement.clientheight) { // explorer 6 strict mode
windowwidth = document.documentelement.clientwidth;
windowheight = document.documentelement.clientheight;
} else if (document.body) { // other explorers
windowwidth = document.body.clientwidth;
windowheight = document.body.clientheight;
}
// for small pages with total height less then height of the viewport
if(yscroll < windowheight){
pageheight = windowheight;
} else {
pageheight = yscroll;
}
// console.log("xscroll " + xscroll)
// console.log("windowwidth " + windowwidth)
// for small pages with total width less then width of the viewport
if(xscroll < windowwidth){
pagewidth = xscroll;
} else {
pagewidth = windowwidth;
}
// console.log("pagewidth " + pagewidth)
arraypagesize = new array(pagewidth,pageheight,windowwidth,windowheight)
return arraypagesize;
}
// -----------------------------------------------------------------------------------
//
// getkey(key)
// gets keycode. if 'x' is pressed then it hides the lightbox.
//
function getkey(e){
if (e == null) { // ie
keycode = event.keycode;
} else { // mozilla
keycode = e.which;
}
key = string.fromcharcode(keycode).tolowercase();
if(key == 'x'){
}
}
// -----------------------------------------------------------------------------------
//
// listenkey()
//
function listenkey () { document.onkeypress = getkey; }
// ---------------------------------------------------
function showselectboxes(){
var selects = document.getelementsbytagname("select");
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = "visible";
}
}
// ---------------------------------------------------
function hideselectboxes(){
var selects = document.getelementsbytagname("select");
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = "hidden";
}
}
// ---------------------------------------------------
function showflash(){
var flashobjects = document.getelementsbytagname("object");
for (i = 0; i < flashobjects.length; i++) {
flashobjects[i].style.visibility = "visible";
}
var flashembeds = document.getelementsbytagname("embed");
for (i = 0; i < flashembeds.length; i++) {
flashembeds[i].style.visibility = "visible";
}
}
// ---------------------------------------------------
function hideflash(){
var flashobjects = document.getelementsbytagname("object");
for (i = 0; i < flashobjects.length; i++) {
flashobjects[i].style.visibility = "hidden";
}
var flashembeds = document.getelementsbytagname("embed");
for (i = 0; i < flashembeds.length; i++) {
flashembeds[i].style.visibility = "hidden";
}
}
// ---------------------------------------------------
//
// pause(numbermillis)
// pauses code execution for specified time. uses busy code, not good.
// help from ran bar-on [ran2103@gmail.com]
//
function pause(ms){
var date = new date();
curdate = null;
do{var curdate = new date();}
while( curdate - date < ms);
}
/*
function pause(numbermillis) {
var curently = new date().gettime() + sender;
while (new date().gettime();
}
*/
// ---------------------------------------------------
function initlightbox() { mylightbox = new lightbox(); }
event.observe(window, 'load', initlightbox, false);