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!
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.
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.
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.
<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.
Make sure you give the
a tag a title as this is where the caption on the lightbox comes from!