Borloz.com

While working on a project today, I had the need to automate the process of setting up the necessary attributes to make the lightbox galleries function properly within each of my WordPress posts. For my particular project, I’m using Slimbox, but with some very minor syntax variations, you can apply the technique I’m about to describe to any of the common lightbox libraries (Thickbox, Lightbox, Slimbox, etc.).

Slimbox uses the title attribute of the anchor tag (<a>) that wraps each image as the caption for the full-sized image. But, when you insert an image from your WordPress media library, it puts the title on the image (<img>) tag, as it should, not the anchor that wraps it.

In the past, I’ve added the ‘rel=”lightbox[gallery name]”‘ by hand, but in this particular case there were a lot of pictures and the person who manages the content is not a programmer, so here’s what I did:

First, I’ll show you the document structure I had to work with:

<div id="container">
	<div id="post-slug-1" class="post-body">
		<h2>Post Title 1</h2>
		<p>
			post content...
		</p>
		<div class="images">
			<a href="/image1.jpg" >
				<img alt="alt text" src="/images/image1-150x150.jpg"
					title="Title for image 1"/>
			</a>
			<a href="/image2.jpg" >
				<img alt="alt text" src="/images/image2-150x150.jpg"
					title="Title for image 2"/>
			</a>
		</div>
	</div>
	<div id="post-slug-2" class="post-body">
		<h2>Post Title 2</h2>
		<p>
			post content...
		</p>
		<div class="images">
			<a href="/image3.jpg" >
				<img alt="alt text" src="/images/image3-150x150.jpg"
					title="Title for image 3"/>
			</a>
			<a href="/image4.jpg" >
				<img alt="alt text" src="/images/image4-150x150.jpg"
					title="Title for image 4"/>
			</a>
		</div>
	</div>
</div>

There were two different things that I needed to accomplish:

1. I needed a way to get the title from each image tag to the anchor that wrapped it.
2. I needed a way to automatically assign the gallery name for each set of images. The gallery name is what’s inside of the square brackets and groups the images together, such as: ‘rel=”lightbox[gallery name]”‘. If you’ll notice in the code above, each div with a class of “post-body” also has an id corresponding to the post slug of the post content it wraps. This is done by echoing the “$post->post_name” inside “the loop“.

Here’s where jQuery comes in. I’ll show you the code first and then explain it:

$(document).ready(function() {

	setupLightbox();

}); 

function setupLightbox() {

	$("div.images img").each(function() {

		// Setup titles on anchors based on image titles that they wrap
		$(this).parent("a").attr("title",$(this).attr("title"));

		// Set the rel attribute of the anchor based on the post title
		$(this).parent("a").attr("rel","lightbox[" +
		$(this).parents().filter(".post-body").attr("id") + "]");

	});

} 

What we are doing is looping through the images inside of the div with a class of “images”. Inside the loop, we are doing two things:

1. Taking the title from each <img> tag and assigning it to the title attribute of the anchor that wraps it.
2. Traversing the DOM upwards from each image to grab the id of the parent <div> with a class of post-body. If you remember correctly, we assigned the post slug for each post to the id attribute of this <div>. So, the id attribute of this element makes the perfect (unique) gallery name.

Here’s the final result, after the jQuery code executes:

<div id="container">
	<div id="post-slug-1" class="post-body">
		<h2>Post Title 1</h2>
		<p>
			post content...
		</p>
		<div class="images">
			<a href="/image1.jpg" title="Title for image 1"
			rel="lightbox[post-slug-1]" >
				<img alt="alt text" src="/images/image1-150x150.jpg"
					title="Title for image 1"/>
			</a>
			<a href="/image2.jpg" title="Title for image 2"
			rel="lightbox[post-slug-1]" >
				<img alt="alt text" src="/images/image2-150x150.jpg"
					title="Title for image 2"/>
			</a>
		</div>
	</div>
	<div id="post-slug-2" class="post-body">
		<h2>Post Title 2</h2>
		<p>
			post content...
		</p>
		<div class="images">
			<a href="/image3.jpg" title="Title for image 3"
			rel="lightbox[post-slug-2]" >
				<img alt="alt text" src="/images/image3-150x150.jpg"
					title="Title for image 3"/>
			</a>
			<a href="/image4.jpg" title="Title for image 4"
			rel="lightbox[post-slug-2]" >
				<img alt="alt text" src="/images/image4-150x150.jpg"
					title="Title for image 4"/>
			</a>
		</div>
	</div>
</div>