Implementing prettyPhoto in Blogger

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.

It comes with four themes and has been tested and known to work with Firefox 2.0+, Safari 3.1.1+, Opera 9+, Chrome, and Internet Explorer 6.0+.

prettyPhoto is released under the Creative Commons Attribution 2.5 license. This means it’s freely available for all projects (including commercial projects).

             See Demo                                                                                            Download

Steps to Add it to Blogger:

1.Login to the Blogger account.

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it. 

<script charset="utf-8" src="http://dl.dropbox.com/u/27675057/PrettyPhoto/jquery-1.4.4.min.js" type="text/javascript">
</script>  
<link charset="utf-8" href="http://dl.dropbox.com/u/27675057/PrettyPhoto/prettyPhoto.css" media="screen" rel="stylesheet" title="prettyPhoto main stylesheet" type="text/css"></link>  
<script charset="utf-8" src="http://dl.dropbox.com/u/27675057/PrettyPhoto/jquery.prettyPhoto.js" type="text/javascript">
</script> 

Now search for the </body> tag and paste the following code just Above/Before it.

<script charset="utf-8" type="text/javascript">
  
$(document).ready(function(){  
$("a[rel^='prettyPhoto']").prettyPhoto();  
});  
</script> 

2.Go to the Post/Page you want to add the prettyPhoto and go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<script charset="utf-8" src="http://dl.dropbox.com/u/27675057/PrettyPhoto/jquery-1.4.4.min.js" type="text/javascript">
</script>  
<link charset="utf-8" href="http://dl.dropbox.com/u/27675057/PrettyPhoto/prettyPhoto.css" media="screen" rel="stylesheet" title="prettyPhoto main stylesheet" type="text/css"></link>  
<script charset="utf-8" src="http://dl.dropbox.com/u/27675057/PrettyPhoto/jquery.prettyPhoto.js" type="text/javascript">
</script> 

<script charset="utf-8" type="text/javascript">
  
$(document).ready(function(){  
$("a[rel^='prettyPhoto']").prettyPhoto();  
});  
</script> 

4.Now for adding the images into prettyPhoto, Firstly add the image normally using Insert Image button



Now When you see the code in the edit HTMLwindow it would be something like this

<a href=" large3.jpg"=""><img border="0" height="90" src="/small3.jpg" width="120" /></a>

Make it like this

<a href=" " rel="prettyPhoto" ><img src=" " /></a>

As you can see we added only a rel="prettyPhoto".

For making a Gallery add the following code 

<a href=" " rel="prettyPhoto[pp_gal]" ><img src=" " /></a>
<a href=" " rel="prettyPhoto[pp_gal]" ><img src=" " /></a>

Some Example Codes

Single Image
<a href="http://dl.dropbox.com/u/27675057/pic/22.jpg" rel="prettyPhoto" title="Description">  
<img alt="Picture 1 title" height="60" src="http://dl.dropbox.com/u/27675057/pic/22%20%5B800x600%5D.jpg" width="60" />  
</a>

Image Gallery
<a href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."><img alt="Red round shape" height="60" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="60" /></a>&nbsp;&nbsp;<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" rel="prettyPhoto[pp_gal]"><img alt="Nice building" height="60" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="60" /></a>&nbsp;&nbsp;<a href="http://dl.dropbox.com/u/27675057/2.png" rel="prettyPhoto[pp_gal]"><img alt="Fire!" height="60" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="60" /></a>

Flash Content
<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="http://dl.dropbox.com/u/27675057/flash-logo.jpg" alt="Flash 10 demo" width="60" /></a>

Youtube Video
<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="http://dl.dropbox.com/u/27675057/youtube.jpg" alt="YouTube" width="60" /></a>

Vimeo Video
<a href="http://vimeo.com/8245346" rel="prettyPhoto" title=""><img src="http://dl.dropbox.com/u/27675057/vimeo_logo1.png" alt="YouTube" width="60" /></a>

QuickTime Content

<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="http://dl.dropbox.com/u/27675057/quicktime_logo.png" alt="Tales from Earthsea" width="50" /></a>

External Website[IFrames]
<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>

Inline Content 
<a href="#inline-1" rel="prettyPhoto" ><img src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/images/thumbnails/earth-logo.jpg" alt="" width="50" /></a>
<div id="inline-1" class="hide" style="visibility:hidden" >
  <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>

5.Now save the Post/Page andsee the magic.

Note:Please Host all the files on free hosting service like DropBox or Blogspot itself !

             See Demo                                                                                            Download

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox