Superbox/Lightbox is a cool option for all bloggers to display some pics , external links and iframe in this cool window with close option.....you can add this features on your pics , gallery and iframe .
Now you all are thinking how to add this widget......it's simple just follow some simple steps......
- Go To Your Blog > Template > Edit HTML
- Just above ]]></b:skin> post css given below
/* Base Superbox Styles */
#superbox-overlay{position:fixed;top:0;left:0;z-index:9998;width:100%;height:100%;}
#superbox-wrapper{position:fixed;z-index:9999;top:0;display:table;width:100%;height:100%;}
#superbox-container{position:relative;display:table-cell;width:100%;height:100%;margin:0;padding:0;vertical-align:middle;}
#superbox{margin:0 auto;padding:0;}
#superbox-container .loading{margin:0;text-align:center;}
/* IE7 */
*:first-child+html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
*:first-child+html #superbox{position:relative;top:-50%;display:block;}
/* IE6 - Thanks to Thickbox for IE expressions */
* html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
* html #superbox{position:relative;top:-50%;display:block;}
* html #superbox-overlay{position:absolute;height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight + 'px' : document.body.offsetHeight + 'px');}
* html #superbox-wrapper{position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
/* Default Theme */
#superbox-overlay{background:#000;}
#superbox-container .loading{text-align:center;font-size:40px;color:#fff;}
#superbox{padding:10px;background:#fff;}
#superbox-innerbox{padding:10px 0;}
#superbox.image{text-align:center;}
#superbox .close,
#superbox .nextprev{overflow:hidden;margin:0;}
/* Container */
#container{position:relative;overflow:hidden;width:820px;margin:0 auto;padding:0 20px 50px;background:#fff;}
pre{overflow:auto;padding:5px;background:#a7dbd8;}
code{background:#a7dbd8;}
pre code{font:12px monospace;}
ul{list-style-type:square;}
img{border:0}
blockquote{margin:50px 40px 0;font-size:30px;quotes:"\201C" "\201D";}
blockquote p:before{content:open-quote;font-weight:bold;}
blockquote p:after{content:close-quote;font-weight:bold;}
cite{float:right;margin-right:40px;display:inline;}
.translations{float:right;margin-right:20px;top:0;margin:0;padding:0;display:inline;}
.translations dt{margin:0;padding:0;text-indent:-9999px;}
.translations dd{margin:0;padding:0;height:19px;}
.translations dd a{float:right;padding-right:20px;line-height:19px;text-align:right;background:url(flags.png) no-repeat 100% 0;}
.translations dd strong a{text-decoration:none;}
.translations dd.en a{background-position:100% -19px;}
.translated-by{position:absolute;top:46px;right:35px;width:150px;padding:10px;text-align:justify;background:#fff;border:1px solid #fa6900;}
- Just above </head> post the below script
<style type="text/css">
/* Custom Theme */
#superbox-overlay{background:#e0e4cc;}
#superbox-container .loading{width:220px;height:90px;margin:0 auto;text-indent:-9999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRqI5dGWfrHV46PyaCYqx4We1McP_p2qtzFPrirZEvZM2ZbI3BcjzvMXtOWT18nv6oaeh9BJD3IpAT9cJDuKaRhP3g7NftKJQVl2artrjjYIZu0OVe1_MIXKcs9dAKDF9JBF5pv4Z2rA/s1600/Loading.gif) no-repeat 0 0;}
#superbox .close a{float:right;padding:0 5px;line-height:20px;background:#333;cursor:pointer;}
#superbox .close a span{color:#fff;}
#superbox .nextprev a{float:left;margin-right:5px;padding:0 5px;line-height:20px;background:#333;cursor:pointer;color:#fff;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}
</style>
<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
</script>
<script src="http://widcraft.googlecode.com/svn/JSuperbox.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$.superbox.settings = {
closeTxt: "Close",
loadTxt: "Loading...",
nextTxt: "Next",
prevTxt: "Previous"
};
$.superbox();
});
</script>
- Click on Save and you're done with this part.
- Now to add superbox effect on your content add these following code on your image/iframe/gallery -
------------------------------------------------------------
On Images
rel="superbox[image]"
For Adding Gallery:
rel="superbox[gallery][GalleryName]" In all the elements of the Gallery
For Adding Links/iFrame:
rel="superbox[iframe]"
For Inline Content:
el="superbox[content]"
For AJAX Content
rel="superbox[ajax]"
------------------------------------------------------------
Some Example Codes -
On Images -
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" rel="superbox[image]">Image Title</a>
On Gallery -
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" width="75" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" width="75" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" rel="superbox[gallery][my_gallery]"><img alt="" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInulwTgAy_ju2yc6CfWJ25Nx-IvR0Jze-Zapf0GB1_cmUGQOPkw3tVNtzEjZDlIycTaOgsOuQ3mXz6LO7b3YqxBrTN_eOnAFZPkdxy3PwnT21WuVn5GhJ05n9TxaH9mygnP4rSk-BGcY/s1600/Popunder.jpg" width="75" /></a>
On Links/iFrame(default dimensions) -
<a href="http://widcraft.blogspot.com" rel="superbox[iframe]">Iframe Superbox (default dimensions)</a>
On Links/iFrame(defined dimensions) -
<a href="http://widcraft.blogspot.com" rel="superbox[iframe] [750x500]"> Iframe Superbox (definded dimensions)</a>
Inline -
<div id="mode-content">
Generates a box containing an element of the page.
The link will be external, and will point to an element of the page using its <code>id</code> attribute.
This element will be copied to appear in Lighbox.
</div>
<a href="#mode-content" rel="superbox[content]">Superboxox element</a>
<a href="#mode-content" rel="superbox[content][500x400]">Superbox element (dimensions)</a>
Ajax -
<a href="http://pierrebertet.net/projects/jquery_superbox/crockford.html" rel="superbox[ajax][crockford-ajax.html]">AJAX SuperBox</a>