How to use prettyPhoto (lightbox effect) for Post Images in WordPress

Today i am going to guide you how to using prettyPhoto (lightbox popup/slider effect) for images in your post (articles). In this artile i will tell you do that by manually and using WP plugin also.

As you know prettyPhoto is a popular jQuery lightbox which fulfills most needs with showing images, videos, iframes… with popup, slider…(media lightbox). Most of the WordPress themes are using prettyPhoto for homepage slider, brands logo, features images… We can set up it is easy and quick by a plugin or learn how to integrate it with document guide here . It is compatible in the most of the browsers (Firefox 3.0+, Google Chrome 10.0+, Internet Explorer 6.0+, Safari 3.1.1+, Opera 9+…). And it’s not only in WordPress but also it’s used on many websites, blog…with different platforms.

Basically, for using prettyPhoto you need to add some scripts to your website or blog like the jQuery library, prettyPhoto JS (JavaScript) and the prettyPhoto CSS in the head or footer of the page(s). It looks like this:

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

Then you can initialize, use prettyPhoto by using following JS code (you should put it before the closing of body tag):

<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
 $("a[rel^='prettyPhoto']").prettyPhoto();
 });
</script>

More details here: prettyPhoto documentation

Why we do ?

Imagine if you don’t have lightbox for images in your post so when the viewer/reader click on the image inside the post, it is opened in its own window. As you know your reader taken off your blog and sent to the browser’s file or image viewer. They must to hit the back button of browser to back your blog. Wow, this isn’t good for sure, which leads to lose the reader. Or if your them isn’t automatic scale your image, and the image you want to upload that’s quite large then your image able to get cut off or crop a part. Oops !

With the light box effect, your visitors can view the images in a pop-up modal window which help them customize how images are displayed with nice formatting. Lightbox keeps your visitors on blog with great user experience. Fabulous !

How to do it !?

There are some ways to do that so the images in your post used to open the lightbox. You can do easy by using a WordPress plugin.

In my case, i don’t want to use any plugin and i want to integrate it by manually (following the ways below). What you need that’s you already have prettyPho in your theme (but it’s not using in post images). If you don’t have prettyPhoto then you can set up it for use.

1. Install a WP plugin

The easiest way to integrate prettyPhoto with lightbox for post images that’s using a WordPress plugin. You can try it with Simple Lightbox plugin. With this plugin you can many configuration options (for example: UI, label, activation (on page, post, menu…)) that’s great plugin for you look around.

2. Using JS code (manually)

With this method require your theme already integrated prettyPhoto (or other lightbox library). What we need to do that’s adding the class (class="prettyPhoto" or class="lightbox") and the attributes (data-rel="prettyPhoto" or rel="lightbox") to every image inside your post.

You need to add this following code (jQuery) right after $(document).ready(function(){ where you make sure the page is loaded (or put it in JS file of your theme):

$('.blog-content a').has('img').addClass('prettyPhoto');
$('.blog-content a').has('img').attr('data-rel', 'prettyPhoto');

That for single image lightbox. If you want to use multi-image lightbox (post images with lightbox gallery) you need to change this code :

$('.blog-content a').has('img').attr('data-rel', 'prettyPhoto');

to

$('.blog-content a').has('img').attr('data-rel', 'prettyPhoto[]');

It will be better if you write it by a JS function like this:

function oiw_post_slider() {
$('.blog-content a').has('img').addClass('prettyPhoto');
$('.blog-content a').has('img').attr('data-rel', 'prettyPhoto[]');
}

Then call it by using oiw_post_slider();

You also need to replace .blog-content with whatever class name which wrapped your post content . And you can check this is working good by viewing source or use firebug, web development tool… (F12 hotkey). You should have successfully added that class and data-rel or rel attribute to all links that wrap your post images.

3. Using theme’s functions.php file

To do this please open functions.php file of your theme, this file is in location: /wp-content/themes/your-theme/ then drop this code into it to get this working:

function oiw_lightbox_post($content) {
 global $post;
 $pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
 $replacement = '<a$1 rel="prettyPhoto" data-rel="prettyPhoto[]" href=$2$3.$4$5$6</a>';
 $content = preg_replace($pattern, $replacement, $content);
 return $content;
}
add_filter('the_content', 'oiw_lightbox_post');

That’s it, you’ve successfully added prettyPhoto with lightbox effect for post images to your theme.

Note: some plugins don’t use the class (class="prettyPhoto" or class="lightbox") and the attributes (data-rel="prettyPhoto" or rel="lightbox") for activating their lightbox overlay. So in that case, you need to change them to data-rel="whatever-plugin-use" or rel="whatever-plugin-use" to get it works.