Simple JQuery / PHP Image Gallery

I previously wrote a Simple, Pure CSS Image Gallery. But times have changed since then, and now everyone seems to be keen on AJAX technologies. So I’ve written a nice and easy Image Gallery script that uses JQuery (and a small bit of PHP).

The problem with the CSS image gallery is that different browsers behave differently when displaying the images. Of course, you don’t get that same problem with AJAX.

Demo of the Simple JQuery / PHP Gallery

JQuery / PHP Image Gallery Code

The gallery relies on 3 separate files (one of which includes the JQuery library). The code is pretty clean and simple.

This is the JQuery code (located in index.php):

1
2
3
4
5
6
7
8
9

	<script type="text/javascript">
	$("document").ready(function() {
		$("ul.jqgal_thumbnails li").click(function () {
			$("#jqgal_images").load('images_display.php', {'id': $(this).attr('id')});
			$("ul.jqgal_thumbnails li").removeClass('jqgal_highlight');
			$(this).addClass('jqgal_highlight');
		});
	});
	</script>

This is the PHP code (located in images_display.php)

1
2
3
4
5
6

<?
$image = str_replace("thumbimage","",$_POST['id']);
?>
<div class="loadimage">
	<img src="images/<?=$image;?>.jpg" alt="" title="" />
</div>

The rest is just HTML/CSS.

DOWNLOAD JQuery / PHP Image Gallery

Any probs? Let me know. I’m not offering full-support on this feature, but if you have any queries, i’ll do my best to assist.

Extra Features

The code I provide in itself is extremely simple. It’s the shell of a gallery image. But by adding a few extra JQuery functions like FadeIn/FadeOut, you can develop the gallery into something beautiful.

Be careful – word of warning

The image naming convention is very important with this script. So if you don’t understand the code, it’s best to stick to the naming convention I’ve provided in the download.