Home Posts filed under Lightbox

Showing posts with label Lightbox. Show all posts
Showing posts with label Lightbox. Show all posts

Friday, 14 September 2012

PixelBox



Download Demo

I'am a huge lightbox fan and often peoples ask me which lightbox do I use so I created my own. It's call PixelBox lightbox created by me and it's 100% free to use.

It's version 1.0 of my pixelbox and I'll be doing some changes in it later so subscribe to my site to keep updated. It not looks so great in above image but please give it a try and please check the demo. I think you'll like it.

Supports :
All image formats.

Currently Working On :
Inline Content

Thursday, 6 September 2012

jsBloggerLightbox For Blogger


jsBloggerLightbox is a specially made for blogger and installing this is very simple and it takes only one step. This lightbox automatically identify all images on your blog and show all of them in this lightbox. First we recommend you to disable default lightbox provided my blogger ( Settings > Post And Comments ). Now it's time to install it :

  • Go To Blogger > Template > Edit HTML > Search for </head>
  • Just above it paste following script :

<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
 </script>
 <script src="http://widcraft.googlecode.com/svn/jsBloggerLightbox.js" type="text/javascript">
 </script>
That's It...Enjoy and share.....

Thursday, 30 August 2012

Creating A Simple jQuery Lightbox


Creating your own Lightbox is not that hard maybe it'll not be that advanced my it could be like above image and today in this article i'am gonna teach you about it. Full tutorial is jQuery and CSS3 based and creating a simple lightbox is not that hard.

First add a jQuery script in your document :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"> </script>

After adding jQuery we're going to add CSS in our document

<style type="text/css">
#lightbox{
display:none;
background: rgba(0,0,0,0.5);
opacity:0.5;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lightbox-panel{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
box-shadow: 2px 10px 50px rgba(0, 0, 0, 0.2);
z-index:1001;
}
#close-panel{
position: absolute;
top: -15px;
right: -15px;
}
</style>

In above CSS #Lightbox is our lightbox background , #Lightbox-panel is our lightbox and #Close-panel is our lightbox close button.

Z-index of #lightbox-panel should be more than #lightbox otherwise your lightbox will appear under background.Now time to add JavaScript which will give you control to open or close lightbox :

<script type="text/javascript">
$(document).ready(function(){
 $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
 $("div#lightbox").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
})
</script>

In javascript there are the snippets first one opens the lightbox , second one closes it when you on close button and third button closes it when you click outside/background of lightbox and we're almost done with this just have to add HTML now :

<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
    <h2>Your Lightbox Title</h2>
    <p>Lightbox Content.</p>
<a id="close-panel" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMTXg-rnAXbtL8EPrgrjD1ynAprxYyXQCMA-FPDd2SciYZIQw80t21rjqn-JJiBzEY906u1jJ7SCfpUXPZtEk5dq5UGbGvtgh5LyQeFZMx4i4QqJWGwdTOuHxf5V8Q-ZwjF1xt8fWbJ8/s1600/fancy_close.png" /></a>
</div>
<div id="lightbox"> </div>

So <a id="show-panel" href="#">Show Panel</a> is button which will open the lightbox and <div id="lightbox-panel">...All Crap.. </div> is our lightbox and we have to add our content in it , <a id="close-panel".........</a> is our close button and in last <div id="lightbox"> </div> is our lightbox background.

Here's a preview how it'll look in your browser :

Show Panel

You can also add images in lightbox-panel. Below is full document code :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js">
</script>
<style type="text/css">
#lightbox{
display:none;
background: rgba(0,0,0,0.5);
opacity:0.5;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lightbox-panel{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
box-shadow: 2px 10px 50px rgba(0, 0, 0, 0.2);
z-index:1001;
}
#close-panel{
position: absolute;
top: -15px;
right: -15px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
 $("div#lightbox").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
})
</script>
<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
    <h2>Lightbox Panel</h2>
    <p>Woo Woo Woo You Know It.</p>
<a id="close-panel" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMTXg-rnAXbtL8EPrgrjD1ynAprxYyXQCMA-FPDd2SciYZIQw80t21rjqn-JJiBzEY906u1jJ7SCfpUXPZtEk5dq5UGbGvtgh5LyQeFZMx4i4QqJWGwdTOuHxf5V8Q-ZwjF1xt8fWbJ8/s1600/fancy_close.png" /></a>
</div>
<div id="lightbox"> </div>

