Basic lightbox image gallery using jQuery and wordpress custom field, Part 2

Yhea I know I said I would give the second part last Saturday but you know, I mean, well…here it is anyway. So if evrything worked you should be able to display a list of images pulled from the custom attribute ‘gallery’. Now to make it a bit more fancy we need to hook the javascript with each image.

After you’ve downloaded the archive from the Jquery lightbox plugin website. Copy the pictures from the images folder into your images folder in your template folder. Also create a folder called js and paste in the javascript file from the plugin (jquery.lightbox-0.5.js).

Now we need to replace some bits in the lighbox plugin. Open jquery.lightbox-0.5.js. At lines 30, 31, 32, 33, 34 are specified the path for the images needed to render the lightbox properly. The problem is when we will include our javascript, this path is gonna be wrong. So before ‘images’ put the path to the images folder of your template folder. Something like ‘http://www.mywebsite.com/wp-content/themes/mytemplate/’.

And of course, because we want to use the jQuery that comes with wordpress, we need to replace each ‘$’ by ‘jQuery’. A quick ctrl+f replace will save you a great deal of time.

Then at the very top we need to hook the javascript to each image, or to be more accurate to the link holding each image. If you did it like I did in the previous post, something like this should do:

Which in English reads: when the page is ready, attache the lighbox function to each link in the container with id=’gallery’. Don’t forget to include you lightbox javascript file and the jQuery library in the header.

Now if everything worked clicking on your picture should open them in the lighbox. Happy?

• 
• 
• 
• 
• 
•