jQuery Smooth Div Scroll by Thomas Kahn

Back to index

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.

Field Gnome Pencils Golf River Train Leaf Dog

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="Field" id="field" /></a>
	

The jQuery code looks like this:


$(document).ready(function () {
	// Init Smooth Div Scroll	
	$("#makeMeScrollable").smoothDivScroll({
		mousewheelScrolling: "allDirections",
		manualContinuousScrolling: true
	});

	// Init colorbox
	$("#makeMeScrollable a").colorbox({ speed: "500" });
});

First I initialize Smooth Div Scroll. Then I turn all the link tags (a-tags) inside the scroller to colorbox-links by initializing Colorbox.

Back to index