Like this then please comment and tell us your opinions.

Monday, 27 August 2012

FaceBox Lightbox For Blogger


FaceBox is a facebook style pop-up for images and some inline content on your blog and html documents. Installing this lightbox in your blog is way to much easy and quick.It's jquery lightbox which works perfectly in blogger and here are instruction to install this :
  • First Go To Blogger > Template > Edit HTML > Search For </head>
  • Post below script just above </head> 
<style>
#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}
#facebox .popup{
  position:relative;
  border:3px solid rgba(0,0,0,0);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
  -moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
  box-shadow:0 0 18px rgba(0,0,0,0.4);
}
#facebox .content {
  display:table;
  padding: 10px;
  background: #fff;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#facebox .content > p:first-child{
  margin-top:0;
}
#facebox .content > p:last-child{
  margin-bottom:0;
}
#facebox .close{
  position:absolute;
  top:5px;
  right:5px;
  padding:2px;
  background:#fff;
}
#facebox .close img{
  opacity:0.3;
}
#facebox .close:hover img{
  opacity:1.0;
}
#facebox .loading {
  text-align: center;
}
#facebox .image {
  text-align: center;
}
#facebox img {
  border: 0;
  margin: 0;
}
#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}
.facebox_hide {
  z-index:-100;
}
.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}
</style>
  <script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript"></script>
  <script src="http://widcraft.googlecode.com/svn/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loadingImage : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQeKvza3igWmcKrlDF5VrO9MJb60Ha12h4QKGMrOOqRcYnrn1veK7uEH66W6KirZCnYu0LfxwwYflIzYkEwexdzl409-1joyrMuY4UjNqJfqqDx7WY-XLCt6wGBfimTg6p_vLriFsK2pU/s1600/loading.gif',
        closeImage   : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgttlfn99dzDFiIp9j_YJbSBGqSjjeEinKlOA2szyvGyNt2LWfFivuMg8zWhukqkjL9o7K57aSQtTadLkn-nSNWyK_8CAxYGxy4EQr4pNSUgKHXhhCaIjbK3FaTaFqjJa4lifr7IGseG4U/s1600/closelabel.png'
      })
    })
</script>
That's all above installing it to blogger now you have to learn above adding this effect to your inline content and images....first start with images

Images :

To add facebox in your images just add rel="facebox" in your image code , example :
<a href="Image URL" rel="facebox"><img src="Image URL"/></a>
Inline Content :

Just like images in inline content just add rel="facebox" in your inline code , example :
<a href="#info" rel="facebox">View the 'info' div in the Facebox</a>
<div id="info" style="display:none;">
    <p> Hey, I'm the 'info' div! </p>
    <p> I look like this: </p>
    <code>
      &lt;div id="info" style="display:none;"&gt; <br>
        &nbsp;&nbsp;text<br>
      &lt;/div&gt;
    </code>
  </div>
I know it was way to much simple so add it and if you like this then please leave a comment.....

Sunday, 26 August 2012

FancyBox Lightbox For Blogger


FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

Features :
  • Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
  • Customizable through settings and CSS
  • Groups related items and adds navigation.
  • Support fancy transitions by using easing plugin
  • Adds a nice drop shadow under the zoomed item
  • Also works in all type of HTML documents
Well you all know that i'am a huge Light Box fan and this one is totally amazing so time to show you how to add this :
  • Go To Blogger > Template > Edit HTML
  • Find </head> and post following script just above it :
<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
 </script>
 <script src="http://widcraft.googlecode.com/svn/jquery.fancybox-1.3.4.js" type="text/javascript">
 </script>
