There are plenty of photo galleries around for you to use, but sometimes you just want something that looks a little different or integrates into your site a little better. In this tutorial, I’m going to make a photo gallery that uses Ajax and Thickbox.

What will we use?

First things first, let’s have an introduction to Thickbox. It’s a small Javascript tool to show the image (or other things) in the middle of the screen with a darkened background. Most people will have seen something similar, in the form of lightbox or some other alternative. I’m using Thickbox because I like it.

Next, we have to deal with the issue of getting the Ajax functionality. For this, I’m going to use Prototype because it’s nice and easy to use, and also because the other Ajax articles on here use it and I want to keep things consistent.

Lastly, we will need a database to hold details of all the images so they can be indexed by number rather than by name. It will need at least details of the link to a thumbnail image, the link to the actual image and a caption.

What’s the concept?

One of the things about a photo gallery that I don’t like is when there are a lot of photos and it takes ages to load. Putting them into a gallery fixes that because you only load up a fixed number at a time.
The only decision that you really need to make is how you want to load the images in – do you want to use AJAX to load in each image separately, or do you want to use AJAX to load in a page displaying the group of images? I’m going to use the latter option because it’s much neater and easier to handle.

How is it done?

Well, this is a fairly straightforward tool to make and only needs a few files.

  • album.php – this will be the main page.
  • image_getter.php – this will get the right group of images.
  • code.js – the contents of this can be put in album.php if you like, it’s just the AJAX stuff.

I’ll make the album page first so we know what to do with our javascript.

<div id="album"> 
<?php include("image_getter.php"); ?> 
</div>

The only div contained in this page is ‘album’, and by default it just includes the standard ‘image_getter.php’ file which will show the first page.

Next we will make the image_getter.php file. There’s really nothing special to this one – take the page number, grab the right images and lay them out however you want them laid out.
As the file is quite long I won’t include it all here, but the important parts are:

Looping through and displaying the thumbnails…

// Loop from the lower bound to the upper bound and display all the images in between,
for($i=$lower; $i<$upper; $i++)
{
	// Include the HTML to display the images as you like them.  The HTML is up to you, but the format of the <a href...> ... </a> section must remain the same
	// so that the thumbnail is displayed first, and the main image is displayed in the popup with a caption.
	?>
	<span id="image<? echo($i); ?>" class="image">
		<a href="<? echo(mysql_result($result, $i, "actual")); ?>" title="<? echo(mysql_result($result, $i, "caption")); ?>" class="thickbox" rel="ajax_gallery">
		<img src="<? echo(mysql_result($result, $i, "thumbnail")); ?>" />
		</a>
	</span>
	<?php
}

…and showing (or not showing) the next and previous page links…

if($lower!=0)
{
	// Display the 'previous page' link.  Alter the HTML to suit the style of your album.
	?><br /><a href="javascript: page('<?=$page-1?>')">Previous Page</a><?php
}
 
if($upper!=$num)
	{
	// Display the 'next page' link.  Alter the HTML to suit the style of your album.
	?><br /><a href="javascript: page('<?=$page+1?>')">Next Page</a><?php
}

The ‘next’ and ‘previous’ links are made here in this file – this means that the relevant link can be omitted at the start/end of the album.

Last thing to do is add the Javascript. The only item of note is what we have to do to make the Thickbox stuff work. Basically, the problem we have is that javascript doesn’t work on AJAX’ed pages, so we need to make the Thickbox tool aware of the new elements. This is done by running the Thickbox initialization function each time an AJAX request is completed.

function page(page_num)
{	
	new Ajax.Request('image_getter.php',
	{
		method:'get', // Use the 'GET' method
		parameters: {page: page_num}, // Pass in the page number as a parameter
		onLoading: function()
		{
			// Display something when the AJAX is loading.  This could be an image or just text...
			document.getElementById('album').innerHTML = "Loading...";
		},
		onSuccess: function(transport)
		{
			// Carry out the action when the AJAX is successful.
			var response = transport.responseText || "No response text";
			document.getElementById('album').innerHTML = response; // Put the response into the 'album' div
			tb_init('a.thickbox, area.thickbox, input.thickbox'); // Initialize the Thickbox again.
		},
		onFailure: function()
		{
			// Display something when the AJAX fails.  This could be an image or just text...
			document.getElementById('album').innerHTML = "Unable to load page.  Oh dear.";
		}
	});
}

That is pretty much all the code – it’s really simple to make and operate. As usual, have a look at the sample code and particularly pay attention to the comments on the code as I try to add as much detail to them as I can.

To use the album, simple include ‘album.php’ wherever you want it and away you go!

Conclusion

So in a few easy steps, you have a completely customizable and very easy to use image gallery. You can change the layout and number of pictures, include it in different pages and really do anything you like with it. Using the Thickbox gives it quite an arty feel and is in keeping with the kind of styles of modern websites.

In the sample code below, I have included album.php, image_getter.php and code.js. You will have to add to that prototype.js, jquery.js, thickbox.js and thickbox.css. These are all available from their respective websites. Once you have them, update the links to them at the top of album.php.

Download the ZIP file

Related Posts

More?

If you enjoyed this post, please consider promoting it.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Reddit
  • Mixx
  • Technorati

Remeber to subscribe to the feed and get future articles delivered to your feed reader.

If you want to discuss this tutorial or any other thoughts you have then you can do so over on our fourm.

Comments

  1. Just curious, if you’re already using the Prototype library, why do you use the longer document.getElementById() instead Prototype’s $()?

    $(’album’) is far faster to write, and can require less reading of code as well.

  2. Comment by jamie on August 15, 2008 1:12 pm

    Well spotted!
    I tend to write my own AJAX code and don’t really use the libraries, so I had just copied it over from my own stuff which had to use the longer version.

    Thanks for pointing it out.

    J

  3. [...] public links >> webdesign Savvy Auntie Saved by robertocunha on Sun 08-2-2009 AJAX Image Gallery | ProgTuts Saved by mecollin on Sun 01-2-2009 Stylishly - free webdesign in PSD Saved by elpelon on Mon [...]

  4. [...] - Lightbox-Plugin funktioniert mit allen Browsern saved by libinhere2009-04-20 - AJAX Image Gallery saved by crnixon2009-04-20 - Innerfade plug-in for Wordpress by Moskis saved by [...]

Leave a Comment

(required)

(required)