How to Install prettyPhoto JavaScript Lightbox on a WordPress Theme

headmaster @ 1:14 am


WordPress DevelopmentThis tutorial emerged organically after writing the tutorial for Installing prettyPhoto JavaScript Lightbox.

My original intention was to document the steps I had taken in using the script in a regular good ‘ol fashioned site, (meaning non CMS or Blog script). In the process of writing said tutorial I had to show a working sample on this blog. Since this is a WordPress, Pretty Photo had to be made to work with the existing theme. So I did the install and re-wrote the tutorial to address what I did to make it work on this WP blog.

Caveat: Before you begin

Before anyone goes off and does this to their WordPress know that Pretty Photo is not a WP plug-in or extension and this is not a WP plug-in tutorial. There are those that may argue that simply piggy backing stuff onto your WordPress is a bad idea and I happen to agree. However, after working with this script for a while I have no problem with keeping the lightbox installation on this blog’s theme in the manner I have described below. You should also know this.

Now that we’ve gotten the disclaimer out of the way we can begin:

How to install prettyPhoto on a WP theme

If you followed the original tutorial this should be a snap!

1. Download the installation file here.

2. Uncompress the installation zip file into your theme’s folder. Say your theme is called “classic”, the script folder should then be placed inside, i.e.

WPinstall/wp-content/themes/classic/prettyPhoto/

3. Add the following script and CSS links in the header.php of your WordPress theme, note the WP functions used by the blog to locate the theme’s location.

<script src="<?php echo get_template_directory_uri(); ?>/prettyPhoto/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="<?php echo get_template_directory_uri(); ?>/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

 

4. Include the following JavaScript before closing your head tag in your header.php:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
 
  function prettyLaunch(linkurl, title) {
     document.getElementById("prettyLink").href = linkurl;
     document.getElementById("prettyLink").title = title;
 
     $.prettyPhoto.open(linkurl+'?iframe=true&amp;width=100% height=100%',title);
 
   }
 
</script>

 

That’s all that needs to be done to your theme files. The last step takes place in your actual post.

5. In your post, the following attribute needs to be added to the href of the a element that will be calling the script.

rel="prettyPhoto[iframe]"

For example:

<a href="http://elpasowebworks.com/images/search-for-truth/blackhole.jpg"
rel="prettyPhoto[iframe]" title="Black holes are the way to go!">
<img src="http://elpasowebworks.com/images/search-for-truth/science.jpg"
alt="Black holes are the way to go!" width="186" height="139" border="0" /></a>

 

That’s it. In this first case I am just calling an image: See the sample below.

Black holes are the way to go!

Make sure you give the a tag a title as this is where the caption on the lightbox comes from!

To see how to install prettyPhoto on a plain ‘ol website or page read this article.

To see how load a PHP file into prettyPhoto read this selection.





Ajax CSS CSS gradients CSS rounded corners CSS Style Sheets CSS Transparency error Failed Evaluations footer header image gallery JavaScript javaScript JavaScript Errors jQuery jquery Lightbox light box links open source PHP PHP PHP scripts Pretty Photo prettyPhoto Programming Languages Script Evaluations Search Engine Optimization StatusNet StatusNet themes templates themes Useful CSS Code Useful WordPress Code Web Applications Web Design Web Development Webmaster Toolbelt WordPress wordpress Word Press WordPress 3.3.2 word press links WordPress Plugins wordpress theme
  • Digital Goodies