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.In past i posted two light box for blogger which are cool but not better than this one i mean this one is more stylish , more easy to use and it also contain tweet and like button for social sharing. Again wanna remind you guys you can also you this light box on your other html documents.
- Go To Blogger > Template > Edit HTML
- Search for </head> and just above it paste following code :
- Now search for </body> and just above this paste following code :
<script charset="utf-8" type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
- Save your template
Done with installing , now post below html codes on your posts to see this magic.....
------------------------------------------------------------
On Images
rel="prettyPhoto"
For Adding Gallery:
rel="prettyPhoto[pp_gal]"
For Adding Links/iFrame:
rel="prettyPhoto[iframe]"
For Flash Content:
rel="prettyPhoto[flash]"
For Youtube Videos
rel=" prettyPhoto "
For Inline Content:
el="prettyPhoto
------------------------------------------------------------
Some Example Codes -
<a href=" IMG URL " rel="prettyPhoto" title="Description">
<img alt="Picture 1 title" height="60" src="IMG URL" width="60" />
</a>
Image Gallery :
<a href="IMG URL" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."><img alt="Red round shape" height="60" src="IMG URL" width="60" /></a> <a href="IMG URL" rel="prettyPhoto[pp_gal]"><img alt="Nice building" height="60" src="IMG URL" width="60" /></a> <a href="IMG UR " rel="prettyPhoto[pp_gal]"><img alt="Fire!" height="60" src="IMG URL" width="60" /></a>
Flash Content :
<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" rel="prettyPhoto[flash]" title="Flash 10 demo">Flash Movie</a>
Youtube Video :
<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">Youtube</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" >Inline Content</a>Having any problem....feel free to comment.....
<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>
