jQuery World: jQuery

Easy Image Zoom with jQuery

Thursday, May 26, 2011 Posted by Unknown

image by: cssglobe.com

The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image.

This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element's size, position and appearance.

This all the code.


<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript" src="easyzoom.js"></script>

<script type="text/javascript">
jQuery(function($){
 
 $('a.zoom').easyZoom();

});
</script>

<style type="text/css">
#container{
 padding:10px;
 }
#easy_zoom{
 width:600px;
 height:400px; 
 border:5px solid #eee;
 background:#fff;
 color:#333;
 position:absolute;
 top:60px;
 left:400px;
 overflow:hidden;
 -moz-box-shadow:0 0 10px #777;
 -webkit-box-shadow:0 0 10px #777;
 box-shadow:0 0 10px #777;
 /* vertical and horizontal alignment used for preloader text */
 line-height:400px;
 text-align:center;
 }
</style>
</head>

<body>

<div id="container">
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq-ZfzzpYS2cD4GW1lFBFItoPLJ1IDQVJSLvpU7CSklDTNdmUxKvl_GTUqb6_nWbDjNX0eto-rKsxLCgohvDBkz14syhCzOQN_BoDoP-lzQqvC6fAvpI8GHH_i01Oga7M1fKpaHvAI6G4/s1600/New-York.jpg" class="zoom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkG3_xjQt2G-AVE0V-a6AEqXpW4aSHQgtCLnhNdq8QLDDGbHpyz1JSb2Mp9P3IG8MDl9DfUKRNJG9DywTRG8q9S2eGMJEXqjGD952NFhn4jX1yp4EDeaw8Xt-ajLaZf28IcmvGTe-jsU/" alt="New York"></a></p>
<p><em>Roll over the image to view details.</em></p>
</div>

</body>
</html>

source article : jQuery plugin: Easy Image Zoom

Read More Add your Comment 0 comments

Cursor Following Menu for Site

Sunday, May 08, 2011 Posted by Unknown

image by manos.malihu.gr

The idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css. An extra feature included in the plugin is the function that animates the page to anchor points. See demo in this page.

How to use it

Inside the head tag of your document attach the menu stylesheet (malihu.cfm.css) which holds the style for the menu and load both jquery.min.js (straight from Google) and the jquery.easing.1.3.js plugin that adds custom easing to our animations.


<link href="malihu.cfm.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Inside the body tag, insert the menu markup.


<div id="cf_menu">
<div class="container">
<div class="title">MENU</div>
<ul>
<li><a href="#home">↑ Home</a></li>
<li><a href="#about">About me</a></li>
<li><a href="work">+ Work</a>
<ul>
<li><a href="#recent">Recent</a></li>
<li><a href="#web">Web</a></li>
<li><a href="#print">Print</a></li>
</ul>
</li>
<li><a href="#blog">Blog</a></li>
<li><a href="links">+ Interesting links</a>
<ul>
<li><a href="#freebies">Freebies & Resources</a></li>
<li><a href="#people">People</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="info">+ Script info</a>
<ul>
<li><a href="http://manos.malihu.gr/cursor-following-menu/">See the post</a></li>
<li><a onclick="javascript:pageTracker._trackPageview('/downloads/tuts/cursor_following_menu.zip');" href="http://manos.malihu.gr/tuts/cursor_following_menu.zip">↓ Download</a></li>
</ul>
</li>
<li><a href="http://manos.malihu.gr">malihu</a></li>
</ul></div>
</div>

You can have a single sub-level on menu options by adding an additional unordered list inside list items.

Add the menu script and plugin at the end of the document, just before the closing body tag.


<script>
//cursor following menu config
$mouseover_title="+ MENU"; //menu title text on mouse-over
$mouseout_title="MENU"; //menu title text on mouse-out
$menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)
$menu_following_easing="easeOutCirc";
$menu_cursor_space=30; //space between cursor and menu
$menu_show_speed="slow"; //menu open animation speed
$menu_show_easing="easeOutExpo"; //menu open animation easing type
$menu_hide_speed="slow"; //menu close animation speed
$menu_hide_easing="easeInExpo"; //menu close animation easing type
</script>
 
<script src="malihu.jquery.cfm.js"></script>

You can easily configure the menu by changing each variable to your liking.

source article : Cursor Following Menu

Read More Add your Comment 0 comments

Rotating Image Slider with jQuery

Wednesday, May 04, 2011 Posted by Unknown

image by tympanus.net

In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.

We’ll use the jQuery 2D Transformation Plugin for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control.

The beautiful photos are by Andrew and Lili and you can see their Behance profile here:
http://www.behance.net/AndrewLili

The images are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.

The HTML

First, we will wrap all our slider elements in a wrapper with the class “rm_wrapper”:


<div class="rm_wrapper">
...
</div>

Inside of that wrapper we will have a container for the actual slider list, some mask and corner elements, the heading and a hidden div that will contain all the image sets:


<div id="rm_container" class="rm_container">
 <ul>
  <li data-images="rm_container_1" data-rotation="-15">
   <img src="images/1.jpg"/>
  </li>
  <li data-images="rm_container_2" data-rotation="-5">
   <img src="images/2.jpg"/>
  </li>
  <li data-images="rm_container_3" data-rotation="5">
   <img src="images/3.jpg"/>
  </li>
  <li data-images="rm_container_4" data-rotation="15">
   <img src="images/4.jpg"/>
  </li>
 </ul>
 <div id="rm_mask_left" class="rm_mask_left"></div>
 <div id="rm_mask_right" class="rm_mask_right"></div>
 <div id="rm_corner_left" class="rm_corner_left"></div>
 <div id="rm_corner_right" class="rm_corner_right"></div>
 <h2>Fashion Explosion 2012</h2>
 <div style="display:none;">
  <div id="rm_container_1">
   <img src="images/1.jpg"/>
   <img src="images/5.jpg"/>
   <img src="images/6.jpg"/>
   <img src="images/7.jpg"/>
  </div>
  <div id="rm_container_2">
   <img src="images/2.jpg"/>
   <img src="images/8.jpg"/>
   <img src="images/9.jpg"/>
   <img src="images/10.jpg"/>
  </div>
  <div id="rm_container_3">
   <img src="images/3.jpg"/>
   <img src="images/11.jpg"/>
   <img src="images/12.jpg"/>
   <img src="images/13.jpg"/>
  </div>
  <div id="rm_container_4">
   <img src="images/4.jpg"/>
   <img src="images/14.jpg"/>
   <img src="images/15.jpg"/>
   <img src="images/16.jpg"/>
  </div>
 </div>
