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:

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:

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:

Comments

GenericGuy35

I had some problems getting Lightbox to work well with Opera - not sure about Lightbox2. The demo on the page you posted worked perfectly, […] Read MoreI 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. Read Less

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 […] Read MoreGreat 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!). Read Less

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 […] Read MoreGlad 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 Read Less

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 […] Read MoreHi,
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. Read Less

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 […] Read MoreAre 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? Read Less

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 […] Read MoreHi, 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 . . . Read Less

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.

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 […] Read MoreI 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. Read Less

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 […] Read MoreIt 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. Read Less