Simple wordpress image gallery v2, using jQuery lightbox plugin

Since my previous post on the subject Basic lightbox image gallery using jQuery and wordpress custom field, Part 2 and Basic lightbox image gallery using jQuery and wordpress custom field I have improved my technique a bit. The last attempt was alright but you had to manually copy and paste stuff in the custom field. It’s ok for technical person but not ideal for the end client.

So here is the revisited version still using the jQuery lightbox plugin from Leandro Vieira Pinho.

what we need

  • A function that retrieve all the pictures attached to a post
  • A loop to display those pictures in the template
  • A javascript hook the get the lightbox effect on those pictures

In part1 we are gonna build the function to get images from a post. When you attache a picture in wordpress it gets uploaded to the upload folder but wordpress also create a post children of the current post with the picture.

Wordpress also create 3 different cropped version of your image. The path to those files are stored in a post meta data.

What I want now is the image url, title and thumbnail url. Here is the function that gets all those information:

function getGallery($id)
{
	global $wpdb;
	
	//SQL query to retrieve all attachment of mime type image/jpeg from the given post
	$querystr = "
	    SELECT ID, post_name, guid, meta_value
	    FROM $wpdb->posts wposts
	    INNER JOIN $wpdb->postmeta meta ON meta.post_id = wposts.ID AND meta.meta_key = '_wp_attachment_metadata'
	    WHERE wposts.post_type = 'attachment'
	    AND wposts.post_parent = '".$id."'
	    AND wposts.post_mime_type = 'image/jpeg' 
	";
	
	//get result set from the query
	$pictures = $wpdb->get_results($querystr, ARRAY_A);
	
	//return resultset
	return $pictures;
}

So we’ve now got a function that returns an array full of all the stuff we need to get started. Next the template loop (part 2 of this tutorial).

Related Items and Services:
Picture Frame at reasonable prices
For image manipulation come to us.

2 responses to “Simple wordpress image gallery v2, using jQuery lightbox plugin”

Leave a Reply

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

    [...] here we are, we’ve got a function that get attached picture from a post and their thumbnails url. Now what? First I forgot to mention that this function should be pasted in the function.php file [...]

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

    [...] Part 1: custom sql query ti retrieve the attachments [...]

Theme Forest ad
Wordpress Themes Collection ad
Woothemes

Poll

How do you start your WordPress plugins development projects?

View Results

Loading ... Loading ...