</div>

So the unordered lists will have the first set of four images where each list element has some data attributes for the image sets and the rotation degree. We will use that data to know which images come next and how much each image should be rotated.

The mask and corner divs will be absolute elements that we will place on top of the slider, slightly rotated in order to cover some areas. Since we will use the same background color for these elements like the body’s background color, we will create the illusion of the images being shaped in a certain way.

Then we’ll add the elements for the navigation and the autoplay controls:


<div class="rm_nav">
 <a id="rm_next" href="#" class="rm_next"></a>
 <a id="rm_prev" href="#" class="rm_prev"></a>
</div>
<div class="rm_controls">
 <a id="rm_play" href="#" class="rm_play">Play</a>
 <a id="rm_pause" href="#" class="rm_pause">Pause</a>
</div>

Let’s take a look at the CSS.

The CSS

First, we’ll reset some styles and define the properties for the body. (Remember, if we would have another background color, we would want to change the background and border colors of some of the elements in our slider, too.)


@import url('reset.css');
body{
 background:#f0f0f0;
 color:#000;
 font-family: 'PT Sans Narrow', Arial, sans-serif;
 font-size:16px;
}
a{
 color:#000;
 text-decoration:none;
}
h1{
 padding:10px;
 margin:20px;
 font-size:40px;
 text-transform:uppercase;
 text-shadow:0px 0px 1px #fff;
 color:#333;
 background:transparent url(../images/line.png) repeat-x bottom left;
}

The main wrapper will have the following style:


.rm_wrapper{
 width:1160px;
 margin:0 auto;
 position:relative;
}

The container for the slider will have any overflow hidden, which will help shaping our slider since we will cut off the outer sides of it:


.rm_container{
 width:1050px;
 overflow:hidden;
 position:relative;
 height:530px;
 margin:0 auto;
}

The heading will have the following style:


.rm_container h2{
 background:transparent url(../images/lines.png) repeat top left;
 padding:10px 30px;
 position:absolute;
 bottom:170px;
 right:0px;
 color:#000;
 font-size:36px;
 text-transform:uppercase;
 text-shadow:1px 0px 1px #fff;
}

Let’s define the width for the ul to be bigger than the container since we want to make the list element float next to each other:


.rm_container ul{
 width:1170px;
}

By giving a negative left margin and a thick border to the list element, we will overlap the images and cut off the right sides so that we create our asymmetrical shapes by rotating the elements then. The border color will be the same like the background color of the body (or the container).


.rm_container ul li{
 float:left;
 margin-left:-80px;
 position:relative;
 overflow:hidden;
 width:310px;
 height:465px;
 border:30px solid #f0f0f0;
 border-width:50px 30px 0px 30px;
 background-color:#f0f0f0;
}

We’ll position the images absolutely:


.rm_container ul li img{
 position:absolute;
 top:0px;
 left:0px;
}

In the following we will style the mask and the corner elements. They will be all positioned absolutely and we’ll give them the grey background color. By rotating them, we’ll make the images to appear as being “shaped”:


.rm_mask_right, .rm_mask_left{
 position: absolute;
 height: 110px;
 background: #f0f0f0;
 width: 530px;
 bottom: -30px;
 left: 0px;
 -moz-transform:rotate(-3deg);
 -webkit-transform:rotate(-3deg);
 transform:rotate(-3deg);
}
.rm_mask_right{
 left:auto;
 right:0px;
 -moz-transform:rotate(3deg);
 -webkit-transform:rotate(3deg);
 transform:rotate(3deg);
}
.rm_corner_right, .rm_corner_left{
 background: #f0f0f0;
 position:absolute;
 width:200px;
 height:100px;
 bottom:0px;
 left:-65px;
 -moz-transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 transform:rotate(45deg);
}
.rm_corner_right{
 left:auto;
 right:-65px;
 -moz-transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 transform:rotate(-45deg);
}

The navigation elements will be placed to the left and right of the main container:


.rm_nav a{
 position:absolute;
 top:200px;
 width:38px;
 height:87px;
 cursor:pointer;
 opacity:0.7;
}
.rm_nav a:hover{
 opacity:1.0;
}
.rm_nav a.rm_next{
 background:transparent url(../images/next.png) no-repeat top left;
 right:0px;
}
.rm_nav a.rm_prev{
 background:transparent url(../images/prev.png) no-repeat top left;
 left:0px;
}

The pause/play control will be placed to the top left of the main container:


.rm_controls{
 position:absolute;
 top:0px;
 left:-40px;
 height:20px;
}
.rm_controls a{
 cursor:pointer;
 opacity:0.7;
 padding-left:24px;
 font-size:16px;
 text-transform:uppercase;
 height:20px;
 float:left;
 line-height:20px;
}
.rm_controls a:hover{
 opacity:1.0;
}
.rm_controls a.rm_play{
 display:none;
 background:transparent url(../images/play.png) no-repeat center left;
}
.rm_controls a.rm_pause{
 background:transparent url(../images/pause.png) no-repeat center left;
}

And that’s all the style! Let add the spice!

The JavaScript

The main idea for the slider functionality is to add another image before the current one with a slightly increased rotation degree than the current item. Then we will animate the rotation and make the new images appear.

So let’s start by caching some elements and checking if we are dealing with a special needs browser in order to deal with some issues:


