{"id":980,"date":"2009-04-13T11:49:49","date_gmt":"2009-04-13T17:49:49","guid":{"rendered":"http:\/\/www.cyberward.net\/blog\/?p=980"},"modified":"2009-04-20T09:49:30","modified_gmt":"2009-04-20T15:49:30","slug":"how-to-use-thickbox","status":"publish","type":"post","link":"https:\/\/www.cyberward.net\/blog\/2009\/04\/how-to-use-thickbox\/","title":{"rendered":"How to use Thickbox"},"content":{"rendered":"

I have had a lot of hits on my How to use Lytebox<\/a> 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\u00ac\u2020has been discontinued by the author. I have started to use Thickbox<\/a>.\u00ac\u2020Why you ask? It uses jQuery<\/a>, 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?<\/p>\n

If you are not sure about this library, check out this matrix<\/a> that lists just about every light box type javascript library around.<\/p>\n

<\/p>\n

Setting up\u00ac\u2020Thickbox<\/h3>\n

The thickbox site<\/a> 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.<\/p>\n

Don’t forget, this is a plugin, or aditional library that builds on jQuery, so you will need to download\u00ac\u2020jQuery<\/a> too. You will only need one file: jQuery.js. For these\u00ac\u2020examples 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.<\/p>\n

Ok, first up, I like to have a bit of structure to my web sites. I like to have js, css,\u00ac\u2020images, 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\u00ac\u2020I put the files.\u00ac\u2020<\/p>\n

\/examples\/thickbox\/js\/jquery.js\r\n                 \/js\/thickbox.js\r\n                 \/css\/thickbox.js\r\n                 \/images\/loadingAnimation.gif\r\n                 \/images\/macFFBgHack.png<\/pre>\n
A few little tweaks<\/h3>\n
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.<\/p>\n
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.<\/p>\n
To edit the index html file in nano type:<\/p>\n
nano -w index.html<\/pre>\n
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.<\/p>\n
First is the \/js\/thickbox.js file. We need to modify were the loading animation is located. Change that line to:<\/p>\n
var tb_pathToImage = \"images\/loadingAnimation.gif\";<\/pre>\n
This line is inserted into generated html, so the path is relative to the html page created.<\/p>\n
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:<\/p>\n
.TB_overlayMacFFBGHack {background: url(..\/images\/macFFBgHack.png) repeat;}<\/pre>\n
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.<\/p>\n
Including our files.<\/h3>\n
To get our files ‘included’ into a html document, we need to put some lines into the head of the document, like this:<\/p>\n