Implementing FacyBox in Blogger

FacyBox is a jQuery-based, Facebook/Fancybox-style lightbox which can display images, divs, or entire remote pages. Basically it is a FaceBox with FancyBox look.

Benefits of using FacyBox compared to original include: faster page load, smaller file size, locally testable (does not require you to host a server just to try locally), gallery mode available, useable as modal dialog, clean separation between JavaScript/CSS (no images/styles inside JavaScript), etc.

Developed by Mauricio Wolff; FacyBox jQuery Plugin is available for download under MIT License.

             

Steps to Add it to Blogger:

1.Login to the Blogger account.

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it.

<link href="http://dl.dropbox.com/u/27675057/FacyBox/facybox.css" media="screen" rel="stylesheet" type="text/css" /> 
<!-- always get the last jquery version --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script> 
<script src="http://dl.dropbox.com/u/27675057/FacyBox/facybox.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function($) {
      $('a[rel*=facybox]').facybox({
        // noAutoload: true
      });
      
    });
</script>

Another CSS file namely facybox_urls.css  is used in the facybox.css ,which contains the address of all the images used ,Please make you assign it a correct address for proper functioning of the plugin. 

2.Go to the Post/Page you want to add Facybox and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<link href="http://dl.dropbox.com/u/27675057/FacyBox/facybox.css" media="screen" rel="stylesheet" type="text/css" /> 
<!-- always get the last jquery version --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script> 
<script src="http://dl.dropbox.com/u/27675057/FacyBox/facybox.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function($) {
      $('a[rel*=facybox]').facybox({
        // noAutoload: true
      });
      
    });
</script>

Another CSS file namely facybox_urls.css  is used in the facybox.css ,which contains the address of all the images used ,Please make you assign it a correct address for proper functioning of the plugin.

4.Now for adding the images into Facybox ,Firstly add the image normally using Insert Image button


Now When you see the code in the edit HTML window it would be something like this

<a href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>

Make it like this 

<a rel="facybox" href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>

As you see we only added a rel="facybox" 


Adding Gallery into this plugin is a little tricky,See the code below 

<a href="" id="open_gallery">Open Gallery</a> 
You have to navigate by using left-arrow/right-arrow 
<script>

jQuery('#open_gallery').click(function(){
jQuery.facybox({images:['ValentinaKallias.jpg','31589a47f.jpg', 'fogke.jpg']})
});

</script> 

As you see a JavaScript snippet has to be called ,in which "images:" contains the adress of all the images to be shown in the Gallery.


Content within a Div tag can also be shown in Facybox
See the Code:

<a href="#info" rel="facybox">View the 'info' div in the facybox</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; 

&nbsp;&nbsp;text

&lt;/div&gt;
</code> 
</div>

5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself !


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.