//our 4 items
var $listItems   = $('#rm_container > ul > li'),
 totalItems  = $listItems.length,

 //the controls
 $rm_next  = $('#rm_next'),
 $rm_prev  = $('#rm_prev'),
 $rm_play  = $('#rm_play'),
 $rm_pause  = $('#rm_pause'),

 //the masks and corners of the slider
 $rm_mask_left = $('#rm_mask_left'),
 $rm_mask_right = $('#rm_mask_right'),
 $rm_corner_left = $('#rm_corner_left'),
 $rm_corner_right= $('#rm_corner_right'),

 //check if the browser is <= IE8
 ieLte8   = ($.browser.msie && parseInt($.browser.version) <= 8),

Then we will define our main function:


RotateImageMenu = (function() {
...
})();

RotateImageMenu.init();

And then we define the following in our function:


//difference of animation time between the items
var timeDiff   = 300,
 //time between each image animation (slideshow)
 slideshowTime  = 3000,
 slideshowInterval,
 //checks if the images are rotating
 isRotating   = false,
 //how many images completed each slideshow iteration
 completed   = 0,
 /*
 all our images have 310 of width and 465 of height.
 this could / should be dynamically calculated
 if we would have different image sizes.

 we will set the rotation origin at
 x = width/2 and y = height*2
 */
 origin    = ['155px', '930px'],
 init    = function() {
  configure();
  initEventsHandler();
 },
 //initialize some events
 initEventsHandler = function() {
  /*
  next and previous arrows:
  we will stop the slideshow if active,
  and rotate each items images.
  1  rotate right
  -1  rotate left
  */
  $rm_next.bind('click', function(e) {
   stopSlideshow();
   rotateImages(1);
   return false;
  });
  $rm_prev.bind('click', function(e) {
   stopSlideshow();
   rotateImages(-1);
   return false;
  });
  /*
  start and stop the slideshow
  */
  $rm_play.bind('click', function(e) {
   startSlideshow();
   return false;
  });
  $rm_pause.bind('click', function(e) {
   stopSlideshow();
   return false;
  });
  /*
  adds events to the mouse and left / right keys
  */
  $(document).bind('mousewheel', function(e, delta) {
   if(delta > 0) {
    stopSlideshow();
    rotateImages(0);
   }
   else {
    stopSlideshow();
    rotateImages(1);
   }
   return false;
  }).keydown(function(e){
   switch(e.which){
    case 37:
     stopSlideshow();
     rotateImages(0);
     break;
    case 39:
     stopSlideshow();
     rotateImages(1);
     break;
   }
  });
 },
 /*
 rotates each items images.
 we set a delay between each item animation
 */
 rotateImages  = function(dir) {
  //if the animation is in progress return
  if(isRotating) return false;

  isRotating = true;

  $listItems.each(function(i) {
   var $item     = $(this),
    /*
    the delay calculation.
    if rotation is to the right,
    then the first item to rotate is the first one,
    otherwise the last one
    */
    interval   = (dir === 1) ? i * timeDiff : (totalItems - 1 - i) * timeDiff;

   setTimeout(function() {
     //the images associated to this item
    var $otherImages  = $('#' + $item.data('images')).children('img'),
     totalOtherImages = $otherImages.length;

     //the current one
     $img    = $item.children('img:last'),
     //keep track of each items current image
     current    = $item.data('current');
     //out of bounds
     if(current > totalOtherImages - 1)
      current = 0;
     else if(current < 0)
      current = totalOtherImages - 1;

     //the next image to show and its
     //initial rotation (depends on dir)
     var otherRotation = (dir === 1) ? '-30deg' : '30deg',
      $other   = $otherImages.eq(current).clone();

     //for IE <= 8 we will not rotate,
     //but fade out / fade in ...
     //better than nothing :)
     if(!ieLte8)
      $other.css({
       rotate : otherRotation,
       origin : origin
      });

     (dir === 1) ? ++current : --current;

     //prepend the next image to the
      $item.data('current', current).prepend($other);       //the final rotation for the current image      var rotateTo  = (dir === 1) ? '80deg' : '-80deg';       if(!ieLte8) {       $img.animate({        rotate : rotateTo       }, 1200, function(){        $(this).remove();        ++completed;        if(completed === 4) {         completed = 0;         isRotating = false;        }       });       $other.animate({        rotate : '0deg'       }, 600);      }      else {       $img.fadeOut(1200, function(){        $(this).remove();        ++completed;        if(completed === 4) {         completed = 0;         isRotating = false;        }       });      }     }, interval );   });   },  //set initial rotations  configure   = function() {   if($.browser.msie && !ieLte8)    rotateMaskCorners();   else if(ieLte8)    hideMaskCorners();    $listItems.each(function(i) {    //the initial current is 1    //since we already showing the first image    var $item = $(this).data('current', 1);     if(!ieLte8)    $item.transform({rotate: $item.data('rotation') + 'deg'})      .find('img')      .transform({origin: origin});   });  },  //rotates the masks and corners  rotateMaskCorners = function() {   $rm_mask_left.transform({rotate: '-3deg'});   $rm_mask_right.transform({rotate: '3deg'});   $rm_corner_left.transform({rotate: '45deg'});   $rm_corner_right.transform({rotate: '-45deg'});  },  //hides the masks and corners  hideMaskCorners  = function() {   $rm_mask_left.hide();   $rm_mask_right.hide();   $rm_corner_left.hide();   $rm_corner_right.hide();  },  startSlideshow  = function() {   clearInterval(slideshowInterval);   rotateImages(1);   slideshowInterval = setInterval(function() {    rotateImages(1);   }, slideshowTime);   //show the pause button and hide the play button   $rm_play.hide();   $rm_pause.show();  },  stopSlideshow  = function() {   clearInterval(slideshowInterval);   //show the play button and hide the pause button   $rm_pause.hide();   $rm_play.show();  };  return {init : init};

As you noticed, we will treat older browsers a bit differently so that the slider works properly.

source article : Rotating Image Slider with jQuery

Read More Add your Comment 0 comments

Shutter Effect with jQuery

Wednesday, April 20, 2011 Posted by Unknown

This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website which displays a set of featured photos with a camera shutter effect.

jquery.shutter.css


<style>
#container{
 width:640px;
 height:400px;
 margin:0 auto;
 border:5px solid #fff;
 overflow:hidden;
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#container ul{
 list-style:none;
padding:0;
margin:0;
}
#page{
 width:650px;
height:400px;
}
#container img{
padding:0;
}
.shutterAnimationHolder .film canvas{
 display: block;
    margin: 0 auto;
}

.shutterAnimationHolder .film{
 position:absolute;
 left:50%;
 top:0;
}

.shutterAnimationHolder{
 position:absolute;
 overflow:hidden;
 top:0;
 left:0;
 z-index:1000;
}
</style>

jQuery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src=".../jquery.shutter.js"></script>

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

 var container = $('#container'),
  li = container.find('li');

 // Using the tzShutter plugin. We are giving the path
 // to he shutter.png image in the plugin folder and two
 // callback functions.

 container.tzShutter({
  imgSrc: 'assets/jquery.shutter/shutter.png',
  closeCallback: function(){

   // Cycling the visibility of the li items to
   // create a simple slideshow.

   li.filter(':visible:first').hide();
   
   if(li.filter(':visible').length == 0){
    li.show();
   }
   
   // Scheduling a shutter open in 0.1 seconds:
   setTimeout(function(){container.trigger('shutterOpen')},100);
  },
  loadCompleteCallback:function(){
   setInterval(function(){
    container.trigger('shutterClose');
   },4000);
   
   container.trigger('shutterClose');
  }
 });
 
});
    </script>

