This tutorial is a synthesis of the instructions found at no-margin-for-errors.com.
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:
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.
<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 pretty much 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!
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:
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.