prettyPhoto

prettyPhoto can open single images.
 
To do so, simply:

1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. 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:

1. To have display a title, add the title into the ALT attribute or your thumbnail image.
2. 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:

1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it and add your gallery name in square brakets (rel=”prettyPhoto“).
3. Change the href of your link so it points to the full size image.

• 
• 
• 
• 
• 

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" 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[pp_gal]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a>

<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>

<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a>

<a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a>

To open an image gallery simply:

1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it and add your gallery name in square brakets (rel=”prettyPhoto“).
3. Change the href of your link so it points to the full size image.
4. Pass the following settings when you initialize prettyPhoto: $(“a[rel^=’prettyPhoto’]”).prettyPhoto({theme: ‘facebook’,slideshow:5000, autoplay_slideshow:true});

• 
• 
• 
• 
• 

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" 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[pp_gal]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a>

<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>

<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a>

<a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><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:

1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. Change the href of your link so it points to the SWF file.
4. Then add the width and height as parameters in your HREF (?width=100&height=100).
5. 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&amp;height=294" rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="60" /></a>

To open YouTube content with it simply:

1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. 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.jpg" alt="YouTube" width="60" /></a>

To open Vimeo content with it simply:

1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. Change the href of your link so it points to the Vimeo video page, the same link you would share with friends.

• 

<a href="http://vimeo.com/8245346" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /></a>

You can open Quicktime videos with it.

To do so, simply:

1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. Change the href of your link so it points to the .mov file.
4. Then add the width and height as parameters in your HREF (?width=100&height=100).

• 
• 
• 

<a title="Despicable Me" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&height=360"><img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Despicable Me" width="50" /></a>

<a title="Tales from Earthsea" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlr1_r640s.mov?width=640&height=340"><img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Tales from Earthsea" width="50" /></a>

<a title="Grease Sing-A-Long" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/paramount/greasesingalong/greasesingalong-tlr1_r640s.mov?width=640&height=272"><img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Grease Sing-A-Long" width="50" /></a>

If all the previous options are not enough, you can always open your content inside an iframe.

To do so, simply:

1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. Change the href of your link so it points to the webpage you want to open.
4. Then add “?iframe=true” as a parameters in your HREF so prettyPhoto knows to open the content in an iframe.
5. 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>

To open inline content, simply:

1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. Change the href of your link so it is the ID of the inline content you want to open with the ID CSS selector (#).

• 
• 

	<a href="#inline-1" rel="prettyPhoto" ><img src="/wp-content/themes/NMFE/images/thumbnails/earth-logo.jpg" alt="" width="50" /></a>
	<div id="inline-1" class="hide">
		<p>This is inline content opened in prettyPhoto.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
	</div>

To open ajax content, simply:

1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. Change the href of your link so it points to the ajax page you want to open.
4. Then add “?ajax=true” as a parameters in your HREF so prettyPhoto knows to open the content with ajax.
5. 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 rel="prettyPhoto[ajax]" href="/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html?ajax=true&width=325&height=185">Ajax content</a>

• 
• 
• 
•