<style>
#fancybox-loading {
 position: fixed;
 top: 50%;
 left: 50%;
 width: 40px;
 height: 40px;
 margin-top: -20px;
 margin-left: -20px;
 cursor: pointer;
 overflow: hidden;
 z-index: 1104;
 display: none;
 }
 #fancybox-loading div {
 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 480px;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
 }
 #fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1100;
 display: none;
 }
 #fancybox-tmp {
 padding: 0;
 margin: 0;
 border: 0;
 overflow: auto;
 display: none;
 }
 #fancybox-wrap {
 position: absolute;
 top: 0;
 left: 0;
 padding: 20px;
 z-index: 1101;
 outline: none;
 display: none;
 }
 #fancybox-outer {
 position: relative;
 width: 100%;
 height: 100%;
 background: #fff;
 }
 #fancybox-content {
 width: 0;
 height: 0;
 padding: 0;
 outline: none;
 position: relative;
 overflow: hidden;
 z-index: 1102;
 border: 0px solid #fff;
 }
 #fancybox-hide-sel-frame {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: transparent;
 z-index: 1101;
 }
 #fancybox-close {
 position: absolute;
 top: -15px;
 right: -15px;
 width: 30px;
 height: 30px;
 background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png') -40px 0px;
 cursor: pointer;
 z-index: 1103;
 display: none;
 }
 #fancybox-error {
 color: #444;
 font: normal 12px/20px Arial;
 padding: 14px;
 margin: 0;
 }
 #fancybox-img {
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 border: none;
 outline: none;
 line-height: 0;
 vertical-align: top;
 }
 #fancybox-frame {
 width: 100%;
 height: 100%;
 border: none;
 display: block;
 }
 #fancybox-left, #fancybox-right {
 position: absolute;
 bottom: 0px;
 height: 100%;
 width: 35%;
 cursor: pointer;
 outline: none;
 background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigdvfrtMF7oKZ7-wG71yoNBrcJyK_eyd_nIah0avR8yS9Q5AE96FiIcaR94jYWhomzGJPGcHk7rCqAthGHm0S5-sF5S8h2HmQh2Mh0y4mv786bHcJ3cAsrC8kM48qqko6gZU4Menj5GdY/s1600/fancy_blank.gif');
 z-index: 1102;
 display: none;
 }
 #fancybox-left {
 left: 0px;
 }
 #fancybox-right {
 right: 0px;
 }
 #fancybox-left-ico, #fancybox-right-ico {
 position: absolute;
 top: 50%;
 left: -9999px;
 width: 30px;
 height: 30px;
 margin-top: -15px;
 cursor: pointer;
 z-index: 1102;
 display: block;
 }
 #fancybox-left-ico {
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
 background-position: -40px -30px;
 }
 #fancybox-right-ico {
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
 background-position: -40px -60px;
 }
 #fancybox-left:hover, #fancybox-right:hover {
 visibility: visible; /* IE6 */
 }
 #fancybox-left:hover span {
 left: 20px;
 }
 #fancybox-right:hover span {
 left: auto;
 right: 20px;
 }
 .fancybox-bg {
 position: absolute;
 padding: 0;
 margin: 0;
 border: 0;
 width: 20px;
 height: 20px;
 z-index: 1001;
 }
 #fancybox-bg-n {
 top: -20px;
 left: 0;
 width: 100%;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVo42w-pqNiylHeVhxcc8SZyaRlbzHIi4gTJtv7RCH5INV8PsxANlle0Bwmy96VFS2tbiwul7QViqiboDr00nEPLIRhbB28ZorLS-4h6ZgbiXMIcg7oo-piL2dhXNOhdWFOwbwxigq35k/s1600/fancybox-x.png');
 }
 #fancybox-bg-ne {
 top: -20px;
 right: -20px;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
 background-position: -40px -162px;
 }
 #fancybox-bg-e {
 top: 0;
 right: -20px;
 height: 100%;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtZFAUlVJ2UVzCfW7QPGIlNRqdk8iRpaB66QAmpby-MbWhZGxBuH34zHsjhdfcmUOj4KfuFklUons4jHsjK9WEMH_HjmmMP_xrDvJkLJm323vKZcqVl9kNvWO0MirPh2OX4y-6hTOR30/s1600/fancybox-y.png');
 background-position: -20px 0px;
 }
 #fancybox-bg-se {
 bottom: -20px;
 right: -20px;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
 background-position: -40px -182px;
 }
 #fancybox-bg-s {
 bottom: -20px;
 left: 0;
 width: 100%;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVo42w-pqNiylHeVhxcc8SZyaRlbzHIi4gTJtv7RCH5INV8PsxANlle0Bwmy96VFS2tbiwul7QViqiboDr00nEPLIRhbB28ZorLS-4h6ZgbiXMIcg7oo-piL2dhXNOhdWFOwbwxigq35k/s1600/fancybox-x.png');
 background-position: 0px -20px;
 }
 #fancybox-bg-sw {
 bottom: -20px;
 left: -20px;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
 background-position: -40px -142px;
 }
 #fancybox-bg-w {
 top: 0;
 left: -20px;
 height: 100%;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtZFAUlVJ2UVzCfW7QPGIlNRqdk8iRpaB66QAmpby-MbWhZGxBuH34zHsjhdfcmUOj4KfuFklUons4jHsjK9WEMH_HjmmMP_xrDvJkLJm323vKZcqVl9kNvWO0MirPh2OX4y-6hTOR30/s1600/fancybox-y.png');
 }
 #fancybox-bg-nw {
 top: -20px;
 left: -20px;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png');
 background-position: -40px -122px;
 }
 #fancybox-title {
 font-family: Helvetica;
 font-size: 12px;
 z-index: 1102;
 }
 .fancybox-title-inside {
 padding-bottom: 10px;
 text-align: center;
 color: #333;
 background: #fff;
 position: relative;
 }
 .fancybox-title-outside {
 padding-top: 10px;
 color: #fff;
 }
 .fancybox-title-over {
 position: absolute;
 bottom: 0;
 left: 0;
 color: #FFF;
 text-align: left;
 }
 #fancybox-title-over {
 padding: 10px;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-JzZ7TtsvRD3JPoR-TE4k_DSw8wcCsRlAhNd0qNNG5StLWCi11c41MYDadrM2WoG_eEMQ7ijSUvvSjZqjUpcEdqBzE5lJVdcqpg0kfmO-WBLnk1kwCbe7dsDhbLUiRvGCq9b1xmFDDo/s1600/fancy_title_over.png');
 display: block;
 }
 .fancybox-title-float {
 position: absolute;
 left: 0;
 bottom: -20px;
 height: 32px;
 }
 #fancybox-title-float-wrap {
 border: none;
 border-collapse: collapse;
 width: auto;
 }
 #fancybox-title-float-wrap td {
 border: none;
 white-space: nowrap;
 }
 #fancybox-title-float-left {
 padding: 0 0 0 15px;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png') -40px -90px no-repeat;
 }
 #fancybox-title-float-main {
 color: #FFF;
 line-height: 29px;
 font-weight: bold;
 padding: 0 0 3px 0;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVo42w-pqNiylHeVhxcc8SZyaRlbzHIi4gTJtv7RCH5INV8PsxANlle0Bwmy96VFS2tbiwul7QViqiboDr00nEPLIRhbB28ZorLS-4h6ZgbiXMIcg7oo-piL2dhXNOhdWFOwbwxigq35k/s1600/fancybox-x.png') 0px -40px;
 }
 #fancybox-title-float-right {
 padding: 0 0 0 15px;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPGPX7dcbPZzndT4ZGqjPqg1ZBP6d4Ai4_tyQxEZ6C6GnUiKRQ1_At2hxkHUJeb3V69kFDiStxIYOolxfsKsq6RQ0TIo_Mj5m_msxgHnaQQfeyEaqS-N4JvEbQZ_N3qjoTweZ58ZPvwk/s1600/fancybox.png') -55px -90px no-repeat;
 }
 /* IE6 */
 .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMTXg-rnAXbtL8EPrgrjD1ynAprxYyXQCMA-FPDd2SciYZIQw80t21rjqn-JJiBzEY906u1jJ7SCfpUXPZtEk5dq5UGbGvtgh5LyQeFZMx4i4QqJWGwdTOuHxf5V8Q-ZwjF1xt8fWbJ8/s1600/fancy_close.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHtoT0sQAiKeTIY_08F4tPmq5_YIBKpGK21IEV2b8gKH0HSdj7oAVL58OcvJaVWEi5Ndze3zzL7scNmsrwANfV1c_I8lsmFcBbCgTUIId2H88fZJFV9ZFg5T-vQ8nRc7yxG326Os2TT4/s1600/fancy_nav_left.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWPsgqa6CQ4pXjqiynpCJUAY72a4ZMLYxl970Ce7Nyh98LIxbgKwSYbPu3j1der3QF2_0UurDp-ujQJP4VWgYgMvzMZaoeFdmT6BdutFXZMLrSle43aEanAaWdzScxfxbvEElMuQwIDZU/s1600/fancy_nav_right.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-JzZ7TtsvRD3JPoR-TE4k_DSw8wcCsRlAhNd0qNNG5StLWCi11c41MYDadrM2WoG_eEMQ7ijSUvvSjZqjUpcEdqBzE5lJVdcqpg0kfmO-WBLnk1kwCbe7dsDhbLUiRvGCq9b1xmFDDo/s1600/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
 .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZnP9XifKyV38tgYx20kasA4i95cLMnxkfOusm8iuou-a0b9HDLbSrfvZNM00YU785a85o58qIDMx57T1wkHYDvgCa0bPcPBWT0iC2FQ0QhCmU2skerG1th0UN7zrRJe3iQiI9I76KhWY/s1600/fancy_title_left.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCEWV3dVQc8e0uj3kgZBl55vZsUkcidHw8aiEY-OJMQWA1A_hDElXg_i73SfFV7Sv1BZQmL3jbgxTqpDiHx9aFcsA_R_4wCgA_Rcr2Mo6uO7YZ62r_zyESsokAhiYFZZ_95Zq_8LU7GQo/s1600/fancy_title_main.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvlXFO71lz9ZsfNrMmwCEMNl9v6j9EasyPlAVQyuCRAiPcFx4s11pPN33h2d06WQ2NgUMsmhNY0ZmRVlC-c_RVhPkRmx8ax0Tl0aav9lJaqjM3Z0BUAfZ0ncfTfZ_v-33YLTaqmaNN_0/s1600/fancy_title_right.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
 height: expression(this.parentNode.clientHeight   "px");
 }
 #fancybox-loading.fancybox-ie6 {
 position: absolute; margin-top: 0;
 top: expression( (-20   (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 )   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ))   'px');
 }
 #fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZB3u9lGqGaQGqJctWz7XcZVX3FgvahK9YAWcqexe3N6Z4A1EugbFLGXLmjBnNzcaB9UoYBKQR0_htz-FO7sWx-wHI0L8lyLn1GZ6WqVsDyCDO-xezFQ97x5jlqWtLs1b7V37Fj7CgfdU/s1600/fancy_loading.png', sizingMethod='scale'); }
 /* IE6, IE7, IE8 */
 .fancybox-ie .fancybox-bg { background: transparent !important; }
 .fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUVXH1QFVZZW91QPXFSJr_L7I8rAa8WgtMGPla4HfZmcuG0K4oOH_AbEYPI0UBFM_vZ24bn2KSr8hjAADr5RfkR168qUMo8DszI69K9jRAGCAL-91S5UShILMboqMOc882sIsk8GUr3w/s1600/fancy_shadow_n.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUaOvbfxYstMV4reKBlFsYefP31sBREExEK157-yOYmOcqS0PZK275K_5W0By48E6_qu9UlnPETkAfZmXNLiGYSkpmdt9wbVX18bA-2YoKiZQaaCOnTLzlNlZ5DEe2xI7Enynhz5s_SR8/s1600/fancy_shadow_ne.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiviPis7TVA2SJ2PU_-RxsGDFwd403vUfXbeE3eVfLZ297w4FoPpybKs6LA0_oaUjRi8fADsdpjbzqh3ZKYnouEjf5bzq8gI6PBDb2uXURJWe70dm5cB_LScDGDTAFlrbXV7n63Xiggwfc/s1600/fancy_shadow_e.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeG6xEBJwWa1-IhGG2RRbAdx3pZqJkNQB3E0owkAenfM6aNlrGO5si7iWXQvzPp2mle5RmfKKjt4Z42LboAprQMACPPnoi1Vk-3vewjBmNfQaQznhB0Yb-Ch69KrozEokLwsa5wCxjmi8/s1600/fancy_shadow_se.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIzGfbI8Al-ynSc92UtI-5zP50f_NHpjILB6SaQhSU5Z08zqlBlZN6Cqh7huDPyRwJjOaoohvXc_OunFX5ozsYDRmEQXb3nwj5KQXH12gZgaHhSUUfVBi4OLiT6cnMFAfCNbKLq9QKU44/s1600/fancy_shadow_s.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjuiRYColI4x3q_0UJDmcIM3ICBDidPeV8AZNzAJViyGfBNZsj2N16dmGZPUxYaSNvSBbAvAGqNajxczPORFivrl7OjEJ18qV3vGI5RrT-VIHybV0W-QRkJrmEh1FfRZG-GCVpTL6orGc/s1600/fancy_shadow_sw.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeAgZNfAgz9RBimEGO0kgZwf9UcChEbsCAVAEzOGD61FBXre5YaAVgIBmutzT-QVZdNywwgzMfY9O3LsdI6FGPzPPgv4TdlVEI3qp9euuNSAzb9GR7kL4tWM75s5EDvbJXi-j1-tSaCsU/s1600/fancy_shadow_w.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirity5WPk3gBja2j09kXHNTUy16s5mbNu_EB7gI41fYAufZDbvcJ-uStTyfPQScgdJcNcnNbwuy2Uc15hVexspYgR6KT2Y4vjPePUhgOZbgs1-zToEXXhvla3sZTh47yMDtLVWPDKTkKo/s1600/fancy_shadow_nw.png', sizingMethod='scale'); }
