Using the jQuery Lightbox Plugin in WordPress
Thickbox thickbox thickbox. Why on earth did Thickbox make it into the WordPress core and Lightbox didn’t? I’m pretty sure that most of you will agree with me – Lightbox is fancier than Thickbox, that cool effect on popup. And the way you can browse through the images in a gallery just by clicking the left and right parts of the image. Thickbox doesn’t have that! It took me a few seconds before I realized there were a “Next” and “Previous” links down there at the bottom of the image, next to the title. Jeez, it’s so impossible to find them! Especially when you click once, the next image is bigger, and bam! You lost the next and previous buttons again, cause they moved away from right under your cursor! That’s so irritating if you ask me. Anti-usability I’d say!
So, Lightbox, yeah okay. The hell with Thickbox being hard-coded into WordPress, let’s build our own themepark with Lightbox and jQuery. Note that we’re not going to use the WordPress Plugin called Lightbox, because that’s aweful (you should know if you’ve ever seen it). Let’s use the original jQuery Lightbox ;) – lightweight and smooth!
Lightbox originally works via Prototype and Scriptaculous (effects and builder) but personally, I don’t really like Prototype (any more) after I discovered jQuery, and god I was so happy when I found the jQuery Lightbox plugin! It’s a little bit more difficult to implement comparing to Thickbox, but believe me, it’s worthed! So let’s get started. Grab your jQuery lightBox plugin and extract the .min.js file, the .css and the images folder. That’s all you need to get it working with WordPress. Move the files over to where your theme is. I like to keep things organized, so I moved my css file into a new folder called css in my theme directory (themes/kovshenin/css), same goes to js (themes/kovshenin/js) and the images (themes/kovshenin/images/lightbox).
You’re half-way through. Open up your theme header.php file and add the following before wp_head() is called:
wp_enqueue_script("jquery");
wp_enqueue_script("jquery-lightbox", get_bloginfo("stylesheet_directory") . "/js/jquery.lightbox-0.5.min.js");
wp_enqueue_style("jquery-lightbox", get_bloginfo("stylesheet_directory") . "/css/jquery.lightbox-0.5.css");
You don’t have to enqueue jquery twice if you already did. Also, you can use combine the first two lines into one using dependencies check for wp_enqueue_script. Take a look at the Codex for wp_enqueue_script for more info.
The original (prototype) Lightbox usually reacts on rel=”lightbox” attribute on links. The jQuery version doesn’t react until you ask it to. Here’s what we gonna do – activate lightbox on all a.lightbox elements on the displayed page. That means all links that have the “lightbox” class. Here’s what you do in header.php AFTER wp_head() but BEFORE the closing head tag:
<script>
jQuery(document).ready(function(){
jQuery("a.lightbox").lightBox({
imageLoading: "<? bloginfo("stylesheet_directory"); ?>/images/lightbox/lightbox-btn-loading.gif",
imageBtnClose: "<? bloginfo("stylesheet_directory"); ?>/images/lightbox/lightbox-btn-close.gif",
imageBtnPrev: "<? bloginfo("stylesheet_directory"); ?>/images/lightbox/lightbox-btn-prev.gif",
imageBtnNext: "<? bloginfo("stylesheet_directory"); ?>/images/lightbox/lightbox-btn-next.gif"
});
});
</script>
Note that we also pass the image parameters to the lightBox() function and use the WordPress bloginfo() function to display our stylesheet directory. That’s the right way to do it. Now all you have to do is try it out, write a new post and insert an image, like this:
<a href="path/to/image.jpg" class="lightbox"><img src="path/to/thumbnail.jpg" /></a>
Done. You can also group images into galleries using the rel attribute:
<a href="path/to/image.jpg" class="lightbox" rel="lightbox[gallery1]">
<img src="path/to/thumbnail.jpg" />
</a>
<a href="path/to/image2.jpg" class="lightbox" rel="lightbox[gallery1]">
<img src="path/to/thumbnail2.jpg" />
</a>
And so on.
One more thing. The NextGen Gallery for WordPress can use effects to show your images, the default effect is of course Thickbox, but you can change that to Lightbox. Just remember that we’re applying the lightBox effect to link with the “lightbox” class, so you should manually edit the link Code line to look like this:
rel="lightbox[%GALLERY_NAME%]" class="lightbox"
All done. Congrats ;)