Generated HTML


<div id="page">

 <h1>Shutter Folio Photography</h1>

 <div id="container">
     <ul>
            <li><img src=".../img/1.jpg" width="640" height="400" /></li>
            <li><img src=".../img/2.jpg" width="640" height="400" /></li>
            <li><img src=".../img/3.jpg" width="640" height="400" /></li>
            <li><img src=".../img/4.jpg" width="640" height="400" /></li>
        </ul>
    </div>

</div>

The Final Code


<head>
<style>
#container{
 width:640px;
 height:400px;
 margin:0 auto;
 border:5px solid #fff;
 overflow:hidden;
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#container ul{
 list-style:none;
padding:0;
margin:0;
}
#page{
 width:650px;
height:400px;
}
#container img{
padding:0;
}
.shutterAnimationHolder .film canvas{
 display: block;
    margin: 0 auto;
}

.shutterAnimationHolder .film{
 position:absolute;
 left:50%;
 top:0;
}

.shutterAnimationHolder{
 position:absolute;
 overflow:hidden;
 top:0;
 left:0;
 z-index:1000;
}
</style>
</head>

<body>
<div id="page">

 <h1>Shutter Folio Photography</h1>

 <div id="container">
     <ul>
            <li><img src=".../img/1.jpg" width="640" height="400" /></li>
            <li><img src=".../img/2.jpg" width="640" height="400" /></li>
            <li><img src=".../img/3.jpg" width="640" height="400" /></li>
            <li><img src=".../img/4.jpg" width="640" height="400" /></li>
        </ul>
    </div>

</div>

<script type='text/javascript'>
//<![CDATA[
(function(){
 
 // Creating a regular jQuery plugin:
 
 $.fn.tzShutter = function(options){
  
  // Checking for canvas support. Works in all modern browsers:
  var supportsCanvas = 'getContext' in document.createElement('canvas');

  // Providing default values:

  options = $.extend({
   openCallback:function(){},
   closeCallback:function(){},
   loadCompleteCallback:function(){},
   hideWhenOpened:true,
   imgSrc: 'http://dl.dropbox.com/u/13256471/jquery.shutter/assets/jquery.shutter/shutter.png'
  },options);
  
  var element = this;
 
  if(!supportsCanvas){
   
   // If there is no support for canvas, bind the
   // callack functions straight away and exit:
   
   element.bind('shutterOpen',options.openCallback)
       .bind('shutterClose',options.closeCallback);
   
   options.loadCompleteCallback();

   return element;
  }
  
  window.setTimeout(function(){
 
   var frames = {num:15, height:1000, width:1000},
    slices = {num:8, width: 416, height:500, startDeg:30},
    animation = {
     width : element.width(),
     height : element.height(),
     offsetTop: (frames.height-element.height())/2
    },
    
    // This will calculate the rotate difference between the
    // slices of the shutter. (2*Math.PI equals 360 degrees in radians):
    
    rotateStep = 2*Math.PI/slices.num, 
    rotateDeg = 30;

   // Calculating the offset   
   slices.angleStep = ((90 - slices.startDeg)/frames.num)*Math.PI/180;
   
   // The shutter slice image:
   var img = new Image();
  
   // Defining the callback before setting the source of the image:
   img.onload = function(){

    window.console && console.time && console.time("Generating Frames");
    
    // The film div holds 15 canvas elements (or frames).
    
    var film = $('<div>',{
     className: 'film',
     css:{
      height: frames.num*frames.height,
      width: frames.width,
      marginLeft: -frames.width/2, // Centering horizontally
      top: -animation.offsetTop
     }
    });

    // The animation holder hides the film with overflow:hidden,
    // exposing only one frame at a time.
    
    var animationHolder = $('<div>',{
     className: 'shutterAnimationHolder',
     css:{
      width:animation.width,
      height:animation.height
     }
    });
    
    for(var z=0;z<frames.num;z++){
 
     // Creating 15 canvas elements.
 
     var canvas = document.createElement('canvas'),
      c  = canvas.getContext("2d");
 
     canvas.width=frames.width;
     canvas.height=frames.height;
 
     c.translate(frames.width/2,frames.height/2);
 
     for(var i=0;i<slices.num;i++){
      
      // For each canvas, generate the different
      // states of the shutter by drawing the shutter
      // slices with a different rotation difference.
      
      // Rotating the canvas with the step, so we can
      // paint the different slices of the shutter.
      c.rotate(-rotateStep);
      
      // Saving the current rotation settings, so we can easily revert
      // back to them after applying an additional rotation to the slice.
      
      c.save();
      
      // Moving the origin point (around which we are rotating
      // the canvas) to the bottom-center of the shutter slice.
      c.translate(0,frames.height/2);
      
      // This rotation determines how widely the shutter is opened.
      c.rotate((frames.num-1-z)*slices.angleStep);
      
      // An additional offset, applied to the last five frames,
      // so we get a smoother animation:
      
      var offset = 0;
      if((frames.num-1-z) <5){
       offset = (frames.num-1-z)*5;
      }
      
      // Drawing the shutter image
      c.drawImage(img,-slices.width/2,-(frames.height/2 + offset));
      
      // Reverting back to the saved settings above.
      c.restore();
     }
     
     // Adding the canvas (or frame) to the film div.
     film.append(canvas);
    }
    
    // Appending the film to the animation holder.
    animationHolder.append(film);
    
    if(options.hideWhenOpened){
     animationHolder.hide();
    }
    
    element.css('position','relative').append(animationHolder);
    
    var animating = false;
    
    // Binding custom open and close events, which trigger
    // the shutter animations.
    
    element.bind('shutterClose',function(){
     
     if(animating) return false;
     animating = true;
     
     var count = 0;
     
     var close = function(){
      
      (function animate(){
       if(count>=frames.num){
        animating=false;
        
        // Calling the user provided callback.
        options.closeCallback.call(element);
        
        return false;
       }
       
       film.css('top',-frames.height*count - animation.offsetTop);
       count++;
       setTimeout(animate,20);
      })();
     }
     
     if(options.hideWhenOpened){
      animationHolder.fadeIn(60,close);
     }
     else close();
    });
    
    element.bind('shutterOpen',function(){
     
     if(animating) return false;
     animating = true;
     
     var count = frames.num-1;
     
     (function animate(){
      if(count<0){
       
       var hide = function(){
        animating=false;
        // Calling the user supplied callback:
        options.openCallback.call(element);
       };
       
       if(options.hideWhenOpened){
        animationHolder.fadeOut(60,hide);
       }
       else{
        hide();
       }
       
       return false;
      }
      
      film.css('top',-frames.height*count - animation.offsetTop);
      count--;
      
      setTimeout(animate,20);
     })();
    });

    // Writing the timing information if the
    // firebug/web development console is opened:
    
    window.console && console.timeEnd && console.timeEnd("Generating Frames");
    options.loadCompleteCallback();
   };
   
   img.src = options.imgSrc;
   
  },0);
  
  return element;  
 };
 
})(jQuery);
//]]>
</script>

