Basic lightbox image gallery using jQuery and wordpress custom field

Wow that’s a title isn’t it? So today I want to show how to do a very simple image gallery on your posts using the well known lightbox javascript class. And because we are on wordpress and we have jQuery not far away I’ll use the jQuery lightbox plugin from Leandro Vieira Pinho.

The custom fields in wordpress allow you to add data to posts and pages, and display them the way you want in your template. To access a custom field value from your template you have to use the get_post_meta function. Pass it the id of the post, the key name and ‘true’. True is here so you get the actual value in return instead of an array.

So we create a ‘gallery’ custom field and insert the path of the different images we want in the gallery, separated by a coma. That where is it a bit ’simple’ because you need to know the path of each image. What I did is upload them with the add media function in wordpress and copy the url of each into the value field.

Now we need to pull the data from the custom field and display images in the post. In your template file you need something like this:

That should display your images in a list. Add a bit of css to constraint the width and height and it should look good enough. Next part the javascript hook. See you tomorrow.