designing4u.de Yet Another Coding Blog

Simple roll over gallery with jQuery

My girlfriend just asked me to redo her blog. Besides new design, she wanted me to give the users possibility to preview her images simply by rolling over the thumbnails and showing the original version right above them. The power of libraries such ThickBox or LightBox give you the possibility to display pictures in hundreds of different ways, but none of them supported the way in which I wanted to accomplish it. I know that there are tons of examples in the internet, which can probably do it better, but I just wanted to share with you, how you can do it in a simple and unobtrusive way using jQuery, which is probably already included in your site (and almost all sites I created:).

In this example I''m assuming that you are placing your original images in /images folder and your thumb images in /images/thumb folder and the file, which will display the gallery is placed in root folder. As usually you need to include the jQuery library in the head section of your document. In the head section you need to also include this code:

$(document).ready(function(){
	$('.thumb img').mouseover(function(){
		var pic = $(this).attr('src');
		var part = pic.split('/');
		$('.big').attr('src',part[0]+'/'+part[2]);
	});
});

And this code in your body section:

<table>
	<tr>
		<td>
			<div style="width:300px;height:300px;">
				<img src="images/pic1.jpg" class="big" />
			</div>
		</td>
	</tr>
	<tr>
		<td class="thumb">
			<img src="images/thumbs/pic1.jpg" />
			<img src="images/thumbs/pic2.jpg" />
			<img src="images/thumbs/pic3.jpg" />
			<img src="images/thumbs/pic4.jpg" />
		</td>
	</tr>
</table>

I know, it's not really the best way to display your gallery and you should feel free to use div placeholders to position it, but remember to keep the class names or adjust them according to your design. In your CSS file you should also add a line cursor:pointer every time a user rolls over the images, because they are not real links. The jQuery code is really simple. Basically every time a user rolls over the image it checks the src attribute, split it into an array and removes the /thumb/ part out of it. After thet it replaces the src attribute in our original size picture, which causes the display of the image. As an addition you can also pass the alt attribute, if you want to, but since it is not visible for google it is not really necessary. That's all. Have fun with this one.