Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
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>
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