</body>

With this Shutter Effect is complete!

Read More Add your Comment 0 comments

Fading and Spinning Icons with CSS3 and jQuery

Wednesday, April 20, 2011 Posted by Unknown

The post detailed how you could leverage CSS3's transformations and opacity properties, as well as the magical MooTools JavaScript framework, to create spinning, fading, animated icons. Due to popular request, I've duplicated the effect with another popular JavaScript toolkit: jQuery.

The HTML


<div style="padding:20px 0;position:relative;">
<div id="followIcons">
<a style="top: 0.653561px; left: 132.318px; z-index: 1022; opacity: 0.6; -moz-transform: rotate(36.7188deg);" href="http://feeds.feedburner.com/TemplateForYourBlog" rel="nofollow" id="iconRSS">RSS Feed</a>
<a style="top: 38.5985px; left: 200.085px; z-index: 1023; opacity: 0.6; -moz-transform: rotate(74.7156deg);" href="http://twitter.com/bambangwi" rel="nofollow" id="iconTwitter">@Bambang Wicaksono Twitter</a>
<a style="top: 2.87457px; left: 131.284px; z-index: 1012; opacity: 0.6; -moz-transform: rotate(191.92deg);" href="http://www.stumbleupon.com/bambangwi" rel="nofollow" id="iconstumbleupon">@Bambang Wicaksono Stumbleupon</a>
<a style="top: 29.391px; left: 245.218px; z-index: 1000; opacity: 0.6; -moz-transform: rotate(295.304deg);" href="http://www.delicious.com/bambang_wicaksono" rel="nofollow" id="iconDelicious">Bambang Wicaksono de.licio.us</a>
<a style="top: 33.1283px; left: 248.676px; z-index: 1024; opacity: 0.6; -moz-transform: rotate(78.0497deg);" href="http://facebook.com/masbambangwicaksono" rel="nofollow" id="iconFacebook">Bambang Wicaksono Facebook</a>
<a style="top: 15.11px; left: 93.4135px; z-index: 1017; opacity: 0.6; -moz-transform: rotate(346.566deg);" href="http://www.reddit.com/bambangwi" rel="nofollow" id="iconreddit">Bambang Wicaksono Reddit</a>
<a style="top: 28.4499px; left: 47.2333px; z-index: 1020; opacity: 0.6; -moz-transform: rotate(65.6721deg);" href="http://www.digg.com/users/bambangwi" id="icondigg">Bambang Wicaksono Digg</a>
<a style="top: 13.7949px; left: 36.0966px; z-index: 1021; opacity: 0.6; -moz-transform: rotate(210.147deg);" href="mailto:bambang_wicaksono@yahoo.com" id="iconMail">Bambang Wicaksono Email</a>
<a style="top: 24.9191px; left: 393.534px; z-index: 1019; opacity: 0.6; -moz-transform: rotate(264.417deg);" href="http://www.google.com/reader/view/feed/http%3A%2F%2Ffeeds.feedburner.com%2FTemplateForYourBlog" rel="nofollow" id="iconfavorite">Bambang Wicaksono Feed</a>
</div>
</div>

The links are as standard as they come. These will be turned into dynamic icons.

The CSS

The first part of the process is using standard CSS to move the text off screen and instead use the icons as background images for the link:


