Creating an Image Gallery with jQuery and ThickBox

If you’re not familiar with jQuery, it’s an open-source JavaScript library which simplifies adding interactive functionality to your website. In this tutorial, I’ll show you how to use ThickBox, one of my favorite jQuery plugins, to create a simple, yet elegant image gallery.

First, Create the HTML page to display your gallery. My sample is just a centered div (margin: 0 auto) with two sets of thumbnails housed in their own divs. The images are floated left with some right margin applied to each. Feel free to use the code as a starting point. The styles are included in the head tag.

In Photoshop, size the thumbnails (uniform sizes work best) and create the larger images that will open when the thumbnails are clicked. I used 450px x 350px for my large images, and 200px x 142px for the thumbnail images. I applied the following style to my img tag to give the images a white border and some space between each thumbnail:

div.gallery img {
border: 1px solid #fff;
float: left;
margin: 0 30px 20px 0;
display: inline;
}

You’ll need the following files for jQuery and Thickbox:

Download the current version of jQuery from jquery.com

Download the ThickBox plugin (the JavaScript).

Download the loading animation. (It’s in the download section on this page – right-click and save to your computer.)

Download thickbox.css (from the same page and area as above) – the ThickBox style sheet

Now you’re ready to put it all together.

In the head of your html document, add links to the jQuery and ThickBox scripts, and link to the thickbox.css style sheet. If you want to use the following code structure, make sure you’ve placed the jquery.js and thickbox.js files in a scripts directory and the thickbox.css in your root directory:

<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”scripts/thickbox.js”></script>
<link href=”thickbox.css” rel=”stylesheet” type=”text/css” />

Place the loadingAnimation.gif file in an images directory. If you choose to rename it or place it in a different directory, be sure to update the file path in the thickbox.js file.

On each of your thumbnail anchor tags, link to the larger images and add a class of “thickbox.” The code will look like this:

<a href=”images/image1_lg.jpg” class=”thickbox”><img src=”images/image1.jpg” width=”200″ height=”142″ alt=”image 1″ /></a>

If you’d like for the user to be able to navigate through a slideshow of all the images when the thickbox image opens, just add a rel=”gallery” to the anchor tag. You can use any name you’d like as long as all the images have the same name. Here’s the link with the added code:

<a href=”images/image3_lg.jpg” class=”thickbox” rel=”gallery”><img src=”images/image3.jpg” width=”200″ height=”142″ alt=”image 6″ /></a>

You can also use thickbox to display HTML in an iFrame. Simply append the url of the html link with “TB_iframe=true&height=400&width=600″ and adjust the size as needed. The code should look like this:

<a href=”text.htmlTB_iframe=true&height=400&width=600″ class=”thickbox”>Click here</a>

See the demo for an example of ThickBox with an iframe.

That’s all there is to it! You can play with the thickbox.css styles to customize your gallery – be creative!

14 Comments

  1. Any advantage to this over Lightbox?

    http://www.lokeshdhakar.com/projects/lightbox2/

  2. I had some problems getting Lightbox to work well with Opera – not sure about Lightbox2. The demo on the page you posted worked perfectly, so it looks like another good option.

  3. Great tutorial! Do you know if there is a way to close the thickbox window/iframe on a right-click? I like the click to close, but would also like to close on right click to prevent photo stealing (at least make it more difficult!).

  4. Glad the tutorial was helpful! I don’t know of a way to close the window on a right-click, but you could try using the iframe approach and including a script to disable right-click on images in the head of the HTML page that loads. Here’s one resource: http://www.dynamicdrive.com/dynamicindex9/noright2.htm

  5. Hi,
    I tried using your code in Officelive but got the error bellow.
    Any idea what needs to be changed to make it competable?

    Thanks!
    Yonatan.

    error message:
    The stylesheet does not contain a document element. The stylesheet may be empty, or it may not be a well-formed
    XML document.

  6. Are you referring to the OfficeLive online website builder? I’m not very familiar with it. It might be a conflict with the code that it generates. I’ve used this JQuery plugin dozens of times and never had a problem, so I suspect it’s a problem with the OfficeLive environment. Do you have full access to the HTML code there?

  7. Hi, I have searched through the web, I find it very hard to use thick box, shadow lightbox js with FLASH. Esp when I had my gallery.swf being called into the main.swf. Could you help explain how can one use thickbox with flash? Thanks . . .

  8. I don’t do much Flash work, so I can’t help you there. I searched a bit and found this: http://www.thetruetribe.com/jquery/1-jquery-api/87-calling-any-js-lightbox-from-flash-using-jquery – it looks promising.

  9. I don’t recommend using iframe – for starters, I did use it, but I have experinced that iframe is’nt the best thing, espacially when it comes to search engines and other stuff. Use the instead.

  10. i meant php include – my tags make the code disappear

  11. I actually can’t make it work… take a look in photogallery, let me know if anyone wants to help me.

  12. It looks like you’re trying something different now, so I can’t really troubleshoot it. I didn’t see the links to JQuery and Thickbox in the head. The iframe is fine for SEO – the url will be indexed, it just won’t be considered an on-page element.

  13. Very easy instructions, it took me only minutes to implement. Thanks!

    • Glad you found it useful, Kathy!

Leave a comment