Useful Resources for Web Designers and Developers

Advertise

here through BuySellAds

How to Add Lightbox to WordPress without a Plugin

April 28, 2011 on General

Many times when I’m developing themes – I think of the simplest features to include. Always on top of my list – is a lightbox effect on images. A lightbox effect is when a thumbnail of an image is clicked, the larger version of the image is faded in – while the rest of the page is dimmed in the background. This is very useful because it eliminates the need to leave the current page just to view the large version of the image.

Adding it to a WordPress theme has its benefits as well. For one, the code stays with the theme. Anyone who uses it gets this effect automatically. Not to mention, it’s pretty easy to implement.

This article will walk you through how to add Lightbox into your WordPress themes. I’m also going to assume that you have created WordPress themes before, for you will need to know how to work with template files and such. Ready to get started? Let’s begin.

Grab Pretty Photo

There are many lighbox plugins out there. I choose one called Prettyphoto from no-margin-for-errors.com. Prettyphoto uses jQuery, and is quite extensible. But the main reasons why I chose it is because the animation is flawless and the design is awesome. Download the production version from this link

Extract the .zip file into your hard drive. Inside prettyPhoto_compressed_3.1.2 – you will find the following folders and files. Copy them according to below:

  • prettyPhoto folder (from prettyPhoto_compressed_3.1.2\images) and place inside (yourtheme\images\)
  • prettyPhoto.css (from prettyPhoto_compressed_3.1.2\css) and place inside your theme root folder
  • jquery.prettyPhoto.js (from prettyPhoto_compressed_3.1.2\js) and place inside (yourtheme\scripts\)

Include the Scripts

First we need jQuery. There is a preferred way to include jQuery into our themes – that is to use the wp_enqueue_script function. Open functions.php and add the code below. *If your theme doesn’t have a functions.php file – go ahead and create one.

1
2
3
4
function insert_jquery(){
	wp_enqueue_script('jquery');
}
add_action('init', 'insert_jquery');

Note that this is the preferred way because since WordPress is already shipped with a bunch of scripts (including jQuery) – you might as well use them. It is also considered good practice because updating Worpdress will include these javascript libraries (and how often do you do that!)

Add the Prettyphoto script and css into your theme header.php file:

1
2
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.prettyPhoto.js"></script>

Custom Code

Modify the code in prettyPhoto.css. This step is necessary so the path to the images for prettyPhoto is corrected according to your setup:

  • open prettyPhoto.css
  • CTRL + F (Find) all instances of “url(../
  • And replace with “url(” *There should be around 100 occurences
  • Save the file

Again, this is due to the location of the images and the css file has changed from the example files from prettyPhoto. This ensures the images needed for our lightbox is functioning properly:

lb1 How to Add Lightbox to Wordpress without a Plugin

Open header.php – and add the following code:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">  
jQuery(document).ready(function($) {
   $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
	animationSpeed: 'normal', /* fast/slow/normal */
	padding: 40, /* padding for each side of the picture */
        opacity: 0.35, /* Value betwee 0 and 1 */
	showTitle: true /* true/false */			
	});
})
</script>

What the above code does is selecting all links with the href attribute that equals to anything ending in .jpeg, .jpg, .gif and .png, and applying the prettyPhoto() function to it. This means that any link tag that leads to an image (file extensions mentioned) will trigger prettyPhoto. The script is also enclosed inside a document ready event using a jQuery noConflict wrapper. This is to prevent any compatibility issues with other javascript libraries that maybe included with your theme.

I also went ahead and added some options such as the animation speed, padding and show title to our .prettyPhoto function. For additional customization options – refer to the no-margin-for-errors documentation.

Conclusion

If all goes well – you can test your work by clicking on an image that links to another image. This should launch the prettyPhoto code that we’ve just plugged in. You can also apply the same code to links with inline content, external files, youtube movies or other flash based content. Again, refer to prettyPhoto documentation.

  • http://shutterclick.co.uk Adam Webb

    Hi, I had the problem when I followed this that my images were still opening in a standard browser window. I found that it was because I am using a child theme. Changing the code in the header from bloginfo(‘template_directory’) to bloginfo(‘stylesheet_directory’) solved this for me.
    Thanks a lot for the tutorial!

  • Pingback: How to add Lightbox functionality to WordPress site | WordPress Blog & Entrepreneur()

  • http://www.inforiatif.com awan

    i Was get error with Undefined Title on Bottom :( how to fix it

  • Matt

    The Alt text is displayed above the image in the popup window. The pop up windows display the word “undefined” under the photo. How do I get rid of “undefined”? Am I missing something?
    I’m using a child-theme for Toolbox and everything else for prettyphoto is working as it should.

    • http://fearlessflyer.com michael

      do you have a url?

  • Kailas

    Its not working for twenty eleven….

  • Junaid

    Thanks a lot for this article this is very helpful .I have been search of such a great guideline hats off

  • http://fearlessflyer.com Michael Soriano

    inspect the code – see if jquery is loaded, then the plugin, then your custom code.

  • Bob

    Included the advice from ARS (adding the script tags after the wp_head call), and has worked for me first time – thanks for making my introduction to Lightbox scripts a smooth one :) Appreciate the ability to expand a large image to full size.

  • graeme

    Hello, iv tried to remove the bottom border but having some trouble. Have uploaded an example of what i mean.

    If you can help that would be great.

    • graeme

      the image on the left is the default view.

      image on the right is the view of how i want it to look. I managed to make the bottom border go away by reducing some of the image height in chromes inspect element editor… My understanding is that there is some code that adds “20/40 pixels to the height of the image? Anyone know how i can find this or is their another way?

  • Spoodle

    Can anybody suggest why this ligthbox might not work when the script tags are moved to the footer (just before the closing body tag). I’m including the script element for jquery.js, then for prettyPhoto.js and finally the inline script which applies it to the images, in that order. It works when the second two scripts follow in the header, and fails when they follow in the footer.

  • http://www.seoprix.com Çağatay Belgen

    what is the difference between using this method or using a plugin ? I see no difference…

  • Pingback: Everything You Ever Wanted To Know About The WordPress Lightbox - WordPress Community | powered by Mpress Studios()