FaceBox Lightbox For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

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

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.