Simple wordpress image gallery v2, using jQuery lightbox plugin, part3

This the last part of a three step tutorial on how to set up a automatic gallery on your wordpress posts using the built in upload function with the lightbox plugin for jQuery.

Part 3: hook up the javascript to your pictures

This is certainly the easiest part since we only have three line of javascript to write, thanks to the power of jQuery selectors and Leandro Vieira Pinho lightbox plugin.

First you will have to change a bit the code of the plugin so it will look at the right place to get the images. Download the files from Leandro website and copy paste the picture of the lighbox to your image folder in wp-content/themes/yourtheme/images. Then download this adapted js file. It is exactly the same as the original from Leandro but I have change the path to each image to a variable so you just have to change it once and it will work for all images.

I want to make it clear, this javascript is not my work, I have just adapted it so it is easier to implement with wordpress. All the credit goes to Leandro.

You will have to change the path variable line 15 to the folder where the pictures of the lightbox are.

Then you want the say to jQuery something like: go to this div and hook a javascript function to each link in there.

jQuery(document).ready(function()
{
   jQuery(‘#gallery a’).lightBox();
});

One response to “Simple wordpress image gallery v2, using jQuery lightbox plugin, part3”

Leave a Reply

  1. Simple wordpress image gallery v2, using jQuery lightbox plugin, part2 | Your Site is Valid Blog

    [...] you refresh your page with this template you will see all attached images displayed. Next step, hook the javascript(part 3 of this tutorial). See you [...]

Theme Forest ad
Wordpress Themes Collection ad
Woothemes

Poll

How do you start your WordPress plugins development projects?

View Results

Loading ... Loading ...