Have your images open in a beautiful light box!

I wanted to add a lightbox into a site I’m building and I’m really trying to keep the site as lightweight as possible.

I also needed this lightbox to be free to use on commercial websites. After a bit of research, I decided on PrettyPhoto. PrettyPhoto really is pretty, and has great performance to boot. I don’t see any scrolling jitters with it  unlike some other lightboxes I’ve tried!

Follow the simple procedure below to add the PrettyPhoto jQuery lightbox to your blog. This will work with any child theme, including Genesis child themes.

The Code

Set up

There are a few simple steps that you must take to install the lightbox.

  1. Go to the PrettyPhoto home page and download the latest production version compressed zip file.
  2. Unzip the file and then open the expanded folder.
  3. Using FTP, copy the following files from the unzipped folder into your child theme folder:
  4. <LOCAL COMPUTER>/../prettyPhoto/images/prettyPhoto  —> <HTTP SERVER>/../wp-content/themes/<CHILD THEME>/images/prettyPhoto
    (Copy the whole folder of images called prettyPhoto from the expanded zip into your child theme’s images folder)
  5. <LOCAL COMPUTER>/../prettyPhoto/js/jquery.prettyPhoto.js —> <HTTP SERVER>/../wp-content/themes/<CHILD THEME>/js/jquery.prettyPhoto.js
  6. <LOCAL COMPUTER>/../prettyPhoto/css/prettyPhoto.css —> <HTTP SERVER>/../wp-content/themes/<CHILD THEME>/css/prettyPhoto.css
  7. Paste the code above into your functions.php and you should be all set!
  8. All <a> links, pointing to an image will now open in a lightbox. If you want to open another type of media like a PDF or iframe etc, add rel=”prettyPhoto” to the link you want prettyPhoto to be enabled on!
  9. The <a> link’s title attribute is used as the title in the lightbox.
  10. Go and read the documentation for more configuration options.