prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.

prettyPhoto APIs have been integrated within VP MegaMart template so you can make full use of its features. It is very easy to setup your own image gallery or modal image/video zoom within your am article or in module.

Some Examples

Single Image:

prettyPhoto can open single images. To do so, simply: Create a link (). Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”). Change the href of your link so it points to the full size image.

You can also add a title and a description to your picture: To have display a title, add the title into the ALT attribute or your thumbnail image. To have display a description, add the description into the TITLE attribute or your link.

Demo:

Code:

<a title="This is the description" href="images/prettyphoto/1.jpg" rel="prettyPhoto">
<img class="img-polaroid" alt="This is the title" src="images/prettyphoto/thumbs/t_1.jpg" width="50" height="50">
</a>

Image Gallery:

To open an image gallery simply: Create a link (). Add the rel attribute “prettyPhoto” to it and add your gallery name in square brakets (rel=”prettyPhoto“). Change the href of your link so it points to the full size image.

Demo:

Code:

<a href="images/prettyphoto/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures.">
<img class="img-polaroid" src="images/prettyphoto/thumbs/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
<a href="images/prettyphoto/2.jpg" rel="prettyPhoto[pp_gal]">
<img class="img-polaroid" src="images/prettyphoto/thumbs/t_2.jpg" width="60" height="60" alt="Nice building" />
</a>
<a href="images/prettyphoto/3.jpg" rel="prettyPhoto[pp_gal]">
<img class="img-polaroid" src="images/prettyphoto/thumbs/t_3.jpg" width="60" height="60" alt="Fire!" />
</a>
<a href="images/prettyphoto/4.jpg" rel="prettyPhoto[pp_gal]">
<img class="img-polaroid" src="images/prettyphoto/thumbs/t_4.jpg" width="60" height="60" alt="Rock climbing" />
</a>
<a href="images/prettyphoto/5.jpg" rel="prettyPhoto[pp_gal]">
<img class="img-polaroid" src="images/prettyphoto/thumbs/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" />
</a>

Read more about jQuery lightbox for images, videos, YouTube, iframes, ajax | Stéphane Caron – No Margin For Errors on: www.no-margin-for-errors.com