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.

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


A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




Want to get these Updates straight to your Inbox , Then Subscribe !




Related Articles


28 comments:

  1. Great info! I just just want to ask if there is a way to add continuous play feature here in prettyphoto? I noticed that I only see pause feature while playing the video. :)

    thanks for reply

    ReplyDelete
  2. @PinoyMadeIt
    As of now there is no option define in prettyPhoto for continuous play . If any feature of this kind is added into it ,I will inform you about it

    ReplyDelete
  3. Any idea why this isn't working in Chrome or IE for me? www.shi2do.com - my links fully open in the window rather than in the "lightbox" like they do in FF.

    I am using the jquery 1.6.x while you have 1.4.x version. I always thought latest was best, though?

    I appreciate your post and your time.

    Thanks!

    ReplyDelete
  4. @Original Shi2r

    I suggest that you host your files on Dropbox ,this might solve the problem, to get started see this Tutorial

    ReplyDelete
  5. I switched to other hosting and it works across browsers.

    Thank you so much for the tip!

    ReplyDelete
  6. Replies
    1. The Demo is working smoothly ,what problem are you exactly facing ? Please elaborate a bit

      Delete
    2. Sorry my friend :( Actually I need to post this on Slice Box :D!
      The slice box slider doesn't work on me( I use Mozilla 11)

      Delete
    3. Yep Slicebox works with all its 3D effect only in Webkit browsers a.k.a. Chrome and Safari.
      In Mozilla only the vertical and horizontal style slider works , you can see the Demo here http://tympanus.net/Development/Slicebox/

      Delete
  7. i applied it but i have two proplems

    i no have facebook like button on images .. i have only twiter ..

    sec, images or video etc .. not in center .. it's float to right . .

    how i fix that ??

    my demo page >>
    http://www.orkyda.com/2012/03/test_6595.html

    ReplyDelete
  8. Replies
    1. Remove the FB LikeBox , it is most probably interfering with the Like Button

      About the Images placement, I checked they were in the center with exception of the First image which had a kind of padding around it, it due to some conflicting CSS present in your blog

      Delete
  9. Can I make it like a slideshow.., my readers don't need to click anything.., just wait and watch the pictures.

    ReplyDelete
  10. I would like to apply this to only my static pages. Where would I put the conditional tag? Thanks!

    ReplyDelete
    Replies
    1. You will have to put the code in the Edit HTML , then enclose them around the following conditional tags as follows

      <b:if cond='data:blog.pageType == "static_page"'>
      ---The Prettyphoto code---
      </b:if>

      Delete
    2. Thank you, but I am having trouble getting it to work at all. It just reverted to Blogger's lightbox, and when I turned off the lightbox, it just opens up the picture on a new page. Do I have to remove Blogger's lightbox to make it work?

      Delete
    3. Please provide the URL where you are implementing Prettyphoto so that I can help you further

      Delete
    4. http://curtainupcookies.blogspot.com/

      Delete
    5. When I checked the source of one of the Pages with pictures, I found that you had not added the rel="prettyPhoto" tag in the image as instructed in Step 4 . Add the above tag and then check whether it works or not

      Delete
    6. Oh sorry, I was testing it on this page http://curtainupcookies.blogspot.com/p/blog-page.html

      Delete
    7. There are two major things that are causing the problem

      Firstly your blog has 4 instances of jQuery library , whereas it should have only one. Just include the first one in the head of your blog (1.6.4) and remove the others

      Secondly the jQuery UI Tabs were conflicting with this plugins functioning , therefore when I removed the following code ,it worked just fine

      <script type='text/javascript'>
      $(document).ready(function(){
      $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
      });
      </script>

      I suppose you are not using it here anyways can put them in the conditional tags to work everywhere instead of the Static Pages by enclosing them in the following condition

      <b:if cond='data:blog.pageType != "static_page"'>
      ---The Tabs code---
      </b:if>

      Here is a URL where I made it work http://dl.dropbox.com/u/27675057/aaa_2.html

      Delete
    8. Thank you so much! Worked like a charm!

      Delete
    9. I had a humble request , When I checked your blog I saw that you were using my Dropbox links for PrettyPhoto scripts and stylesheets. Can you create your own Dropbox account and host the PrettyPhoto scripts and stylesheets there. Its Free and I also a tutorial on How to Host your files on Dropbox

      Delete
    10. Thanks and glad to help you out

      Delete
  11. man this tutorial saved my life last night thanks.....cuz i needed a simple lightbox and this one is perfect

    ReplyDelete
  12. How can I customize the size of pop up photo in slide, please help

    ReplyDelete
  13. Hey bro...Need some help please...I installed all these things and code correctly..But,i am getting two pretty photos,one behind the other,,please help me out..
    My site is:www.tollywoodjunction.in
    Regards

    ReplyDelete