A simple scrollable image gallery

This demo continues from the minimal setup and adds a simple click action to the scrollable items which will open up a larger version of the thumbnail image.

standalone demo

HTML coding

The scrollable setup is identical to the minimal setup. Nothing has been modified from that. Here we focus only on the elements that are required for showing the large image. First, we add a container for the image above the scrollable. Here is the HTML:

<!-- wrapper element for the large image -->
<div id="image_wrap">
  <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
  <img src="/media/img/blank.gif" width="500" height="375" />
</div>

It's good to give those initial dimensions for the image so that there is no "jumping" on the page and everything stays stable.

CSS coding

We only add styling for the wrapper element:

/* styling for the image wrapper  */
#image_wrap {
    /* dimensions */
    width:700px;
    padding:15px 0;
 
    /* centered */
    text-align:center;
 
    /* some "skinning" */
    background-color:#efefef;
    border:2px solid #fff;
    outline:1px solid #ddd;
    -moz-ouline-radius:4px;
}

JavaScript setup

We add a click handler for the scrollable items. The idea is to load a larger version of the thumbnail image and while the image is loading we apply a simple transparency effect so that the user understands that something is happening.

$(".scrollable").scrollable();
 
$(".items img").click(function() {
	// see if same thumb is being clicked
	if ($(this).hasClass("active")) { return; }
 
	// calclulate large image's URL based on the thumbnail URL (flickr specific)
	var url = $(this).attr("src").replace("_t", "");
 
	// get handle to element that wraps the image and make it semi-transparent
	var wrap = $("#image_wrap").fadeTo("medium", 0.5);
 
	// the large image from www.flickr.com
	var img = new Image();
 

	// call this function after it's loaded
	img.onload = function() {
 
		// make wrapper fully visible
		wrap.fadeTo("fast", 1);
 
		// change the image
		wrap.find("img").attr("src", url);
 
	};
 
	// begin loading the image from www.flickr.com
	img.src = url;
 
	// activate item
	$(".items img").removeClass("active");
	$(this).addClass("active");
 
// when page loads simulate a "click" on the first image
}).filter(":first").click();

Applications

Our thumbnail images come directly from the www.flickr.com service and the associated larger images are simply the same image URL but without a "_t" substring. You are probably not using flickr, but it's very easy to make another kind of solution. Perhaps you can supply the large image's URL to the "alt" attribute of the thumbnail and get it like this:

// in the above example replace the url assignment with this line
var url = $(this).attr("alt");

If you want to have more syntactically correct pages, you might want to enclose your thumbnail images with a tags and supply the large image's url in the href attribute and maybe add some image description to the title attribute. In that case you can have the interesting opportunity to add a tooltip for scrollable items.

It is fairly easy to change the setup so that the thumbnail images will load entire HTML pages with AJAX. This could result in some good user interfaces.

Photo credits »