How to Add Lightbox to WordPress without a Plugin

Published: Apr 28, 2011

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.2images) and place inside (yourthemeimages)
  • prettyPhoto.css (from prettyPhoto_compressed_3.1.2css) and place inside your theme root folder
  • jquery.prettyPhoto.js (from prettyPhoto_compressed_3.1.2js) and place inside (yourthemescripts)

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.

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:



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:

Open header.php – and add the following code:


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.

Did you know you can Write for us?

Check out our Guest Post Guidelines to see what it takes.

Submit an Article

48 thoughts on “How to Add Lightbox to WordPress without a Plugin

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

    Spoodle says:

    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.

    graeme says:

    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 says:

    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?

    Bob says:

    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.

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

    AndiR says:

    tried everything – still images open up as new pages – using it on a customized theme http://www.zwei-sinne.com/wortatelier there any picture in the refenzen-Section

    any suggestion?

    Junaid says:

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

    Kailas says:

    Its not working for twenty eleven….

    Matt says:

    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.

    michael says:

    do you have a url?

    Matt says:

    I originally used jquery.prettyPhoto.js v.3.1.2 from the link provided in the tutorial. I just went back and downloaded the production compressed version 3.1.4 from http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/, replaced the jquery.prettyPhoto.js file via ftp and it’s working as it should.
    Thanks, -Matt

    awan says:

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

    Adam Webb says:

    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!

    William A says:

    Hi, the sript is gorgeous, but inside an Ajax placeholder it doesnt work. I mean, I´m loading the content using Ajax to reload only the content, if I use the srcipt using the Ajax funtion it doesnt work but if I erase the ajax function the lightbox works beutifull. can you help me please?

    ARS says:

    not working until I put the script (jquery.prettyPhoto.js and custom javascript) after wp_head()

    Pascal says:

    i love you!
    worked for me <3

    Joni Sori says:

    =) I hope me will =P

    G+ Info says:

    wow, it’s very awesome! Nice effects! I’ll try to my wordpress blog. thanks!

    David G says:

    Hello,
    Great tutorial!
    I see in your picture you have the ability to share/tweet that photo. How do you implement this? I’ve been searching for days to try and come up with something like that for wp, I’m at the end of my tether 🙁

    David G says:

    Ok,

    Half worked this out. To paste to say, facebook and twitter I’d use this:

    <fb:like href=”” layout=”box_count” width=”50″ show_faces=”true” font=””>

    <a href="https://twitter.com/share&quot; class="twitter-share-button" data-url="”>Tweet
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);

    And I think, to get them to post Id need to add them into the header under:

    $(document).ready(function(){
    $(“a[rel^=’prettyPhoto’]”).prettyPhoto({
    social_tools: //the code here

    I think..

    David G says:

    scrap that,
    It just causes lightbox to fail. 🙁 And prints the like box in the heading section. Damn.
    Please help? I know I’m close.

    Si says:

    Doesn’t seem to work; the image just opens in an old school standard empty page. I’ve followed all the instructions, i’ve included all four .js files in a script folder, modified the css and each php file. Is it possible twentyten prevents or may have problems running this?

    try inspecting with firebug console. see if says undefined or not a function = that means the included js are not being found. use console.log on the click event to see if it registers etc.

    Si says:

    Smashing. i’ll wire it all back up tonight and have another crack

    I tried to add social icons and the previous and next arrows for a theme. I applied ur code and i got the social icons are working well and the prev and next buttons are not displaying. How can i add that buttons.

    Amy says:

    Just a note: in the latest version of Pretty Photo, “showTitle” is given as “show_title” … 🙂

    thank you for the update.

    panos says:

    Hello,

    Thanks for the tutorial! I was wondering if there is a way to make it work with an iframe, e.g. open pretty photo showing an external page whenever i have an href link ?

    This is very useful tutorial. Now i can styling my simple blog theme with prettyphoto. Thankyou very much.

    Gad Baboi says:

    wow, and I wasted my time trying to find a solution. thank’s!

    MOR says:

    Great tutorial! I’m trying to add prettPhoto v.3.1.3 into WordPress 3.2.1 with Buddypress. I’ve setup everything under documentation:
    http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/

    however it’s not working…. it’s seems like there are problem on functions.php file… is the above preferred way to include jQuery into buddypress 1.5.1 theme is compatible? i’m try to do something on:
    // Enqueue the global JS – Ajax will not work without it
    wp_enqueue_script( ‘dtheme-ajax-js’, get_template_directory_uri() . ‘/_inc/global.js’, array( ‘jquery’ ), $version );

    on functions.php file. but no luck…. is anyone have same issue?

    Please kindly advice

    Karl says:

    Hi, I got this to work great but when I open the lightbox image it shows a “undefined” message. Please check http://clip2net.com/s/1dqyY

    I believe you have to add a title to your images

    AJ says:

    Great tutorial! I couldn’t get it to work in Firefox initially until I copied all three .js files over (versus just the one mentioned). It was doing weird things but now it’s okay.

    One question though – is there a way to apply this to a wordpress gallery (versus just an individual image)? Any help would be great. Thanks!

    Toure says:

    Do you mind telling us what 3 files and how to pull it off. I followed the tutorial, but no chance yet on making it work.

    Brian says:

    I hope this helps some of you:

    At first my problem was that I was putting the script files into my theme’s “js” folder…they should go in a folder called “scripts”. So either rename your js folder to scripts, or make a new folder and name it scripts.

    Cheers!

    Toure says:

    I believe I follow all the steps, but still can’t make it works. the thumbnails are opening in the full image link.

    zoran says:

    you are awesome.

    paul says:

    Thanks for the great tutorial, very cool 🙂 been on a mission to collect as many of these “without a plugin” tutorials that I can find, and this pretty photo tut is a gem.

    Kavita says:

    I never thought that lightbox feature can be used without a plugin. Will it work both for thumbnails and other images on blogs?

    as long as it points to an image – yes.

    Danny says:

    Hi… Great tutorial… I’m having problems to make it work though (Newbie here!). I’m getting an “Uncaught ReferenceError: jQuery is not defined” error. I followed your steps and added the jQuery call on my functions.php file (btw… I’m using Aparatus 2.0). And when I click on an image on any post, it just open normally (not on a lightbox style). Any suggestions? I tried installing the Plug-in prettyPhoto and trying to use it, but it doesn’t work either.

    Danny says:

    Nevermind… my bad… I was calling the prettyPhoto.js before loading the WP_HEAD(). Living and learning! Thanks again for the tutorial.

    vinit says:

    SuperCool! Looking forward to an article regarding WP3 menu 🙂

Comments are closed.