Image gallery using ColorBox

Here's an example of combining Smooth Div Scroll with a lightbox-style plugin called Colorbox to open up larger versions of the images in an overlay. Eventhough I'm using Colorbox in this example, you should be able to code your own solution for your favourite lightbox-style plugin.

Each image in the scrollable area is surrounded by a href-tag that links to the large image, like this:

<a href="images/hi-res/field_big.jpg"><img src="images/demo/field.jpg" alt="Demo image" /></a>
	

The jQuery code looks like this:

$(window).load(function() {
	$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "always", autoScrollDirection: "endlessloopright", autoScrollStep: 2, autoScrollInterval: 15 });
														
	$("div#makeMeScrollable a").colorbox({speed:"500"});

	// Pause autoscrolling if the user clicks one of the images
	$("div#makeMeScrollable").bind("click", function() {
		$(this).smoothDivScroll("stopAutoScroll");
	});
	
	// Start autoscrolling again when the user closes
	// the colorbox overlay
	$(document).bind('cbox_closed', function(){
		$("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
	});
	
});

First I initialize Smooth Div Scroll. Then I turn all the link tags (a-tags) inside the scroller to colorbox-links by initializing Colorbox. Then there are two event handlers. The first stops the autoscrolling whenever the user clicks on an image. The second uses one of the callbacks that Colorbox provides (cbox_closed) to start the autoscrolling again.

Back to the main page