Shadowbox for Blogger

Written By Chotot Dudulzz on Thursday, July 28, 2011 | 10:52 AM

shadowbox



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>

In order to set up this link for use with Shadowbox, simply change it to this:
<a href="http://excample.com/image.jpg" rel="shadowbox">Image</a>

image
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>

You must explicitly tell Shadowbox the dimensions to use to display content other than images. This is done by adding a few parameters to the end of the 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>

In addition to displaying single images and movies, Shadowbox is also capable of displaying galleries of content. In order to designate a link as part of a gallery, you must add the gallery name to the rel attribute between square brackets immediately following the word shadowbox. The following markup creates a gallery called "Vacation" with two pictures.
<a href="image.jpg" rel="shadowbox[Vacation]">The Beach</a>

<a href="
image.jpg" rel="shadowbox[Vacation]">The Pier</a>

Galleries may be composed of content of many different types. The following markup demonstrates how various media can be combined into a single gallery.
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>
Youtube
http://www.youtube.com/watch?v=Wn5hHm2sh6U 
url should be changed so that it becomes like this 
http://www.youtube.com/v/Wn5hHm2sh6U 

excamlpe
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>


Related Post