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

Find me on Twitter

Email Newsletter

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

Post a Comment

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

@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

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!

@Original Shi2r

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

I switched to other hosting and it works across browsers.

Thank you so much for the tip!

Pradeep said...

Your demo does not work!

The Demo is working smoothly ,what problem are you exactly facing ? Please elaborate a bit

Pradeep said...

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)

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/

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

i still wait .. ?

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

lunaticg said...

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

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

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>

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?

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

http://curtainupcookies.blogspot.com/

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

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

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

Thank you so much! Worked like a charm!

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

Sure thing!

Thanks and glad to help you out

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

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

Unknown said...

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

Dhaval said...

http://www.demo.stylifyyourblog.com/p/prettyphoto.html#!prettyPhoto[pp_gal]/2/ check in chrome Version 40.0.2214.94 dev-m

also check this in chrome
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto[mixed]/0/

if you find solution then inform me

This isn't working anymore? Has it been removed from your dropbox? Thanks!