/**
* JavaScript Image Gallery
*
* @author David Miles
* @created 10/21/2010
* @revised 10/22/2010
*/
/**
* Console fix
*/
if(console === undefined){
var console = {log: function(msg){ alert("Console: " + msg); }};
}
/**
* Page load event
*/
window.onload = function(){
// Loading page? (gallery ID isn't set on non-gallery pages)
if(!document.getElementById("gallery")){
// Add click event to load gallery page
document.getElementById("loadGallery").onclick = function(){
var windowHeight = 430;
var windowWidth = 640;
var gallery = window.open("gallery.htm", "gallery"
, "left=" + ((screen.availWidth - windowWidth) / 2) + ","
+ "top=" + ((screen.availHeight - windowHeight) / 2) + ","
+ "width=" + windowWidth + ",height=" + windowHeight + ","
+ "location=0,resizable=0,status=0,toolbar=0,scrollbars=0,menubar=0");
gallery.focus();
return false;
};
}else{
// Load gallery with our image path
var gallery = new Gallery("./img/gallery/", "_tn.png", "_lg.png");
// Add images
gallery.addItem("You were the last man I was in bed with!", "bed");
gallery.addItem("You're in the danger zone", "dangerzone");
gallery.addItem("The thought of me dead gives you an erection?", "erection");
gallery.addItem("You're obviously into greek!", "greek");
gallery.addItem("I'm always insistent", "insistent");
gallery.addItem("You have a certain thickness", "thickness");
gallery.addItem("Just the Tip", "tip");
gallery.addItem("Trust-breachie worms", "trust");
gallery.addItem("Trust me", "trustme");
gallery.addItem("Like you would recognize a vegetable", "vegetables");
gallery.addItem("Don't make it weird", "weird");
gallery.addItem("Whore Island", "whoreisland");
// Display gallery
document.getElementById("gallery").innerHTML = gallery;
// Initialize events
gallery.init();
}
};
/**
* Gallery class
*
* @param string path Path to gallery files
* @param string suffixThumb Suffix to add to thumbnails
* @param string suffixFullsize Suffix to add to fullsized images
*/
function Gallery(path, suffixThumb, suffixFullsize){
// {{{ Private fields
/**
* Array of objects representing images
*
* @var array
*/
var images = [];
/**
* Fullsized image
*
* @var img
*/
var fullsized = document.getElementById("fullsize");
/**
* Preloading image holder
*
* @var img
*/
var preloading = document.getElementById("preloading");
// }}}
// {{{ Public methods
/**
* Add an item to the images array
*
* @param string title Title to give to thumbnail
* @param string image Image name, without suffix
*/
this.addItem = function(title, image){
images.push({"title": title, "image": image, "id": null, "loaded": false});
};
/**
* Converts object to a string
*
* @return string
*/
this.toString = function(){
var output = "<table><tr>";
// Loop through images
for(var i in images){
// End row?
if(i > 0 && i % 4 == 0){
output += "</tr><tr>";
}
var id = "galleryItem" + i;
output += '<td>'
+ '<a id="' + id + '" href="#">'
+ '<img src="' + path + images[i].image + suffixThumb + '" title="' + images[i].title + '" alt="' + images[i].title + '" />'
+ '</a>'
+ '</td>';
// Save image ID
images[i].id = id;
}
output += "</tr></table>";
return output;
};
/**
* Initializes mouse events
*/
this.init = function(){
/**
* Image load event for preloading image
*/
preloading.onload = function(){
var i = parseInt(this.title);
// Update full-sized image
fullsized.className = "";
fullsized.src = this.src;
fullsized.title = images[i].title;
// Make sure this image doesn't try to preload again
images[i].loaded = true;
};
// Loop through images
for(var i in images){
// Skip non-existant images
if(images[i].id === null) continue;
// Need a reference to this image to add events
var img = document.getElementById(images[i].id);
// Skip non-existant images again
if(img === undefined) continue;
// If we don't use a function here, this closure's reference to i
// will continue to increment. We need a copy, not a reference!
addEvents(img, i);
}
}
// }}}
// {{{ Private methods
/**
* Add mouse events to an image object
*
* @param img img Reference to image object
* @param int i Image index
*/
function addEvents(img, i){
/**
* Mouse over event
*/
img.onmouseover = function(){
// Reset all classes
resetClasses();
this.className = "over";
if(!images[i].loaded){
// Hide full-sized image, so preloading image shows through
fullsized.className = "hidden";
}
// Need to be preloaded?
var container = images[i].loaded ? fullsized : preloading;
// Update fullsize image
container.src = path + images[i].image + suffixFullsize;
// Store the image index if preloading
container.title = container == preloading ? i : images[i].title;
};
/**
* Mouse click event
*/
img.onclick = function(){
return false;
};
}
/**
* Reset selected classes
*/
function resetClasses(){
for(var i in images){
document.getElementById(images[i].id).className = "";
}
}
// }}}
}