<style type="text/css">
#followIcons a{ 
display:inline-block;
width:48px;
height:48px;
text-indent:-3000px;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
position:absolute;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
#iconRSS{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-KJtyRfscm6BKWKgvYsALanYeLbStHB3kvF65wink_JRq-90Z1PxlrpdpoTIEczcLJktN0i-n6FpuntadkekmB5aBhmK8BvvgsGMXfO_DMIta6nvV7pSfRUJsBmeu9-PTvGQL5txaxtq_/s1600/rss.png); }
#iconTwitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr2LepL1A6TN1N-5xjQSXqXW5-rYPU10RxZmHBR2CFCvuDsxcOW4iemzVoYgOhkQ1qVM6JHE-OiWQdq5Pd4FT_pGuF-UwMnG3s5iXWlrdKpzipPfnORcpb8hos15x_vjHwL-yyem_OtRpU/s1600/twitter_bird.png); }
#iconstumbleupon{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7owk_NkO0Oe-HyiSqpaOB_10mdEtP6WmqhtmfslTpCrDFtogefpA-IJCXP9oTZ1nafDSplZZUEkfIz8Yv9xDmJrcoRMcbMW1YkSFPORnYljGbjLQhmPGEEUPjowwBAM1jAhT6N3kf3oui/s1600/stumbleupon.png); }
#iconDelicious{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxMXZebFRg4d4i-w6a227prWzXobZj_BzKuHyWu9MO1ccTGv438ymb-o6bYdkm_3smqlQ1Y5kp8hLAPAu6bJDgQeLJG7ZLaSGAfi7aqQtop7_7EQoPnDn-69GExTqtRyCZKXtdd1SOy2v/s1600/delicious.png); }
#iconFacebook{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMngMnXlbvxY-nYFWUvIRJbVzaI18K3h10eGtsKTo6fkyVltNxeMSjVGCX_NkMi1aTuaHtxa5kDfuPMAdhkFrbODTqzCkEz6_hn49KuutKyk7q1GsLqrALaSpwLR5d0onUqJnk6_AvjCTb/s1600/facebook.png); }
#iconreddit{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO63v5IVnhyphenhyphenIXdggESFldsINq4AjyvnmD0s2gV52C6vPGUjwZc6MOKmPRTSH4lopWebTYtKGUqphQIT0KX_nh-r-9P-9wDXdimfTC_hymCjve77xu4EPCylH6zdh4iDHt9tU7iq9OZqw7c/s1600/reddit.png); }
#icondigg{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnvEIs2Ihyphenhypheng8J5byglGyZ8-VbgIvQT_5f9ofkogXEhc7LGUWhI5iFvABGUyj8xZUMXm7emN_S2CTTVvPOhl8Us_OTY_tnBEz18130TwTEVat0rBOcEAXO_rkNJARk7RfYC5uL9KNupsDQD/s1600/digg.png); }
#iconMail{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HaWKzsEr5OCeknuHtmT9YdB87SfxAzceg4IDQojh5n4o5N9SneS55jyqwBsBU46QVJhrQafxRU3ckIViB1GA6XLWjpZoCT2L0eZ85bf10ZvLdsqyMTbrUZUcKYiArbfBAG_gwl7P0rn8/s1600/mail.png); }
#iconfavorite{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDiKESJFbDppDAGH4O3xGUWZnqivuAOrailEQH_Be9ogaQsyutkiKWdf0FcipaO4MyKLcAsrzVw9pgOm-8NLvdGy7VgZ7t3oXsu0ve3-53aAWqZHzLQBiCaW9NaAReFNKHZ1_7WWbblzZ/s1600/favorite.png); }
 </style>

The transition duration will be 0.8 seconds and transition property will be a basic transform. You can change the transform duration to any duration you'd like. Too fast or too slow will ruin the effect.

The jQuery JavaScript

The first part is randomly positioning each node/icon within the container. It's important to know the container's width and height, then subtract the icon width and height from that to know the true area you can fit the icon into. Nothing would be more lame than a piece of the icon hidden. The next step of the process is adding mouseenter and mouseleave events to make the images rotate and fade in during each respective event.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

 <script>
jQuery(document).ready(function() {

 // "Globals" - Will make things compress mo-betta
 var $random = function(x) { return Math.random() * x; };
 var availableWidth = 400, availableHeight = 40;
 
 // Get the proper CSS prefix
 if(jQuery.browser.webkit) {
  cssPrefix = "webkit";
 }
 else if(jQuery.browser.mozilla) {
  cssPrefix = "moz";
 }
 else if(jQuery.browser.opera) {
  cssPrefix = "o";
 }

 // Apply opacity
 var zIndex = 1000;
 
 // Randomize each link
 jQuery.each(jQuery("#followIcons a"),function(index) {
  var startDeg = $random(360);
  var element = jQuery(this);
  var resetPlace = function() {
   element.fadeTo(250,0.6).css("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
  };
  element.attr("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex).hover(function() {
   element.fadeTo(250,1).css("zIndex",++zIndex).css("-" + cssPrefix + "-transform","rotate(0deg)");
  },resetPlace);
  resetPlace();
 });
});
 </script>

When the mouseenter event occurs, the rotation is animated to 0, no rotation. When the mouse leaves the element, the element animates to its initial random rotation. You'll also note that I've used opacity to add to the subtle effect.

source article : davidwalsh.name/fade-spin-css3-jquery

Read More Add your Comment 0 comments

Circulate jQuery Plugin

Saturday, April 09, 2011 Posted by Unknown

Circulate, a jQuery plugin make your images circulate around your page. This plugin requires the jQuery library as well as the easing plugin, just include a small piece of code to get the images circulate.

Read More Add your Comment 0 comments

Exploding Logo with CSS3 and jQuery

Tuesday, April 05, 2011 Posted by Unknown

Ryan's CSS animation library, available with vanilla JavaScript, MooTools, or jQuery, and can only be described as a fucking work of art. His animation library is mobile-enabled, works a variety of A-grade browsers, and is very compact.

The HTML

The exploding element can be of any type, but for the purposes of this example, we'll use an A element with a background image:


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJF8_HvqT5tDnoXoxYASpnTyJVw0VRB-0101zOF-cVVKHCk4bqIDMn1zZZsc720408lrX5xx2aN0D7B9nyW2IHMI_AqvlQJinffojMWOouWOxQd1bFXGTau0byY3SIJ3rYrneeWw4A3eY/s320/Wayang+Kulit.jpg" id="homeLogo">Deviation</a>

