A Simple jQuery Photo Gallery

A Simple jQuery Photo Gallery

Simple is best

I haven’t done anything on jQuery in a while, so I thought I would write about another simple photo gallery I had to write. Nothing complicated, and easy to add to or edit. I’m basically writing some jQuery to automatically write the large image source attribute, and the thumbnail’s CSS background property, then throwing in some simple effects. For those of you that are just learning jQuery, you will hopefully learn something and be able to modify this little script to suit your needs. So lets get started. Take a look at the demo first though, so you can see what is going on.

View Demo

Here is the HTML:

<div class="halfBlack"></div>
	<div id="container">
		<div id="newGalleryLarge">
			<div class="lrgImgContainer group1">
				<ul>
					<li class="close"></li>
					<li><img src="images/image-1-1b.jpg" /><p>This is image 1</p></li>
					<li><img src="images/image-1-1b.jpg" /><p>This is image 2</p></li>
					<li><img src="images/image-1-1b.jpg" /><p>This is image 3</p></li>
				</ul>
			</div>
			<div class="lrgImgContainer group2">
				<ul>
					<li class="close"></li>
					<li><img src="images/image-2-1b.jpg" /><p>This is image 1</p></li>
					<li><img src="images/image-2-1b.jpg" /><p>This is image 2</p></li>
					<li><img src="images/image-2-1b.jpg" /><p>This is image 3</p></li>
				</ul>
			</div>
			<div class="lrgImgContainer group3">
				<ul>
					<li class="close"></li>
					<li><img src="images/image-3-1b.jpg" /><p>This is image 1</p></li>
					<li><img src="images/image-3-1b.jpg" /><p>This is image 2</p></li>
					<li><img src="images/image-3-1b.jpg" /><p>This is image 3</p></li>
				</ul>
			</div>
			<div class="lrgImgContainer group4">
				<ul>
					<li class="close"></li>
					<li><img src="images/image-4-1b.jpg" /><p>This is image 1</p></li>
					<li><img src="images/image-4-1b.jpg" /><p>This is image 2</p></li>
					<li><img src="images/image-4-1b.jpg" /><p>This is image 3</p></li>
				</ul>
			</div>
		</div>
		<ul id="newGalleryThumbs">
			<li><a href="#"></a>Group 1</li>
			<li><a href="#"></a>Group 2</li>
			<li><a href="#"></a>Group 3</li>
			<li><a href="#"></a>Group 4</li>
		</ul>

Each thumbnail is a list item, and pertains to one of the groups above. Need another thumbnail and its corresponding gallery? Add a list item to the ul “newGalleryThumbs”, copy one of the image groups above it and change the number. Nothing too hard going on here.

Let’s get on to the jQuery…

$(function () {
	var $thumbs = $('#newGalleryThumbs a');
	var $thumbsContainer = $('#newGalleryThumbs');
	var $largeImages = $('#newGalleryLarge div');
 
	var a = 0, b = 0, c = 0, d = 0, e = 0, f = 0;	
 
	$thumbs.each(function() {
		a++;
		$(this).css('background', 'url(images/image-' + a + 'a.jpg)' + ' no-repeat left top');
	});
 
	$('.group1 img').each(function() {
		b++;
		$(this).attr('src', 'images/image-1-' + b + 'b.jpg');
	});
 
	$('.group2 img').each(function() {
		c++;
		$(this).attr('src', 'images/image-2-' + c + 'b.jpg');
	});
 
	$('.group3 img').each(function() {
		d++;
		$(this).attr('src', 'images/image-3-' + d + 'b.jpg');
	});
 
	$('.group4 img').each(function() {
		e++;
		$(this).attr('src', 'images/image-4-' + e + 'b.jpg');
	});
 
 
	$thumbsContainer.delegate("li", "click", function(e) {
		$('.halfBlack').show(500);
		$largeImages.eq($(this).index()).fadeIn(1000);
	});
 
	$('.halfBlack, .close').click(function(e) {
		$largeImages.fadeOut(1000);
		$('.halfBlack').hide(500);
	});
});

Two things to quickly note for you newbies, is that in the script above, I am using variable caching. I am not really sure it is actually caching, but it does store information so that it can be used again without jQuery making further calls to it. You will see that in the first few lines. Looks like this:

var $thumbs = $('#newGalleryThumbs a');

If you are going to be calling something more than once, store the crap in a variable. Got it? Good. The other thing to take note of, is that I am using ‘.delegate()’. Read the post I wrote about it and you’ll see why.

After the variables, you will see that I am using the each() method on the thumbs variable. This is looking at each ‘a’ tag in the unordered list (newGalleryThumbs) and writing the CSS for background on each of them in turn. It takes the variable ‘a’, which starts at 0, and increments it by one each time through the loop. I do a similar thing with the large image groups, only I’m writing the ‘src’ for the image rather than the CSS.

This all works because I am following a strict naming convention in this gallery. All of the thumbnails are going to be named: image-1a.jpg, image-2a.jpg, and so on. All of the large images, say in group 1 will be named image-1-1b.jpg, image-1-2b.jpg, and so on. By naming the images this way, I can use jQuery to write out the source values, and it makes adding more images later on very easy.

Next comes the click function on the thumbnails…

$thumbsContainer.delegate("li", "click", function(e) {
	$('.halfBlack').show(500);
	$largeImages.eq($(this).index()).fadeIn(1000);
});

When one of the thumbnails is clicked, a div with the class name ‘halfBlack’, which is initially hidden, is set to display: block. All that div is, is an empty div with a background image (an all black png set to 50% opacity). This creates the lightbox style effect. The next line says get one of the large image groups and show it. Which one exactly? The one whose index value is equal to the index value of the thumbnail that was clicked. If the first thumbnail is clicked, its index value is ’0′, and it then shows the div that has an index value of ’0′. Piece of cake!

Finally we have to get the large images to go away. I basically am treating this as a light box. Which it pretty much is, I guess. When either the close button or the black div is clicked, it fades out the images, and hides the black div.

Leave a Reply