Quick jquery Gallery

Published: 2008-06-24

I had a look at some of the gallery plugins available for jquery and although impressed with some of the cool stuff available decided after trying a few I needed something else.

I didn't need anything fancy, simply a list of images with a click through to an enlarged image and associated image description on the same page.

This was a one off thing so I wasn't too concerned about making it too robust, just wanted to make it work, in as little time as possible. So...

The html

  <script type="text/javascript" 
		src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		/* See javascript bit below */
	</script>
	<ul id="gallery_thumbs">
		<li>
			<img class="gallery_item" src="img_1.jpg" 
				alt="img 1" title="img 1" 
				longdesc="img_1_big.jpg" />
		</li>
		<li>
			<img class="gallery_item" src="img_2.jpg" 
				alt="img 2" title="img 2" 
				longdesc="img_2_big.jpg"  />
		</li>
		<li>
			<img class="gallery_item" src="img_3.jpg" 
				alt="img 3" title="img 3" 
				longdesc="img_3_big.jpg"  />
		</li>
	</ul>
	
	<div id="gallery_item_detail">
		<img id="gallery_item_img" src="default.jpg" 
			alt="big image" title="big image" />
		<div id="gallery_item_desc">
			Default Content
		</div>
	</div>

The css

	#gallery_thumbs li{
		list-style:none;
		float:left;
	}
	#gallery_item_detail, #gallery_item_img, #gallery_item_desc{
		float:left;
		margin-left:15px;
	}

The javascript

Insert this javascript into the '/* See javascript bit below */' bit in the html above.

	$(document).ready(function(){  
		$(".gallery_item").click(function() {
			_gallery_item = $(this);
			$('#gallery_item_detail').fadeOut('fast',function(){
				$('#gallery_item_img').attr('src',
					_gallery_item.attr("longdesc"));
				$('#gallery_item_desc').html(
					_gallery_item.attr('title'));
				$('#gallery_item_detail').fadeIn('slow');
			});
	  });
	});

In conclusion

Jquery is freaking great - 8 lines to create a gallery with fade effects!

This is a very simple gallery implementation that won't suit everyones requirements but works fine for the basics. As you can see the jquery/JS required is very minimal so modifying it further shouldn't prove too difficult. Also... I know I've used the 'longdesc' attribute inappropriately for the purposes of this example I'm not too concerned.

For an example go here. 'View the source' of the example to grab a copy of the complete file.

More from this section