How to Install prettyPhoto JavaScript Lightbox

headmaster @ 11:18 pm


PrettyPhoto JavaScript LightboxLooking for a cool JavaScript lightbox script that displays PHP pages in addition to images or media files? I found an awesome lightbox script at no-margin-for-errors.com called prettyPhoto which provides one of the best solutions around. Installation is easy, just follow these simple steps.

Installing prettyPhoto

This tutorial is a synthesis of the instructions found at no-margin-for-errors.com.

1. Download the installation file here.

2.Uncompress the installation zip file into the root of the website that will be using prettyPhoto.

3. Add the following script and CSS links in the head of your document:

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

4. In the body of the document, 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>

5. This last piece of code is what makes all the magic happen. Include the following JavaScript before closing your head tag.

<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%&amp;height=100%',title);
  }
 
</script>

That’s pretty much 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 WordPress read this article.

 

How to Load a PHP file into prettyPhoto

This is the feature that originally sold me on prettyPhoto. I needed to display an image and an advertising banner on the lightbox at the same time. Because the ad banners needed to come from an actual advertising campaign I wanted to load a PHP page that would call the gallery image and the banner off the ad server at the same time. I evaluated other lightbox scripts at the time and none could do this the way I required it.

See the sample below:

Black holes are the way to go!

If you are interested in doing such a thing then follow the conversation to it’s next article: How to Load a PHP file into prettyPhoto.





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