Super Simple Javascript Image Gallery

ImageGallery.js

// Use a structure of div#gallery -> UL -> LI for gallery items.
// Pass the ul container id for the gallery into the init function and that's it
// ImageGallery.init("gallery", 0);
// Uses Jquery, but it's easy enough to do it without...
var ImageGallery = {
	init: function(galleryContainer, atIndex){
		this.index = 0;
		
		if (!galleryContainer) {
			alert("Yo, dude, you had to do ONE thing.. come on.");
			return;
		};

		this.galleryContainer = galleryContainer;

		if(atIndex)
		{
			this.index = atIndex;
		}
	
		this.displayImageAtIndex();
	},
	
	displayImageAtIndex: function(){
			var that = this;
			
			// Hide all of the images in the gallery except the current image
			$("#"+this.galleryContainer+" ul li").each(function(index, obj){
				if (that.index == index) {
					$(obj).fadeIn("fast");
				}else{
					obj.style.display = "none";
				}
			});
	},
	
	nextImage: function(){
		this.index++;
		this.displayImageAtIndex();
	},

	previousImage: function(){
		if (!this.index) {
			return;
		};

		this.index--;			
		this.displayImageAtIndex();	
	},
	
	goToImage: function(imageIndex){
		this.index = imageIndex;
		this.displayImageAtIndex();
	}
};