I have had a lot of hits on my How to use Lytebox post, and I thought I might continue it as a series and do something on another of the light box clones. It also looks like lytebox has been discontinued by the author. I have started to use Thickbox. Why you ask? It uses jQuery, and I am starting to really like that library. One of the things that drew me to lytebox was that it had no dependencies. But now, more sites require javascript anyway, and my library of choice is jQuery. So, if I am using jQuery, why not the Thickbox plugin?

If you are not sure about this library, check out this matrix that lists just about every light box type javascript library around.

Setting up Thickbox

The thickbox site has great examples too. It is not hard to set up. Head over to the Thickbox site and grab the files. What you need to get are the thickbox.js file, the thickbox.css file, the loadingAnimation.gif, and the macFFBgHack.png. More on the images in a minute.

Don’t forget, this is a plugin, or aditional library that builds on jQuery, so you will need to download¬†jQuery too. You will only need one file: jQuery.js. For these¬†examples I am not using the compressed versions, but you could. Both jQuery and Thickbox offer compressed versions of their javascript libraries. They might be worth using in a production environment, but I will use the fully spaced files here.

Ok, first up, I like to have a bit of structure to my web sites. I like to have js, css,¬†images, and pictures folders. You don’t have to, but this is what I do. I put my javascript into the js folder. I put style sheets into css, icons and graphics for the site into images, and photographs into the pictures folder. So for this example, that is where¬†I put the files.¬†

/examples/thickbox/js/jquery.js
                 /js/thickbox.js
                 /css/thickbox.js
                 /images/loadingAnimation.gif
                 /images/macFFBgHack.png

A few little tweaks

If you put all of the files into /examples/thickbox/, and not into the structure like we have, you wouldn’t need to do this step, but if you did, we need to edit a couple of thickbox files to let them know what we did.

You can edit files in any number of ways. If you are on a web server running linux, you might want to try nano. It is pretty easy to use, and gives you some ctrl key combinations at the bottom for thigs like saving and searching.

To edit the index html file in nano type:

nano -w index.html

You can move around using the cursor keys, and the terminal will scroll for you. When you want to exit and save, press ctrl-x.

First is the /js/thickbox.js file. We need to modify were the loading animation is located. Change that line to:

var tb_pathToImage = "images/loadingAnimation.gif";

This line is inserted into generated html, so the path is relative to the html page created.

Then we need to look at the /css/thickbox.cc file. We need to navigate down through that file and find the .TB_overlayMacFFBGHack class. Change that to:

.TB_overlayMacFFBGHack {background: url(../images/macFFBgHack.png) repeat;}

What are these files for? The loading animation is a little bar that shows up inbetween when you click on the image, and the larger one is ready. The overlay image is to help firefox on Mac’s provide the screen dimming over flash.

Including our files.

To get our files ‘included’ into a html document, we need to put some lines into the head of the document, like this:

That’s all there is to it. The two script tags insert the javascript, and the link tag inserts the stylesheet.

Apply the effect

Thickbox uses the jQuery library. This means that it is all about selectors. That usually means that we use css class names in our javascript to identify elements on a page. Thickbox uses the “thickbox” class to identify what images to apply this effect to.

Here is a line of html that displays a thumbnail, and when you click on it, it takes you to a different page and displays it full screen.

Here is a line of html that displays a thumbnail, and when you click on it, it uses the thickbox javascript to display the light box type effect.

Not much different is there? The only difference is the class=”thickbox”. I think that is pretty cool. How about linking several images together so that you can use next and previous buttons to link them? You just need to add a rel=”xxx” where xxx is the name of the gallery. As long as this text is the same for each image you want linked together, it can be anything.

The full example

What I show now is a full example of using this to create a gallery. A very simple one. Not going to win any style awards, but it will do. There are 3 versions of the index.html file here. One without the thickbox effect at all (index.html), one with the thickbox effect (index2.html), and one with thickbox using gallerys (index3.html). To make this work I have also added another css file: /css/gallery.css.

  
  
Thickbox Example Gallery

    No Thickbox
    Using Thickbox
    Thickbox with Galleries

  
  
  

  
  
  
  
Cyberward blog post on Thickbox

body {
        background-color: black;
        text-align: center;
        margin:10px;
}
h1, h3, h3 a, span {
        color: white;
        font-family: sans-serif;
        margin:10px;
}
img {
        border: solid 1px gray;
}
img:hover {
        border: solid 1px white;
        /* doesn't work in ie */
}
a img {
        text-decoration: none;
}

There you have it. A pretty simple gallery. Fell free to copy it. You will just need to download the files from jQuery and Thickbox, and get your own images. Have fun.