InVision jQuery Gallery BETA

Let's create an image gallery by writing some HTML (and CSS for layout):

<ul class='oldfashion-gallery'>
	<li>
		<a href='#1'><img src="images/img1.jpg" alt="Desc 1" /></a>
		<p class='desc'>Walking thru the woods</p>
	</li>
	<li>
		<a href='#2'><img src="images/img2.jpg" alt="Desc 2" /></a>
		<p class='desc'>Resting near the lake</p>
	</li>
	<li>
		<a href='#3'><img src="images/img3.jpg" alt="Desc 3" /></a>
		<p class='desc'>A waterfall surrounded by flowers</p>
	</li>
	<li>
		<a href='#4'><img src="images/img4.jpg" alt="Desc 4" /></a>
		<p class='desc'>Rowing a boat on the lake</p>
	</li>
</ul>

<style>
	.oldfashion-gallery {
		list-style:none;
	}
	.oldfashion-gallery li {
		display:inline-block;
	}
</style>

Firstly, the result is the old fashion gallery:

Walking thru the woods
Resting near the lake
A waterfall surrounded by flowers
Rowing a boat on the lake

Now, let's add some magic:

<script src='jquery.js' type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	var $g = $('.jquery-gallery').gallery();
});
</script>

And Voila! Here's the InVision jQuery Gallery:

Walking thru the woods
Resting near the lake
A waterfall surrounded by flowers
Rowing a boat on the lake

Note this: Both of these galleries share the same HTML structure :-)

For more information visit:
InVision Web Development

Nightly Build documentation:
InVision jQuery Gallery DOCS