Shadowbox by Michael J. I. Jackson
Installation on Blogger
1. Go to blogger.com => Log in
2. Select a menu design => Edit HTML
3. Then copy the code below and paste it before the closing head tag
<!-- shadowbox http://little-sharing.blogspot.com/2011/07/shadowbox-for-blogger.html --> <style> #sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;} #sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;} #sb-overlay{position:relative;height:100%;width:100%;} #sb-wrapper{position:absolute;visibility:hidden;width:100px;} #sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;} #sb-body{position:relative;height:100%;} #sb-body-inner{position:absolute;height:100%;width:100%;} #sb-player.html{height:100%;overflow:auto;} #sb-body img{border:none;} #sb-loading{position:relative;height:100%;} #sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;} #sb-loading-inner span{background:url(https://lh4.googleusercontent.com/-Y0hI8uF9v5Q/Ti2DTxb7lyI/AAAAAAAABNQ/RCZL-rZHgjY/loading.gif) no-repeat;padding-left:34px;display:inline-block;} #sb-body,#sb-loading{background-color:#060606;} #sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;} #sb-title,#sb-title-inner{height:26px;line-height:26px;} #sb-title-inner{font-size:16px;} #sb-info,#sb-info-inner{height:20px;line-height:20px;} #sb-info-inner{font-size:12px;} #sb-nav{float:right;height:16px;padding:2px 0;width:45%;} #sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;} #sb-nav-close{background-image:url(https://lh4.googleusercontent.com/-kSxlQyEj-mQ/Ti2DTmYYVjI/AAAAAAAABNI/vT4v55TAXYw/close.png);} #sb-nav-next{background-image:url(https://lh6.googleusercontent.com/-_OVhplu88Mg/Ti2DT8lVQ9I/AAAAAAAABNM/DCy-znDpgOA/next.png);} #sb-nav-previous{background-image:url(https://lh6.googleusercontent.com/-H18JUmTuHqY/Ti2DToNa4KI/AAAAAAAABNE/_bs9SvyxVTE/previous.png);} #sb-nav-play{background-image:url(https://lh3.googleusercontent.com/-28PP4_V1N2I/Ti2DTd4UJGI/AAAAAAAABNA/ML8kjNsvVdg/play.png);} #sb-nav-pause{background-image:url(https://lh6.googleusercontent.com/-ZaaYkWiFHY4/Ti2DTUPfr2I/AAAAAAAABM8/xFNDQ0xnWlU/pause.png);} #sb-counter{float:left;width:45%;} #sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;} #sb-counter a.sb-counter-current{text-decoration:underline;} div.sb-message{font-size:12px;padding:10px;text-align:center;} div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;} </style> <script src='http://little-share.googlecode.com/files/shadowbox.js' type='text/javascript'/> <script type='text/javascript'> Shadowbox.init({ handleOversize: "drag", modal: true }); </script>
4. Save template
Next you need to tell Shadowbox which links you want it to open. The simplest way to do this is through your HTML markup. If you're going to take this route, at the very least you must add a
rel="shadowbox" attribute to each link. For example, say you have this link to an image on your page:<a href="http://excample.com/image.jpg"> Image</a>
image<a href="http://excample.com/image.jpg" rel="shadowbox">Image</a>
That's it! Clicking on this link should now open up the image in Shadowbox.
If you would like to display a title for your image, simply add a
title attribute to the link.<a href="image.jpg" rel="shadowbox" title="Image">Image</a>
rel attribute, separated by semi-colons. To specify a movie's height and width (in pixels), use the height and width parameters.<a href="movie.swf" rel="shadowbox;height=140;width=120">Movie</a>
rel attribute between square brackets immediately following the word shadowbox. The following markup creates a gallery called "Vacation" with two pictures.Galleries may be composed of content of many different types. The following markup demonstrates how various media can be combined into a single gallery.<a href="image.jpg" rel="shadowbox[Vacation]">The Beach</a>
<a href="image.jpg" rel="shadowbox[Vacation]">The Pier</a>
excample
Gallery
[image 1][image 2]
<a rel="shadowbox[Mixed];" href="image1.jpg">[image 1]</a>
<a rel="shadowbox[Mixed];" href="image2.jpg">[image 2]</a>
Youtubehttp://www.youtube.com/watch?v=Wn5hHm2sh6U url should be changed so that it becomes like this http://www.youtube.com/v/Wn5hHm2sh6U
video
<a href="http://www.youtube.com/v/Wn5hHm2sh6U" rel="shadowbox;height=400;width=800;">video</a>
size box ;height=400;width=800;
irfame
Google
<a href="http://yoursite.com" rel="shadowbox">yoursite</a>
<a href="http://google.com" rel="shadowbox">Google.com</a>
<a href="http://yoursite.com" rel="shadowbox">yoursite</a>
<a href="http://google.com" rel="shadowbox">Google.com</a>
