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!

15 comments
0 likes
Prev post: Color Palettes: Finding the Perfect CombinationNext post: Everyone’s Talking About Twitter

Related posts

Comments

  • GenericGuy35

    November 30, 2008 at 3:03 am
    Reply

    Any advantage to this over Lightbox? http://www.lokeshdhakar.com/projects/lightbox2/

  • dgdesign

    November 30, 2008 at 5:14 am
    Reply

    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

  • Kate

    January 22, 2009 at 2:55 pm
    Reply

    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

  • dgdesign

    January 22, 2009 at 5:32 pm
    Reply

    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

  • Yonatan

    February 21, 2009 at 8:54 pm
    Reply

    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

  • dgdesign

    February 22, 2009 at 4:04 am
    Reply

    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

  • dan

    April 5, 2009 at 10:12 am
    Reply

    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

  • dgdesign

    April 7, 2009 at 3:50 am
    Reply

    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.

  • twinkling2405

    May 12, 2009 at 11:44 am
    Reply

    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

  • twinkling2405

    May 12, 2009 at 11:45 am
    Reply

    i meant php include - my tags make the code disappear

  • twinkling2405

    May 12, 2009 at 1:17 pm
    Reply

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

  • dgdesign

    May 12, 2009 at 3:38 pm
    Reply

    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

  • katdesignweb

    January 31, 2010 at 4:51 pm
    Reply

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

  • 123

    October 23, 2017 at 11:24 am
    Reply

    Admiring the time and energy you put into your website and in depth information you offer. It's great to come across a blog every once in […] Read MoreAdmiring the time and energy you put into your website and in depth information you offer. It's great to come across a blog every once in a while that isn't the same out of date rehashed material. Fantastic read! I've saved your site and I'm including your RSS feeds to my Google account. Read Less

Leave a Reply

Your email address will not be published. Required fields are marked *

About Me

Hi, I'm Debbie. I love UX. I'm a full-time developer, designer, and email specialist. read more »

Advertisement

Latest Posts
Categories