Make sure the element you use is a block element, or styled to be block.

The CSS

The original element should be styled to size (width and height) with the background image that we'll use as the exploding image:


<style type="text/css">
a#homeLogo { 
 width:300px; 
 height:233px; 
 text-indent:-3000px; 
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJF8_HvqT5tDnoXoxYASpnTyJVw0VRB-0101zOF-cVVKHCk4bqIDMn1zZZsc720408lrX5xx2aN0D7B9nyW2IHMI_AqvlQJinffojMWOouWOxQd1bFXGTau0byY3SIJ3rYrneeWw4A3eY/s200/Wayang+Kulit.jpg) 0 0 no-repeat; 
 display:block; 
 z-index:2; 
}
a#homeLogo span { 
 float:left;
 display:block;
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJF8_HvqT5tDnoXoxYASpnTyJVw0VRB-0101zOF-cVVKHCk4bqIDMn1zZZsc720408lrX5xx2aN0D7B9nyW2IHMI_AqvlQJinffojMWOouWOxQd1bFXGTau0byY3SIJ3rYrneeWw4A3eY/s200/Wayang+Kulit.jpg); 
 background-repeat:no-repeat;
}
.clear { clear:both; }
</style>

Remember to set the text-indent setting so that the link text will not display. The explosion shards will be JavaScript-generated SPAN elements which are displayed as in block format. Note that the SPAN has the same background image as the A element -- we'll simply modify the background position of the element to act as the piece of the logo that each SPAN represents.

The jQuery JavaScript

Ryan also wrote the CSS animation code in jQuery so you can easily create a comparable effect with jQuery!


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.jQuery.js"></script>

<script>
Number.random = function(min, max){
 return Math.floor(Math.random() * (max - min + 1) + min);
};

var zeros = {x:0, y:0, z:0};

jQuery.extend(jQuery.fn, {

 scatter: function(){
  return this.translate({
   x: Number.random(-1000, 1000),
   y: Number.random(-1000, 1000),
   z: Number.random(-500, 500)
  }).rotate({
   x: Number.random(-720, 720),
   y: Number.random(-720, 720),
   z: Number.random(-720, 720)
  });
 },

 unscatter: function(){ 
  return this.translate(zeros).rotate(zeros);
 },

 frighten: function(d){
  var self = this;
  this.setTransition('timing-function', 'ease-out').scatter();
  setTimeout(function(){
   self.setTransition('timing-function', 'ease-in-out').unscatter();
  }, 500);
  return this;
 },

 zoom: function(delay){
  var self = this;
  this.scale(0.01);
  setTimeout(function(){
   self.setTransition({
    property: 'transform',
    duration: '250ms',
    'timing-function': 'ease-out'
   }).scale(1.2);
   setTimeout(function(){
    self.setTransition('duration', '100ms').scale(1);
   }, 250)
  }, delay);
  return this;
 },

 makeSlider: function(){
  return this.each(function(){
   var $this = $(this),
    open = false,
    next = $this.next(),
    height = next.attr('scrollHeight'),
    transition = {
     property: 'height',
     duration: '500ms',
     transition: 'ease-out'
    };
   next.setTransition(transition);
   $this.bind('click', function(){
    next.css('height', open ? 0 : height);
    open = !open;
   });
  })
 },

 fromChaos: (function(){
  var delay = 0;
  return function(){
   return this.each(function(){
    var element = $(this);
    //element.scatter();
    setTimeout(function(){
     element.setTransition({
      property: 'transform',
      duration: '500ms',
      'timing-function': 'ease-out'
     });
     setTimeout(function(){
      element.unscatter();
      element.bind({
       mouseenter: jQuery.proxy(element.frighten, element),
       touchstart: jQuery.proxy(element.frighten, element)
      });
     }, delay += 100);
    }, 1000);
   })
  }
 }())

});

// When the DOM is ready...
$(document).ready(function() {
 
 // Get the proper CSS prefix
 var cssPrefix = false;
 if(jQuery.browser.webkit) {
  cssPrefix = "webkit";
 }
 else if(jQuery.browser.mozilla) {
  cssPrefix = "moz";
 }
 
 // If we support this browser
 if(cssPrefix) {
  // 300 x 233
  var cols = 10; // Desired columns
  var rows = 8; // Desired rows
  var totalWidth = 300; // Logo width
  var totalHeight = 233; // Logo height
  var singleWidth = Math.ceil(totalWidth / cols); // Shard width
  var singleHeight = Math.ceil(totalHeight / rows); // Shard height
  
  // Remove the text and background image from the logo
  var logo = jQuery("#homeLogo").css("backgroundImage","none").html("");
  
  // For every desired row
  for(x = 0; x < rows; x++) {
   var last;
   //For every desired column
   for(y = 0; y < cols; y++) {
    // Create a SPAN element with the proper CSS settings
    // Width, height, browser-specific CSS
    last = jQuery("<span />").attr("style","width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * y) + "px -" + (singleWidth * x) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);");
    // Insert into DOM
    logo.append(last);
   }
   // Create a DIV clear for row
   last.append(jQuery("<div />").addClass("clear"));
  }
  
  // Chaos!
  jQuery("#homeLogo span").fromChaos();
 }
});
</script>

and you are done

source article : davidwalsh.name/css-explode

Read More Add your Comment 0 comments

The use of jQuery

Tuesday, April 05, 2011 Posted by Unknown

Overlay-like Effect with jQuery

Today we will create a slick overlay effect with jQuery that does not use an overlay.

Fullscreen Gallery with Thumbnail Flip

In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images.

Making a Flickr-powered Slideshow

Today we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets.

Converting jQuery Code to a Plugin

When it comes to efficiently organizing jQuery code, one of the best options is turning certain parts of it into a plugin. There are many benefits to this - your code becomes easier to modify and follow, and repetitive tasks are handled naturally. This also improves the speed with which you develop, as plugin organization promotes code reuse.

jQuery fancy Draggable Captcha

Tutorial about creating captcha with jQuery.

Rounded Menu with CSS3 and jQuery

In this tutorial we will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

