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

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox