prettyPhoto a jQuery lightbox clone
by: Stéphane Caron
prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It's a full blown media lightbox.
It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!
If you need support with prettyPhoto, please take a look at our forums
Setup
First include the jQuery library, prettyPhoto javascript and the prettyPhoto CSS in the head of the page(s) where you want to use prettyPhoto.
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Then, initialize prettyPhoto. Put the following code before the closing tag of your body (</body>)
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
And...you're set!
To customize prettyPhoto, you can pass the following parameters
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal', /* fast/slow/normal */
padding: 40, /* padding for each side of the picture */
opacity: 0.35, /* Value betwee 0 and 1 */
showTitle: true, /* true/false */
allowresize: true, /* true/false */
counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
theme: 'light_rounded', /* light_rounded / dark_rounded / light_square / dark_square */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
modal: false, /* If set to true, only the close button will close the window */
changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
callback: function(){} /* Called when prettyPhoto is closed */
});
});
</script>
Version 2.5 introduced an easy to use API. You can now open prettyPhoto from anywere.
The public API functions are the following
$.prettyPhoto.open('images/fullscreen/image.jpg','Title','Description');
$.prettyPhoto.changePage('next');
$.prettyPhoto.changePage('previous');
$.prettyPhoto.close();
You can also open galleries using the API, just pass arrays to the open function.
images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg']; titles = ['Title 1','Title 2','Title 3']; descriptions = ['Description 1','Description 2','Description 3'] $.prettyPhoto.open(images,titles,descriptions);
You can now open prettyPhoto from Flash or launch is from anywhere, anytime!
Demos
prettyPhoto can open single images.
To do so, simply:
- Create a link (<a href="#">).
- 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.
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" /></a>
To open an image gallery simply:
- Create a link (<a href="#">).
- Add the rel attribute "prettyPhoto" to it and add your gallery name in square brakets (rel="prettyPhoto[gallery]").
- Change the href of your link so it points to the full size image.
<a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery]" title="You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a> <a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a> <a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a> <a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a> <a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a>
prettyPhoto is also a multimedia lightbox, to open flash content with it simply:
- Create a link (<a href="#">).
- Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
- Change the href of your link so it points to the SWF file.
- Then add the width and height as parameters in your HREF (?width=100&height=100).
- In the case your flash needs specifics variables, add &flashvars and add the required parameters.
<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="images/thumbnails/flash-logo.png" alt="Flash 10 demo" width="60" /></a> <a href="http://vimeo.com/moogaloop.swf?width=580&height=326&flashvars=clip_id=4321799&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" rel="prettyPhoto[flash]" title="Vimeo Movie"><img src="images/thumbnails/flash-logo.png" width="60" alt="Vimeo movie" /></a>
To open YouTube content with it simply:
- Create a link (<a href="#">).
- Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
- Change the href of your link so it points to the YouTube video page, the same link you would share with friends.
<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.png" alt="YouTube" width="60" /></a>
You can open Quicktime videos with it.
To do so, simply:
- Create a link (<a href="#">).
- Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
- Change the href of your link so it points to the .mov file.
- Then add the width and height as parameters in your HREF (?width=100&height=100).
<a href="http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=480&height=204" rel="prettyPhoto[movies]" title="Terminator!"><img src="images/thumbnails/quicktime-logo.gif" width="60" alt="Terminator Salvation" /></a> <a href="http://movies.apple.com/movies/sony_pictures/angelsanddemons/angelsanddemons-video_h.480.mov?width=480&height=260" rel="prettyPhoto[movies]" title="Angels & Demons"><img src="images/thumbnails/quicktime-logo.gif" width="60" alt="Angels & Demons" /></a> <a href="http://movies.apple.com/movies/magnolia_pictures/foodinc/foodinc_h.480.mov?width=480&height=260" rel="prettyPhoto[movies]" title="Food, Inc."><img src="images/thumbnails/quicktime-logo.gif" width="60" alt="Food, Inc." /></a>
If all the previous options are not enough, you can always open your content inside an iframe.
To do so, simply:
- Create a link (<a href="#">).
- Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
- Change the href of your link so it points to the webpage you want to open.
- Then add "?iframe=true" as a parameters in your HREF so prettyPhoto knows to open the content in an iframe.
- Then add the width and height as parameters in your HREF (&width=100&height=100). Please note that the dimensions can be percent based.
<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a> <a href="http://www.apple.com?iframe=true&width=500&height=250" rel="prettyPhoto[iframes]">Apple.com</a> <a href="http://www.twitter.com?iframe=true&width=400&height=200" rel="prettyPhoto[iframes]">Twitter.com</a>
Themes Support!
Choose from one of the 4 supplied themes.
Browser support
This plugin has been tested and is known to work in the following browsers
- Firefox 2.0+
- Safari 3.1.1+
- Opera 9+
- Internet Explorer 6.0+
Copyright
This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. Donations are always welcome.
Download
Version :2.5.4
Version history
- 2.5.4: Fix a bug with the bottom nav, fix the them bug in IE6-7-8
- 2.5.3: New settings (hideflash,modal,changepicturecallback). Fixed a resizing issue and an issue where prettyPhoto would open if a user pressed keyboard keys.
- 2.5.2: Fixed a bug with the titles/descriptions in the gallery.
- 2.5.1: Fixed a bug when not titles/descriptions were provided to the API.
- 2.5: Rewrote the code, created APIs, cleaned the CSS a lot, fixed the keyboard navigation.
- 2.4.3: Fixed IE6 theme fallback support, fixed iframe parameters issue.
- 2.4.2: Implemented YouTube support, percent based sizes are now supported, code optimization.
- 2.4.1: Mixed galleries are now supported. That means you can have a gallery that contains iframe, flash, images, movies.
- 2.4: Added iframe support.
- 2.3.3: Added a classid to fix flash in Internet Explorer
- 2.3.2: Fixed a bug in single movie/flash opening, made a sprite with the images (faster loading).
- 2.3.1: Added callback support
- 2.3: Optimized the code, tweaked the design, movie and flash support is back!
- 2.2.7: Optimized the code, much faster now.
- 2.2.6: Fixed resizing issue.
- 2.2.5: Namespaced a missing classname to prevent conflict with wordpress.
- 2.2.4: Bug fixes, namespaced the classnames to prevent conflict with wordpress.
- 2.2.3: Added themes, reskined the buttons, minor bug fixes
- 2.2.2: Added navigation link beside the counter of the gallery. Localized the separator for the counter (1 "of" 2)
- 2.2.1: Fixed a bug with the gallery in IE6/IE7. Fixed a bug with the keyboard handling in IE6/IE7
- 2.2: Rewrote part of the code, big performance improvement. Images resized can now be expanded. Flash videos can now be opened in prettyPhoto. Keyboard events are now handled.
- 2.1.3: Fixed a bug in Opera, opacity can now be changed by modifying the javascript.
- 2.1.2: Fixed a bug in IE6 where the select boxes were showing on top of prettyPhoto.
- 2.1.1: Descriptions/Titles now support html code, fixed a bug with the resizing not taking the title height into consideration.
- 2.1: Added support for titles.
- 2.0: Fixed a glitch with the image resizing, redesigned the buttons, tweaked the css, images bigger than the viewport are now resized!
- 1.2: Fixed a bug with the single image display (previous button was always being displayed).
- 1.1: Fixed a bug with the description being cut and a bug with the close button.
- 1.0: Initial release of prettyPhoto.
Donations
I've spent a lot of time to develop/support this script. You liked it? Feel free to donate!
Thanks to the following donators
- Jamie Sutton (http://www.charlestoncreative.com/)
- Antti lehtinen (http://www.secondpicture.com/)
- Troi deSignS (http://www.troi.co.il/design_h.php)
- Greg MacNeil (http://www.blackdotdesign.com/)
- Reason8 (http://www.reason8.com)
- Tomas Sadzevicius (http://webarticles.info)
- Matteo Di Capua (http://www.matteodicapua.com)
- That's it for now!
Want to know where I got these pictures?
Jingles the pirate from flickr was kind enough to let me use his pictures.
© Stéphane Caron 2008