jQuery Advanced Ajax validation with CAPTCHA

One more tutorial about creating captcha with jQuery.

Populate Select Boxes

It's the age old (well, in webby terms) issue of how to populate one select box based on another's selection. It's actually quite easy compared with the bad old days, and incredibly easy with jQuery and a dash of Ajax.

A Snazzy Animated Pie Chart with HTML5 and jQuery

Tutorial about creating animated chart with jQuery.

Spotlight: Constrained Stickies with jQuery

This tutorial will show you how to use stickyFloat plugin.

Fun with jQuery Templating and AJAX

In this tutorial, we'll take a look at how jQuery's beta templating system can be put to excellent use in order to completely decouple our HTML from our scripts. We?ll also take a quick look at jQuery 1.5's completely revamped AJAX module.

Think Right-to-Left with jQuery

As English speakers, our minds are geared toward interpreting data and text from left-to-right. However, as it turns out, many of the modern JavaScript selector engines (jQuery, YUI 3, NWMatcher), and the native querySelectorAll, parse selector strings from right to left.

Reveal extra form fields using a select box with jQuery

Sometimes we need to include a feedback form but without making it too obtrusive to the user so we only want to add options when he is actually using it. In this tutorial we're going to learn how to reveal hidden fields in a form when an option in a select combo box is selected using jQuery, the JavaScript library.

Add a character counter for the excerpt in WordPress

The excerpt is great for magazine sites where only a small bunch of words can be displayed on the home page. However, the lack of a character counting functionality for the field makes it hard to know how many you already typed in. In this tutorial we will learn how to easily add a character counter for the excerpt.

Featured posts slider in WordPress using sticky posts and jQuery

In this post we will learn how to create a featured posts section, using WordPress sticky posts and how to integrate them in a slider, using jQuery Cycle.

How to hide Personal Options in WordPress User Profile

Even though WordPress might not the friendliest CMS for user management, provides a good amount of customization for users meta information and profiles. However, one thing that is a bit rough right now is the Personal Options block in the User Pofile: you can't hide it by removing an action hook or even filter it. In this tutorial we?re going to learn how to removing it using jQuery.

Yahoo Instant Search with jQuery and Ajax

Tutorial about Yahoo instant search implementing with Yahoo Search Boss API using jQuery and Ajax.

Gravity Registration Form with jQuery

Tutorial about creating animated login form.

Typing Game with jQuery

Tutorrial about creating simple game with jQuery.

Read More Add your Comment 0 comments

High Quality JQuery Horizontal Navigation Menus

Saturday, February 05, 2011 Posted by Unknown

Navigation menus are very important part of a website. It help your visitors to navigate through your website easily. There are various type of beautiful navigational menu in the web. Some of are work only using CSS. But some advanced navigation menus use scripts like jQuery. Using jQuery you can create navigation menus which include advanced features.

Here listed 17 very attractive jQuery horizontal menus collection for web designers. Select your menu and use it to add a professionallook for your website.

Add Smart JQuery Featured Slider to Blogger / Websites

Thursday, February 03, 2011 Posted by Unknown

How to add great featured jQuery content slider to your blogger blog or other website ? Read the instruction given below to add this featured content slider to your blog with in few minutes. Remember to use 307px width and 254px height images for this slider. I recommend to DOWNLOAD java script files and host it yourself.

1. Login to your blogger dashboard--> Design - -> Edit HTML.

2. Scroll down to where you see </head> tag .

3. Copy below code and paste it just before the </head> tag .


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
          jQuery('#mycarousel').jcarousel({
          wrap:"both",
          scroll:2,
          animation:"slow"
  });
          function mycarousel_initCallback(carousel) {
          jQuery('#featured-next-button').bind('click', function() {
                  carousel.next();
                  return false;
          });

          jQuery('#featured-prev-button').bind('click', function() {
                  carousel.prev();
                  return false;
          });
          jQuery('.button-nav span').bind('click', function() {
                  carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                  return false;
          });
  };
          jQuery('#feature-carousel').jcarousel({
          wrap:"both",
          scroll:1,
          auto:10,
          initCallback: mycarousel_initCallback,
          buttonNextHTML: null,
          buttonPrevHTML: null
  });

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAkA8ZWWpjDOyRCOwe0In165zDck0deg1wRrmBI0xR8-nFACXxBEpJqiuXqbRatC2A2UnxpHi_ldXDBGD4SmGzq_c5mKd0NOhz9lX1cRHADNkEDty2j4oAm0Cc2jpaykyNAm4qG7Gg3ClD/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAkA8ZWWpjDOyRCOwe0In165zDck0deg1wRrmBI0xR8-nFACXxBEpJqiuXqbRatC2A2UnxpHi_ldXDBGD4SmGzq_c5mKd0NOhz9lX1cRHADNkEDty2j4oAm0Cc2jpaykyNAm4qG7Gg3ClD/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

4. Now save your template.

5. Go to Layout --> Page Elements.

6. Click on 'Add a Gadget'.

7. Select 'HTML/Javascript' and add the code given below:


<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>

Replace,
SLIDE-X-LINK-HERE with your real featured posts links.
SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

You are done.

Read More Add your Comment 0 comments

jquery.shutter.css

jQuery

Generated HTML

The Final Code

1. Animated Menus Using jQuery

2. jQuery drop down menu

3. Kwicks for jQuery-7 Menus

4. CSS Dock Menu

5. Sliding JavaScript Menu Highlight 1kb

6. Animated Menus Using jQuery

7. jQuery Fading Menu

8. Superfish jQuery menu

9. Smooth Animated Menu with jQuery

10. CSS Sprites2 Menu - It’s JavaScript Time

11. Apple style menu and improve it via jQuery

12. jqDock menu

13. Multilevel Dropdown menu with CSS and improve it via jQuery

14. jQuery feed menus

15. Menumatic horizontal menu

16. Garage Door effect menu

17. jQuery Background Position menu

Be My Friend

Recent Posts

Popular Posts

Blog Archive

Tags

Stay Connected

Featured Content

Resources and Tools

Categories

About Me

Our Visitors