06 Sep 2011
Implementing Slicebox into Blogger

Slicebox is a simple 3D Slider which makes use of the 3D transforms properties and allows a different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object. In case the browser does not support 3D transformations, a simple slider will be used as fallback. It comes in 6 versions.

See Demo

Download

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. (How to copy code easily)

<link rel="stylesheet" type="text/css" href="demo.css" /> 
<link rel="stylesheet" type="text/css" href="slicebox.css" /> 
 <script type="text/javascript" src="modernizr.custom.13303.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  <script type="text/javascript" src="jquery.slicebox.min.js"></script> 
  <script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 15,
     sequentialRotation : true,
     sequentialFactor : 50,
     speed3d    : 250
    });
     if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!. If this code shows error while adding into the template, then Click Here to Escape Code and then copy into it

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

3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="stylesheet" type="text/css" href="demo.css" /> 
<link rel="stylesheet" type="text/css" href="slicebox.css" /> 
 <script type="text/javascript" src="modernizr.custom.13303.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  <script type="text/javascript" src="jquery.slicebox.min.js"></script> 
  <script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 15,
     sequentialRotation : true,
     sequentialFactor : 50,
     speed3d    : 250
    });
     if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>

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

4.Now for adding the images into this plugin see the following markup:

<div id="sb-slider" class="sb-slider"> 
    <img src="1.jpg" title="The Title that will appear below the Image"/> 
    <img src="2.jpg" /> 
    <img src="3.jpg" /> 
    <img src="4.jpg" /> 
    <img src="5.jpg" />  
   </div>

Here are some customized JavaScript for changing default Options:

Vertical Effect

<script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 5,
     disperseFactor  : 30,
     sequentialRotation : true,
     sequentialFactor : 100
    });
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     $('#sb-examples > li:gt(2)').remove();
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>

Horizontal Effect

<script type="text/javascript"> 
   $(function() {

    $('#sb-slider').slicebox({
     orientation   : 'h',
     slicesCount   : 3,
     disperseFactor  : 25,
     sequentialRotation : true,
     sequentialFactor : 140
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     $('#sb-examples > li:gt(2)').remove();
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>

Vertical Flipping

<script type="text/javascript"> 
   $(function() {
 
    $('#sb-slider').slicebox();
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>

Horizontal Flipping

<script type="text/javascript"> 
   $(function() {
    
    $('#sb-slider').slicebox({
     orientation   : 'h'
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>

Expanding Effect

<script type="text/javascript"> 
   $(function() {
 
    $('#sb-slider').slicebox({
     slicesCount   : 9,
     disperseFactor  : 50,
     sequentialRotation : true,
     sequentialFactor : 20
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>

5.Now save the Post/Page.

See Demo

Download

Til next time,
Prayag Verma at 16:15

scribble

06 Sep 2011 Implementing Slicebox into Blogger

06 Sep 2011
Implementing Slicebox into Blogger