Category Archives: Development

Posts and examples of web development and design work.

JavaScript and Image Galleries

Posted on by
Reply
For one of my recent freelance projects, I was tasked with creating an image gallery. I wanted the gallery to cycle continuously [i.e. - end to beginning when next is clicked, beginning to end when prev is clicked]; however, when the image was loading [i.e. - it is uncached], I wanted a ‘Loading …’ bar to display. I started to overthink the solution at first; however, the solution turned out to be rather easy. Please note, this solution has only been tested in FF3 and IE6.

function updateImage() {
document.location.hash = currentImage;

var image = document.getElementById('galleryImage');

image.src = documentRoot + galleryName + currentImage + imageSuffix;

// If the image has fully loaded, we are ready to display
// the image, and take away the loading bar.
image.onload = hideLoading;
}

function showLoading() {
document.getElementById('loadingBar').style.display = 'block';
document.getElementById('galleryImage').style.display = 'none';
}

function hideLoading() {
document.getElementById('loadingBar').style.display = 'none';
document.getElementById('galleryImage').style.display = 'block';
}