</style>
  • Now post below script above </body> : 
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
                'hideOnOverlayClick': false
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
$("#iframe").fancybox({'width': '70%','height': '100%','autoScale': true,'type':'iframe', });
$("#swf").fancybox({'width': '680','height': '495','autoScale': true,'type':'swf', });
});
 </script> 
Done with all script now time to show how to add this on your content :

Image :
 <a id="single_image" href="Image URL"><img src="Image URL" alt="Some Text"/></a>

 Image Group :
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>

 Inline Content :
<a id="inline" href="#data">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

iFrame  :
<a href="http://google.com/" title="Google" id="iframe">some link text</a>

Flash :
<a href="SWF File Source/" title="Flash" id="swf">Flash</a>

In Second script which you posted above </body> you can change your iframe width and height and create more actions of iframes/groups and all content.

Now it was bit difficult but if you need any help then please comment and if this lightbox doesn't work then try to posting all script in your post instead of template. 

Monday, 20 August 2012

prettyPhoto Lightbox For Blogger


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 -

Single Image :

<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>&nbsp;&nbsp;<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&amp;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>
<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>
Having any problem....feel free to comment.....

Saturday, 28 July 2012

FancyZoom Lightbox For Blogger


Don't know about you guys but i think Lightbox are the best widget ever made.....i really like Light Boxes and today i'am sharing one of it with you.....

Installing :

  • Go To Blogger > Template > Edit HTML
  • Just above </head> paste the script given below
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/FancyZoom.js"></script>

And you're done.....

How To Use :

$('#id').fancyZoom() where id is the id of the <a> tag you would like to zoom. The <a> tag should have an href that anchors to the id of the box that contains the contents that should be zoomed. For example:

<a href="#small_box" id="small">Small Box!</a>
<div id="small_box">
  <p>Here is the contents that will appear in the zoom.</p>
</div>
<script type="text/javascript">
$('#small').fancyZoom();
</script>

Other Examples


// other examples
<script type="text/javascript">
  $(document).ready(function() {
    $('a.fancy').each(function() { $(this).fancyZoom({width:500, height:300});});
    $('#small').fancyZoom({scaleImg: true}); // Scales images inside while zooming
    $('#medium').fancyZoom({closeOnClick: true}); // Close the zoom by clicking on the contents
    // width and height are optional. defaults to css specifications of width and height.
    // if width and height are passed in, they override whatever may be in css.
    $('#large').fancyZoom({width:600, height:400});
  });
</script>

You can use this lightbox in Images , HTML , Text , Flash and Embed-able stuff.....Having problem or want a pet Unicorn then comment.....

Wednesday, 13 June 2012

SuperBox Lightbox For Blogger


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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>
Subscribe to: Posts (Atom)

Popular Posts

 
Powered by Blogger.