jQuery World

Easy Image Zoom with jQuery

2011-05-26T10:32:00.000-07:00

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

CSS Circle Button

2011-05-26T07:40:00.000-07:00

image by: superdit.com

See Demo at the bottom of the page.

With the new features that CSS3 have creating a variety of button. In this example, radius of the border, padding the button, the height and width modified, it can look like a circle. And added the rotateX property that currently only supported in web kit browser, to make it look like from different angle.

This all the simple code.


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    body {
        font-family: Arial, sans-serif;
    }
    #container {
        margin: 120px auto;
        text-align: center;
    }
    .button {
        -webkit-transform: rotateX( 35deg );
        position: relative;
        display: inline-block;
        width: 100px;
        padding: 42px 15px;
        margin: 0px 10px;
        background-color: #C91826;
        color: #fff;
        font-weight: bold;
        font-size: 40px;
        text-decoration: none;
        text-align: center;
        text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
        border: 1px solid;
        border-color: #B21522;
        border-radius: 78px;
        -moz-border-radius: 78px;
        -webkit-border-radius: 78px;
        box-shadow:   inset 0px -4px 5px rgba(255,255,255,0.2),
                            inset 0px 1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 12px 0px #231F20,
                            0px 14px 0px #231F20,
                            0px 16px 0px #231F20,
                            /**/
                            0px 8px 5px rgba(0,0,0,0.5);
        -moz-box-shadow:  inset 0px -4px 5px rgba(255,255,255,0.2),
                            inset 0px 1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 12px 0px #231F20,
                            0px 14px 0px #231F20,
                            0px 16px 0px #231F20,
                            /**/
                            0px 8px 5px rgba(0,0,0,0.5);
        -webkit-box-shadow: inset 5px -4px 5px rgba(255,255,255,0.2),
                            inset 5px 1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 12px 0px #231F20,
                            0px 14px 0px #231F20,
                            0px 16px 0px #231F20;
    }
    .button:hover {
        background-color: #B21522;
        color: #e3e3e3;
    }
    .button:active {
        top: 8px;
        box-shadow:   inset 0px 4px 5px rgba(255,255,255,0.4),
                            inset 0px -1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 8px 0px #231F20,
                            /**/
                            0px 9px 5px rgba(0,0,0,0.5);
        -moz-box-shadow:  inset 0px 4px 5px rgba(255,255,255,0.4),
                            inset 0px -1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 8px 0px #231F20,
                            /**/
                            0px 9px 5px rgba(0,0,0,0.5);
        -webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
                            inset 0px -1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 8px 0px #231F20,
                            /**/
                            0px 9px 5px rgba(0,0,0,0.5);
    }
    </style>
</head>
<body>
  <div id="container">
    <a href="http://template4.blogspot.com/" target="blank" class="button">Push</a>
    <a href="http://template4ublog.blogspot.com/" target="blank"" class="button">Stop</a>
  </div>
</body>
</html>

source article : Create CSS Circle Button

Background Animations Using MooTools

2011-05-20T10:04:00.000-07:00

One of the sweet effects made easy by JavaScript frameworks like MooTools and jQuery is animation. Here's a quick MooTools code snippet that shows how you can add animating a background image to any element on a page.

The CSS


#animate-area { 
 background-image:url(clouds.png);
 background-position:0px 0px;
 background-repeat:repeat-x;
}

The first step is assigning the image as a background image for our given container. Be sure to repeat the background horizontally!

The HTML


<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools.js" type="text/javascript">
</script>
<script type="text/javascript">
  window.addEvent('domready',function() {
   //settings
   var duration = 40000;
   var length = 2000;
   var count = 0;
   
   var tweener;
   
   // Executes the standard tween on the background position
   var run = function() {
    tweener.tween('background-position','-' + (++count * length) + 'px 0px');
   };
   
   // Defines the tween
   tweener = $('animate-area').setStyle("background-position","0px 0px").set('tween',{ 
    duration: duration, 
    transition: Fx.Transitions.linear,
    onComplete: run,
    wait: false
   });
   
   // Starts the initial run of the transition
   run();
   
  });
</script>

The first step, as always is getting our settings ready for the show. The next piece is putting the animation function in place. We increment the negative background left position counter calculation to keep the show rolling. Last step is playing the show!

Make sure the animation speed is very slow and subtle -- a rapid background speed could make your users pass out. On the other hand, implementing it tastefully will make your website unique.

DEMO

source article : Background Animations Using MooTools

Cursor Following Menu for Site

2011-05-08T09:11:00.000-07:00

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

Rotating Image Slider with jQuery

2011-05-04T06:23:00.000-07:00

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

Shutter Effect with jQuery

2011-04-20T10:49:00.000-07:00

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!

Fading and Spinning Icons with CSS3 and jQuery

2011-04-20T10:41:00.000-07:00

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

Circulate jQuery Plugin

2011-04-09T01:43:00.000-07:00

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.

Dojo Lightbox

2011-04-06T12:26:00.000-07:00

The dojox.image.Lightbox resource has many cool features:

Integrated theming and images
Keyboard accessible
Resizes when the viewport changes
Flexible with numerous options
Declarative or Programmatic instance creation
Works with Dojo data stores

Let me show you just how easy it is to use Dojo's Lightbox solution!

The CSS

dojox.image.Lightbox doesn't require any of the Dijit themes but does require its own CSS file:


<style type="text/css">
/* post styles */
#imageHolder img { width:200px; }
/* Lightbox styles */
.tundra .dijitDialogUnderlay, 
.nihilo .dijitDialogUnderlay,
.soria .dijitDialogUnderlay {
 background-color:#000; 
}
.claro .dojoxLightbox .dijitDialogCloseIconHover,
.nihilo .dojoxLightbox .dijitDialogCloseIconHover,
.tundra .dojoxLightbox .dijitDialogCloseIconHover, 
.tundra .dojoxLightbox .dijitDialogCloseIconActive,
.nihilo .dojoxLightbox .dijitDialogCloseIconActive,
.claro .dojoxLightbox .dijitDialogCloseIconActive {
    background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/close.png') no-repeat 0 0;
}
.claro .dojoxLightbox,
.soria .dojoxLightbox,
.nihilo .dojoxLightbox,
.tundra .dojoxLightbox {
 position:absolute;
 z-index:999;
 overflow:hidden;
 width:100px;
 height:100px; 
 border:11px solid #fff !important; 
 background:#fff url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/loading.gif') no-repeat center center;
 
 -webkit-box-shadow: 0px 6px 10px #636363; 
 -webkit-border-radius: 3px;
 -moz-border-radius:4px;
 border-radius: 4px;
}
.dojoxLightboxContainer {
 position:absolute;
 top:0; left:0;
 background-color:#fff;
}
.dojoxLightboxFooter {
 padding-bottom:5px;
 position:relative;
 bottom:0;
 left:0;
 margin-top:8px;
 color:#333;
 z-index:1000;
 font-size:10pt;
}
.dojoxLightboxGroupText {
 color:#666; 
 font-size:8pt;
}
.LightboxNext,
.LightboxPrev,
.LightboxClose {
 float:right;
 width:16px;
 height:16px;
 cursor:pointer;
}
.claro .LightboxClose,
.nihilo .LightboxClose,
.LightboxClose {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/close.png') no-repeat center center;
}
.di_ie6 .claro .LightboxClose,
.di_ie6 .nihilo .LightboxClose,
.dj_ie6 .tundra .LightboxClose {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/close.gif') no-repeat center center;
}
.claro .LightboxNext, 
.nihilo .LightboxNext,
.LightboxNext {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/right.png') no-repeat center center;
}
.dj_ie6 .claro .LightboxNext,
.dj_ie6 .nihilo .LightboxNext,
.dj_ie6 .tundra .LightboxNext {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/right.gif') no-repeat center center;
}
.claro .LightboxPrev,
.nihilo .LightboxPrev,
.LightboxPrev {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/left.png') no-repeat center center;
}
.dj_ie6 .claro .LightboxPrev,
.dj_ie6 .nihilo .LightboxPrev,
.dj_ie6 .tundra .LightboxPrev {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/left.gif') no-repeat center center;
}
.soria .LightboxClose,
.soria .LightboxNext,
.soria .LightboxPrev {
 width:15px;
 height:15px;
 background:url('chrome://interclue/content/cluecore/skins/default/sprites.png') no-repeat center center;
 background-position:-60px;
}
.soria .LightboxNext {
 background-position:-30px 0;
}
.soria .LightboxPrev {
 background-position:0 0;
}
.dojoxLightboxText {
 margin:0; padding:0; 
}

     </style>

All of the imagery required comes via the CSS file -- no need to add your own styles.

The HTML and JavaScript

The first step in using any Dojo resources is adding a SCRIPT tag with a path to Dojo within the page and requiring the desired Dojo Toolkit resources:


<script>
  // Parse the page upon load
  djConfig = { parseOnLoad: true };
  // When the DOM is ready and resources are loaded...
        dojo.ready(function() {
     // Create an instance
     var lightbox = new dojox.image.Lightbox({ title:"My Sons", group:"My Sons", href:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJ7ZoJ-Dsi1Y3J90HqKJnqq_7aRGrGL1ButPqR1tlyNDvCWTPHFMeur_Rzn3LE1jeOucYK4JQG23VqGVftxH-61plAPPyygj5L26CfAnjl0u28DHG0wcTvpdBVjnEwHXFbnu_YAp1bhEw/s1600/My+Sons+1_490x395.jpg" });
     // Start it up!
     lightbox.startup();
        })
     </script>
 <!--bring in the lightbox CSS 
<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/Lightbox.css' rel='stylesheet' type='text/css'/>-->
 <!--bring in the claro theme
<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css'/>-->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
     <script type="text/javascript">
  // Request dependencies
  dojo.require("dojox.image.Lightbox");
     </script>

With parseOnLoad in place, you can add links to the page with the data-dojo-type attribute set to dojox.image.Lightbox and instance-specific options within the data-dojo-props attribute. Here's a sample:


<div id="imageHolder">
<a href="http://bambang-wicaksono.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJ7ZoJ-Dsi1Y3J90HqKJnqq_7aRGrGL1ButPqR1tlyNDvCWTPHFMeur_Rzn3LE1jeOucYK4JQG23VqGVftxH-61plAPPyygj5L26CfAnjl0u28DHG0wcTvpdBVjnEwHXFbnu_YAp1bhEw/s1600/My+Sons+1_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJ7ZoJ-Dsi1Y3J90HqKJnqq_7aRGrGL1ButPqR1tlyNDvCWTPHFMeur_Rzn3LE1jeOucYK4JQG23VqGVftxH-61plAPPyygj5L26CfAnjl0u28DHG0wcTvpdBVjnEwHXFbnu_YAp1bhEw/s320/My+Sons+1_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQxDh5TMGemmTEJ_IttLolot_e6lwW9dQfkjBQYsXrcrL-dTi29-npf2TCEaGTfBALpH-hJOMYpaJLgBhyphenhyphenPy22wZihUFJvbWid5RNg94xaNBfYo9iuP2bbdFqwE1FhBH-9mF92TedA4do/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQxDh5TMGemmTEJ_IttLolot_e6lwW9dQfkjBQYsXrcrL-dTi29-npf2TCEaGTfBALpH-hJOMYpaJLgBhyphenhyphenPy22wZihUFJvbWid5RNg94xaNBfYo9iuP2bbdFqwE1FhBH-9mF92TedA4do/s320/My+Sons+4_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4ublog.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvau1rv67x7MnkgGD7RRdUnBHzRJl0VtlD8QnQSkVRloFtM4YdlHGukzJOgpkTTcn6suLQn2RAUDs-BZZ-0v05802JyBzZUCpTOVzzDRWo8G44v3q_06qwKFgc4KgaHziV6reWx9cJfyu1/s1600/My+Sons+2_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvau1rv67x7MnkgGD7RRdUnBHzRJl0VtlD8QnQSkVRloFtM4YdlHGukzJOgpkTTcn6suLQn2RAUDs-BZZ-0v05802JyBzZUCpTOVzzDRWo8G44v3q_06qwKFgc4KgaHziV6reWx9cJfyu1/s320/My+Sons+2_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjds1JBSqKzZs56MiyZSRlsOiVr4HYpGWKXRBdqLT4b6NoCyyN7gnXLTJbGQMOjS5-K-wiDY9OpV63vk2z_D5gwFWc7lp40s1C9Hi5yh6RhSYUZ3kilXPTRbbr7Qiw6D9sR4t-8diTi4rmY/s1600/My+Sons+3_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjds1JBSqKzZs56MiyZSRlsOiVr4HYpGWKXRBdqLT4b6NoCyyN7gnXLTJbGQMOjS5-K-wiDY9OpV63vk2z_D5gwFWc7lp40s1C9Hi5yh6RhSYUZ3kilXPTRbbr7Qiw6D9sR4t-8diTi4rmY/s320/My+Sons+3_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4ublog.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQxDh5TMGemmTEJ_IttLolot_e6lwW9dQfkjBQYsXrcrL-dTi29-npf2TCEaGTfBALpH-hJOMYpaJLgBhyphenhyphenPy22wZihUFJvbWid5RNg94xaNBfYo9iuP2bbdFqwE1FhBH-9mF92TedA4do/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQxDh5TMGemmTEJ_IttLolot_e6lwW9dQfkjBQYsXrcrL-dTi29-npf2TCEaGTfBALpH-hJOMYpaJLgBhyphenhyphenPy22wZihUFJvbWid5RNg94xaNBfYo9iuP2bbdFqwE1FhBH-9mF92TedA4do/s320/My+Sons+4_490x395.jpg" alt="My Sons" /></a>
</div>

Groups allow you to have images available within...groups... with next and previous buttons. The title property provides a ...title... and the href property provides the content which should load within the lightbox. You may have any number of groups on the page. That's all that's needed to create a simple Dojo Lightbox declaratively!

With your instance created, start adding more images:


// Add another image by using the lightbox's _attachedDialog method...
lightbox._attachedDialog.addImage({
 title:"My Sons 2", 
 group:"My Sons",  // Can be same group or different!
 href:"MySons.jpg"
});

Regardless of declarative or programmatic implementation, you can show or hide the lightbox with the respective methods:


// Show the lightbox
lightbox.show();
// Hide the lightbox!
lightbox.hide();

As you'd expect with any Dojo Toolkit resource, dojox.image.Lightbox provides the usual onShow, onHide, and other utility methods that are helpful in customizing the Lightbox usage.

dojox.image.Lightbox and dojox.image.LightboxDialog are great resources available within Dojo's "treasure chest", DojoX. Other classes within the dojox.image namespace include Gallery, Slideshow, and Magnifier.

source article: David Walsh

Exploding Logo with CSS3 and jQuery

2011-04-05T10:30:00.000-07:00

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

Create a Spinning Effect with CSS3

2011-04-05T10:28:00.000-07:00

They're smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint. One of my favorite effects is the spinning, zooming CSS animation.

The CSS

The first task is creating the base animation with @-webkit-keyframes:


@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

The -webkit-transform property is the animator in this animation. Define that at 0% the element is at 0 rotation and scaled to 1 -- that is the original state of the element. At 50% of the animation, the element should be rotated 360 degress (a complete spin), and the element should grow twice in size. At 100%, the element should return to its original scale and rotate to 720 degrees, thus looking the same as it started.

With our named animation created, it's time to apply the animation to an element upon its hover state:


a.advert:hover { 
  -webkit-animation-name:rotater; 
  -webkit-animation-duration:500ms; 
  -webkit-animation-iteration-count:1; 
  -webkit-animation-timing-function:ease-out;
  -moz-transform:rotate(720eg) scale(2); 
  -moz-transition-duration:500ms; 
  -moz-transition-timing-function: ease-out;
}

The event is assigned using the -webkit-animation-name property. Additional properties are assigned: -webkit-animation-duration makes the animation last 500 milliseconds, -webkit-animation-iteration-count directs the animation to occur only once, and -webkit-animation-timing-function sets the easing transition to ease-out.

Highly recommend using this effect with fixed-size DOM nodes, with background images. Using this effect with simple DOM nodes doesn't look great.

source article: David Walsh

Creating Gradients with CSS3 and HTML5

2011-04-05T10:27:00.000-07:00

DIVs with Rounded Corners in CSS3

Tutorial about creating Gradients with CSS3.

How to create rounded corners with CSS3.

5 Useful CSS3 Properties You Need to Know

Brief review of useful CSS3 properties.

Border Radius: CSS Rounded Corners Without Images

One more tutorial about CSS3 Rounded corners

CSS Browser Extensions: Vendor Specific Properties

This article tells about specific properties of various browsers.

Fun with CSS3 and Border-Radius

This articles describes botder-radius feature in details.

Tutorial: CSS3 & Tooltips!

Tutorial about creating tooltips with CSS3.

Pure CSS3 Flexbox Tutorial

From this tutoorial you will learn how to create custom flexbox with CSS3.

Playing with CSS 3 - Animations, Rotate and Scale

This article coverss some interesting CSS3 features.

Create the accordion effect using CSS3

Tutorial about creating accordion with pure CSS3.

Custom radio and checkbox inputs using CSS

This tutorial will teach you how to style Checkoxes with CSS3.

Halftone Navigation Menu With jQuery & CSS3

Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Deal-breaker problems with CSS3 multi-columns

This article will tell you about new multi-column properties in CSS3.

CSS effect: space images out to match text height

In this tutorial you will read about interesting resing effect, creted with CSS3.

Foreground images that scale with the layout

Simple CSS techniques can make the content images inside your liquid or elastic pages scale with the layout.

The use of jQuery

2011-04-05T10:25:00.000-07:00

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.

High Quality JQuery Horizontal Navigation Menus

2011-02-05T10:36:00.000-08:00

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

2011-02-03T10:32:00.000-08:00

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.

Posts Auto Slider to Blogger or Websites with Mootools - 1.2.1

2011-01-15T10:39:00.000-08:00

This tutorial will show you how to add Mootools Featured Posts Slider into blogger or any other web site. You can look at the DEMO page of this Mootools Featured Posts Slider. Now if you like to add this slider to your site then follow the steps given below.

1. Login to your blogger dashboard--> layout- -> 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://bnote.googlecode.com/files/mootools-1.2.1-core-yc.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
//MooTools More, <http://mootools.net/more>. Copyright (c) 2006-2008 Valerio Proietti, <http://mad4milk.net>, MIT Style License.

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('11.36=f 12({1M:11,a:{1m:"2s"},X:8(B,A){7.P("1v",8(){7.1w=(7.13["k"+7.1x.37()]!=0);b(7.1w&&2t.2u.38){7.e.39().2v(7.13)}},n);7.e=7.2w=$(B);7.Q(A);9 C=7.e.1n("13");7.13=C||f 1c("3Y",{3Z:$1Y(7.e.40("14","1N"),{41:"42"})}).43(7.e);7.e.1Z("13",7.13).1d("14",0);7.l=[];7.1w=n},2s:8(){7.14="14-15";7.1x="21";7.k=7.e.2x},22:8(){7.14="14-16";7.1x="23";7.k=7.e.2y},17:8(A){7.e.1d(7.14,A[0]);7.13.1d(7.1x,A[1]);c 7},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B[F]=11.1O(E[F],D[F],C)});c B},h:8(B,E){b(!7.z(Y.2z,B,E)){c 7}7[E||7.a.1m]();9 D=7.e.1e(7.14).1P();9 C=7.13.1e(7.1x).1P();9 A=[[D,C],[0,7.k]];9 G=[[D,C],[-7.k,0]];9 F;1Q(B){o"R":F=A;1f;o"3b":F=G;1f;o"1R":F=(7.13["k"+7.1x.37()]==0)?A:G}c 7.Q(F[0],F[1])},3c:8(A){c 7.h("R",A)},3d:8(A){c 7.h("3b",A)},2A:8(A){7[A||7.a.1m]();7.1w=j;c 7.17([-7.k,0])},2B:8(A){7[A||7.a.1m]();7.1w=n;c 7.17([0,7.k])},1R:8(A){c 7.h("1R",A)}});1c.44.r={17:8(B){9 A=7.1n("r");b(A){A.Z()}c 7.3e("r").1Z("r:a",$1Y({2C:"Z"},B))},2D:8(A){b(A||!7.1n("r")){b(A||!7.1n("r:a")){7.17("r",A)}7.1Z("r",f 11.36(7,7.1n("r:a")))}c 7.1n("r")}};1c.1o({r:8(D,E){D=D||"1R";9 B=7.2D("r"),A;1Q(D){o"2A":B.2A(E);1f;o"2B":B.2B(E);1f;o"1R":9 C=7.1n("r:2E",B.1w);B[(C)?"3d":"3c"](E);7.1Z("r:2E",!C);A=n;1f;45:B.h(D,E)}b(!A){7.3e("r:2E")}c 7}});11.46=f 12({1M:11,a:{k:{x:0,y:0},3f:n},X:8(B,A){7.e=7.2w=$(B);7.Q(A);9 D=7.Z.M(7,j);b($10(7.e)!="e"){7.e=$(7.e.24().25)}9 C=7.e;b(7.a.3f){7.P("h",8(){C.P("2F",D)},n);7.P("1v",8(){C.18("2F",D)},n)}},17:8(){9 A=1y.3g(Y);7.e.3h(A[0],A[1])},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B.26(11.1O(E[F],D[F],C))});c B},h:8(C,H){b(!7.z(Y.2z,C,H)){c 7}9 E=7.e.3i(),F=7.e.47();9 B=7.e.3j(),D={x:C,y:H};S(9 G R D){9 A=F[G]-E[G];b($1z(D[G])){D[G]=($10(D[G])=="2G")?D[G].m(0,A):A}s{D[G]=B[G]}D[G]+=7.a.k[G]}c 7.Q([B.x,B.y],[D.x,D.y])},48:8(){c 7.h(j,0)},49:8(){c 7.h(0,j)},4a:8(){c 7.h("1A",j)},4b:8(){c 7.h(j,"1B")},4c:8(B){9 A=$(B).27(7.e);c 7.h(A.x,A.y)}});11.3k=f 12({1M:11.4d,X:8(B,A){7.2H=7.2w=$$(B);7.Q(A)},1O:8(G,H,I){9 C={};S(9 D R G){9 A=G[D],E=H[D],F=C[D]={};S(9 B R A){F[B]=7.Q(A[B],E[B],I)}}c C},17:8(B){S(9 C R B){9 A=B[C];S(9 D R A){7.4e(7.2H[C],D,A[D],7.a.2I)}}c 7},h:8(C){b(!7.z(Y.2z,C)){c 7}9 H={},I={};S(9 D R C){9 F=C[D],A=H[D]={},G=I[D]={};S(9 B R F){9 E=7.4f(7.2H[D],B,F[B]);A[B]=E.4g;G[B]=E.4h}}c 7.Q(H,I)}});9 1C=f 12({2J:[2K,2L],a:{1p:6,2I:"4i",1g:j,2M:n,m:j,28:j,29:j,1q:j,U:{x:"16",y:"15"}},X:8(){9 B=1y.2C(Y,{a:4j.10,e:$4k});7.e=$(B.e);7.t=7.e.24();7.2N(B.a||{});9 A=$10(7.a.28);7.2O=(A=="4l"||A=="4m")?$$(7.a.28):$(7.a.28)||7.e;7.19={l:{},2P:{}};7.p={h:{},l:{}};7.2a=(2t.2u.4n)?"4o":"2b";7.v={h:7.h.M(7),z:7.z.M(7),V:7.V.M(7),1h:7.1h.M(7),Z:7.Z.M(7),2c:$2Q(j)};7.3l()},3l:8(){7.2O.P("2b",7.v.h);c 7},4p:8(){7.2O.18("2b",7.v.h);c 7},h:8(C){b(7.a.1q){C.1q()}7.u("4q",7.e);7.19.h=C.N;9 A=7.a.m;7.m={x:[],y:[]};S(9 D R 7.a.U){b(!7.a.U[D]){3m}b(7.a.2M){7.p.l[D]=7.e.1e(7.a.U[D]).1P()}s{7.p.l[D]=7.e[7.a.U[D]]}b(7.a.29){7.p.l[D]*=-1}7.19.2P[D]=C.N[D]-7.p.l[D];b(A&&A[D]){S(9 B=2;B--;B){b($1z(A[D][B])){7.m[D][B]=$2Q(A[D][B])()}}}}b($10(7.a.1g)=="2G"){7.a.1g={x:7.a.1g,y:7.a.1g}}7.t.2R({1D:7.v.z,2d:7.v.Z});7.t.P(7.2a,7.v.2c)},z:8(A){b(7.a.1q){A.1q()}9 B=i.O(i.4r(i.3n(A.N.x-7.19.h.x,2)+i.3n(A.N.y-7.19.h.y,2)));b(B>7.a.1p){7.Z();7.t.2R({1D:7.v.V,2d:7.v.1h});7.u("h",7.e).u("1p",7.e)}},V:8(A){b(7.a.1q){A.1q()}7.19.l=A.N;S(9 B R 7.a.U){b(!7.a.U[B]){3m}7.p.l[B]=7.19.l[B]-7.19.2P[B];b(7.a.29){7.p.l[B]*=-1}b(7.a.m&&7.m[B]){b($1z(7.m[B][1])&&(7.p.l[B]>7.m[B][1])){7.p.l[B]=7.m[B][1]}s{b($1z(7.m[B][0])&&(7.p.l[B]<7.m[B][0])){7.p.l[B]=7.m[B][0]}}}b(7.a.1g[B]){7.p.l[B]-=(7.p.l[B]%7.a.1g[B])}b(7.a.2M){7.e.1d(7.a.U[B],7.p.l[B]+7.a.2I)}s{7.e[7.a.U[B]]=7.p.l[B]}}7.u("V",7.e)},Z:8(A){7.t.18("1D",7.v.z);7.t.18("2d",7.v.Z);b(A){7.t.18(7.2a,7.v.2c);7.u("Z",7.e)}},1h:8(A){7.t.18(7.2a,7.v.2c);7.t.18("1D",7.v.V);7.t.18("2d",7.v.1h);b(A){7.u("1v",7.e)}}});1c.1o({4s:8(A){c f 1C(7,$2e({U:{x:"23",y:"21"}},A))}});1C.3o=f 12({1M:1C,a:{1S:[],1a:j},X:8(C,B){7.Q(C,B);7.1S=$$(7.a.1S);7.1a=$(7.a.1a);b(7.1a&&$10(7.1a)!="e"){7.1a=$(7.1a.24().25)}C=7.e;9 D=C.1e("1N");9 A=(D!="4t")?D:"4u";b(C.1e("16")=="3p"||C.1e("15")=="3p"){C.1N(C.27(C.3q))}C.1d("1N",A);7.P("h",8(){7.2f()},n)},h:8(B){b(7.1a){9 D=7.e,J=7.1a,E=J.3r(D.3q),F={},A={};["15","1A","1B","16"].1r(8(K){F[K]=J.1e("4v-"+K).1P();A[K]=D.1e("14-"+K).1P()},7);9 C=D.2y+A.16+A.1A,I=D.2x+A.15+A.1B;9 H=[E.16+F.16,E.1A-F.1A-C];9 G=[E.15+F.15,E.1B-F.1B-I];7.a.m={x:H,y:G}}7.Q(B)},3s:8(B){B=B.3r();9 A=7.19.l;c(A.x>B.16&&A.x<B.1A&&A.y<B.1B&&A.y>B.15)},2f:8(){9 A=7.1S.4w(7.3s,7).3t();b(7.1s!=A){b(7.1s){7.u("4x",[7.e,7.1s])}b(A){7.1s=A;7.u("4y",[7.e,A])}s{7.1s=1E}}},V:8(A){7.Q(A);b(7.1S.2g){7.2f()}},1h:8(A){7.2f();7.u("4z",[7.e,7.1s]);7.1s=1E;c 7.Q(A)}});1c.1o({4A:8(A){c f 1C.3o(7,A)}});1F.2S=f 12({1M:2S,a:{3u:n},X:8(B,A){7.Q(B,A);7.2h()},3v:8(){9 A=3w.4B(7.2T);b(!A||A.2g>4C){c j}b(A=="{}"){7.39()}s{7.4D(A)}c n},2h:8(){7.2T=f 1F(3w.4E(7.4F(),n));c 7}});1F.2S.1o((8(){9 A={};1F.1r(1F.4G,8(C,B){A[B]=8(){9 D=C.4H(7.2T,Y);b(7.a.3u){7.3v()}c D}});c A})());9 W=f 4I({X:8(B,C){b(Y.2g>=3){C="1G";B=1y.2i(Y,0,3)}s{b(4J B=="4K"){b(B.2j(/1G/)){B=B.3x().2U(n)}s{b(B.2j(/q/)){B=B.1T()}s{B=B.2U(n)}}}}C=C||"1G";1Q(C){o"q":9 A=B;B=B.1T();B.q=A;1f;o"2V":B=B.2U(n);1f}B.1G=B.2i(0,3);B.q=B.q||B.2k();B.2V=B.3x();c $1Y(B,7)}});W.1o({4L:8(){9 A=1y.2i(Y);9 C=($10(A.3t())=="2G")?A.4M():50;9 B=7.2i();A.1r(8(D){D=f W(D);S(9 E=0;E<3;E++){B[E]=i.O((B[E]/1i*(1i-C))+(D[E]/1i*C))}});c f W(B,"1G")},29:8(){c f W(7.4N(8(A){c 1H-A}))},4O:8(A){c f W([A,7.q[1],7.q[2]],"q")},4P:8(A){c f W([7.q[0],A,7.q[2]],"q")},4Q:8(A){c f W([7.q[0],7.q[1],A],"q")}});8 $4R(C,B,A){c f W([C,B,A],"1G")}8 $4S(C,B,A){c f W([C,B,A],"q")}8 $4T(A){c f W(A,"2V")}1y.1o({2k:8(){9 B=7[0],C=7[1],J=7[2];9 G,F,H;9 I=i.1U(B,C,J),E=i.1j(B,C,J);9 K=I-E;H=I/1H;F=(I!=0)?K/I:0;b(F==0){G=0}s{9 D=(I-B)/K;9 A=(I-C)/K;9 L=(I-J)/K;b(B==I){G=L-A}s{b(C==I){G=2+D-L}s{G=4+A-D}}G/=6;b(G<0){G++}}c[i.O(G*3y),i.O(F*1i),i.O(H*1i)]},1T:8(){9 C=i.O(7[2]/1i*1H);b(7[1]==0){c[C,C,C]}s{9 A=7[0]%3y;9 E=A%2W;9 F=i.O((7[2]*(1i-7[1]))/4U*1H);9 D=i.O((7[2]*(3z-7[1]*E))/3A*1H);9 B=i.O((7[2]*(3z-7[1]*(2W-E)))/3A*1H);1Q(i.4V(A/2W)){o 0:c[C,B,F];o 1:c[D,C,F];o 2:c[F,C,B];o 3:c[F,D,C];o 4:c[B,F,C];o 5:c[C,F,D]}}c j}});4W.1o({2k:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?q.2k():1E},1T:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?A.1T():1E}});9 4X=f 12({X:8(){7.2l=1y.3g(Y);7.1I={};7.1J={}},P:8(B,A){7.1J[B]=7.1J[B]||{};7.1I[B]=7.1I[B]||[];b(7.1I[B].3B(A)){c j}s{7.1I[B].26(A)}7.2l.1r(8(C,D){C.P(B,7.z.M(7,[B,C,D]))},7);c 7},z:8(C,A,B){7.1J[C][B]=n;9 D=7.2l.4Y(8(F,E){c 7.1J[C][E]||j},7);b(!D){c}7.1J[C]={};7.1I[C].1r(8(E){E.3C(7,7.2l,A)},7)}});9 3D=f 1F({3E:8(F,D){D=$1Y({1t:$1K,t:t,z:$2Q(n)},D);9 B=f 1c("4Z",{2X:F,10:"3F/3E"});9 E=D.1t.M(B),A=D.z,G=D.t;2m D.1t;2m D.z;2m D.t;B.2R({2h:E,51:8(){b(["52","1v"].3B(7.53)){E()}}}).3G(D);b(2t.2u.38){9 C=(8(){b(!$54(A)){c}$3H(C);E()}).3I(50)}c B.2v(G.3J)},3K:8(B,A){c f 1c("2C",$2e({55:"56",57:"58",10:"3F/3K",59:B},A)).2v(t.3J)},3L:8(C,B){B=$2e({1t:$1K,3M:$1K,3N:$1K},B);9 D=f 5a();9 A=$(D)||f 1c("5b");["2h","5c","5d"].1r(8(E){9 F="5e"+E;9 G=B[F];2m B[F];D[F]=8(){b(!D){c}b(!A.5f){A.23=D.23;A.21=D.21}D=D.1t=D.3M=D.3N=1E;G.3O(1,A,A);A.u(E,A,1)}});D.2X=A.2X=C;b(D&&D.1v){D.1t.3O(1)}c A.3G(B)},5g:8(D,C){C=$2e({2Y:$1K,3P:$1K},C);b(!D.26){D=[D]}9 A=[];9 B=0;D.1r(8(F){9 E=f 3D.3L(F,{1t:8(){C.3P.3C(7,B,D.5h(F));B++;b(B==D.2g){C.2Y()}}});A.26(E)});c f 3k(A)}});9 5i=f 12({2J:[2K,2L],a:{5j:8(A){b(7.a.1p){A=7.2Z(7.w)}7.1L.1d(7.1V,A)},1p:j,k:0,T:j,2n:j,1k:1i,1m:"22"},X:8(E,A,D){7.2N(D);7.e=$(E);7.1L=$(A);7.30=7.31=7.w=-1;7.e.P("2b",7.3Q.M(7));b(7.a.2n){7.e.P("2F",7.3R.5k(7))}9 F,B={},C={x:j,y:j};1Q(7.a.1m){o"2s":7.1l="y";7.1V="15";F="2x";1f;o"22":7.1l="x";7.1V="16";F="2y"}7.3S=7.1L[F]/2;7.1b=7.e[F]-7.1L[F]+(7.a.k*2);7.1j=$1z(7.a.T[0])?7.a.T[0]:0;7.1U=$1z(7.a.T[1])?7.a.T[1]:7.a.1k;7.T=7.1U-7.1j;7.1k=7.a.1k||7.1b;7.1u=i.32(7.T)/7.1k;7.3T=7.1u*7.1b/i.32(7.T);7.1L.1d("1N","5l").1d(7.1V,-7.a.k);C[7.1l]=7.1V;B[7.1l]=[-7.a.k,7.1b-7.a.k];7.V=f 1C(7.1L,{1p:0,m:B,U:C,5m:7.2o.M(7),5n:7.2o.M(7),2Y:8(){7.2o();7.2p()}.M(7)});b(7.a.1p){7.V.a.1g=i.5o(7.3T);7.V.a.m[7.1l][1]=7.1b}},17:8(A){b(!((7.T>0)^(A<7.1j))){A=7.1j}b(!((7.T>0)^(A>7.1U))){A=7.1U}7.w=i.O(A);7.2q();7.2p();7.u("3U",7.2Z(7.w));c 7},3Q:8(C){9 B=7.T<0?-1:1;9 A=C.N[7.1l]-7.e.27()[7.1l]-7.3S;A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q();7.2p();7.u("3U",A)},3R:8(A){9 B=(7.a.1m=="22")?(A.2n<0):(A.2n>0);7.17(B?7.w-7.1u:7.w+7.1u);A.1h()},2o:8(){9 B=7.T<0?-1:1;9 A=7.V.p.l[7.1l];A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q()},2q:8(){b(7.30!=7.w){7.30=7.w;7.u("3V",7.w)}},2p:8(){b(7.31!==7.w){7.31=7.w;7.u("1v",7.w+"")}},33:8(A){9 B=(A+7.a.k)*7.1u/7.1b*7.1k;c 7.a.1k?i.O(B-=B%7.1u):B},2Z:8(A){c(7.1b*i.32(7.1j-A))/(7.1k*7.1u)-7.a.k}});9 5p=f 12({2J:[2K,2L],a:{1W:20,34:1,5q:8(A,B){7.e.3h(A,B)}},X:8(B,A){7.2N(A);7.e=$(B);7.2r=($10(7.e)!="e")?$(7.e.24().25):7.e;7.1X=1E;7.35=7.3W.M(7)},h:8(){7.2r.P("1D",7.35)},1h:8(){7.2r.18("1D",7.35);7.1X=$3H(7.1X)},3W:8(A){7.N=(7.2r.2D("5r")=="25")?A.5s:A.N;b(!7.1X){7.1X=7.3X.3I(50,7)}},3X:8(){9 B=7.e.3i(),A=7.e.3j(),E=7.e.27(),D={x:0,y:0};S(9 C R 7.N){b(7.N[C]<(7.a.1W+E[C])&&A[C]!=0){D[C]=(7.N[C]-7.a.1W-E[C])*7.a.34}s{b(7.N[C]+7.a.1W>(B[C]+E[C])&&B[C]+B[C]!=A[C]){D[C]=(7.N[C]-B[C]+7.a.1W-E[C])*7.a.34}}}b(D.y||D.x){7.u("3V",[A.x+D.x,A.y+D.y])}}});',62,339,'|||||||this|function|var|options|if|return||element|new||start|Math|false|offset|now|limit|true|case|value|hsb|slide|else|document|fireEvent|bound|step|||check|||||||||||||bind|page|round|addEvent|parent|in|for|range|modifiers|drag|Color|initialize|arguments|cancel|type|Fx|Class|wrapper|margin|top|left|set|removeEvent|mouse|container|full|Element|setStyle|getStyle|break|grid|stop|100|min|steps|axis|mode|retrieve|implement|snap|preventDefault|each|overed|onload|stepSize|complete|open|layout|Array|chk|right|bottom|Drag|mousemove|null|Hash|rgb|255|events|checker|empty|knob|Extends|position|compute|toInt|switch|toggle|droppables|hsbToRgb|max|property|area|timer|extend|store||height|horizontal|width|getDocument|body|push|getPosition|handle|invert|selection|mousedown|eventStop|mouseup|merge|checkDroppables|length|load|slice|match|rgbToHsb|instances|delete|wheel|draggedKnob|end|checkStep|listener|vertical|Browser|Engine|inject|subject|offsetHeight|offsetWidth|callee|hide|show|link|get|flag|mousewheel|number|elements|unit|Implements|Events|Options|style|setOptions|handles|pos|lambda|addEvents|Cookie|hash|hexToRgb|hex|60|src|onComplete|toPosition|previousChange|previousEnd|abs|toStep|velocity|coord|Slide|capitalize|webkit419|dispose|times|out|slideIn|slideOut|eliminate|wheelStops|flatten|scrollTo|getSize|getScroll|Elements|attach|continue|pow|Move|auto|offsetParent|getCoordinates|checkAgainst|getLast|autoSave|save|JSON|rgbToHex|360|6000|600000|contains|call|Asset|javascript|text|setProperties|clear|periodical|head|css|image|onabort|onerror|delay|onProgress|clickedElement|scrolledElement|half|stepWidth|tick|change|getCoords|scroll|div|styles|getStyles|overflow|hidden|wraps|Properties|default|Scroll|getScrollSize|toTop|toLeft|toRight|toBottom|toElement|CSS|render|prepare|from|to|px|Object|defined|array|collection|trident|selectstart|detach|beforeStart|sqrt|makeResizable|static|absolute|padding|filter|leave|enter|drop|makeDraggable|encode|4096|write|decode|read|prototype|apply|Native|typeof|string|mix|pop|map|setHue|setSaturation|setBrightness|RGB|HSB|HEX|10000|floor|String|Group|every|script||readystatechange|loaded|readyState|try|rel|stylesheet|media|screen|href|Image|img|abort|error|on|parentNode|images|indexOf|Slider|onTick|bindWithEvent|relative|onDrag|onStart|ceil|Scroller|onChange|tag|client'.split('|'),0,{}))
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*
This file is part of JonDesign's SmoothGallery v2.1beta1.
JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
JonDesign's SmoothGallery is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with JonDesign's SmoothGallery; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
Contributed code by:
- Christian Ehret (bugfix)
       - Nitrix (bugfix)
       - Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.
       - Archie Cowan for helping me find a bugfix on carousel inner width problem.
       - Tomocchino from #mootools for the preloader class
       Many thanks to:
       - The mootools team for the great mootools lib, and it's help and support throughout the project.
       - Harald Kirschner (digitarald: http://digitarald.de/) for all his great libs. Some used here as plugins.
*/

/* some quirks to circumvent broken stuff in mt1.2 */
function isBody(element){
       return (/^(?:body|html)$/i).test(element.tagName);
};
Element.implement({
       getPosition: function(relative){
               if (isBody(this)) return {x: 0, y: 0};
               var el = this, position = {x: 0, y: 0};
               while (el){
                       position.x += el.offsetLeft;
                       position.y += el.offsetTop;
                       el = el.offsetParent;
               }
               var rpos = (relative) ? $(relative).getPosition() : {x: 0, y: 0};
               return {x: position.x - rpos.x, y: position.y - rpos.y};
       }
});

// declaring the class
var gallery = {
       Implements: [Events, Options],
       options: {
               showArrows: true,
               showCarousel: true,
               showInfopane: true,
               embedLinks: true,
               fadeDuration: 500,
               timed: false,
               delay: 9000,
               preloader: true,
               preloaderImage: true,
               preloaderErrorImage: true,
               /* Data retrieval */
               manualData: [],
               populateFrom: false,
               populateData: true,
               destroyAfterPopulate: true,
               elementSelector: "div.imageElement",
               titleSelector: "h3",
               subtitleSelector: "p",
               linkSelector: "a.open",
               imageSelector: "img.full",
               thumbnailSelector: "img.thumbnail",
               defaultTransition: "fade",
               /* InfoPane options */
               slideInfoZoneOpacity: 0.7,
               slideInfoZoneSlide: true,
               /* Carousel options */
               carouselMinimizedOpacity: 0.4,
               carouselMinimizedHeight: 20,
               carouselMaximizedOpacity: 0.9,
               thumbHeight: 75,
               thumbWidth: 100,
               thumbSpacing: 10,
               thumbIdleOpacity: 0.2,
               textShowCarousel: 'Pictures',
               showCarouselLabel: true,
               thumbCloseCarousel: true,
               useThumbGenerator: false,
               thumbGenerator: 'resizer.php',
               useExternalCarousel: false,
               carouselElement: false,
               carouselHorizontal: true,
               activateCarouselScroller: true,
               carouselPreloader: true,
               textPreloadingCarousel: 'Loading...',
               /* CSS Classes */
               baseClass: 'jdGallery',
               withArrowsClass: 'withArrows',
               /* Plugins: HistoryManager */
               useHistoryManager: false,
               customHistoryKey: false,
               /* Plugins: ReMooz */
               useReMooz: false
       },
       initialize: function(element, options) {
               this.setOptions(options);
               this.fireEvent('onInit');
               this.currentIter = 0;
               this.lastIter = 0;
               this.maxIter = 0;
               this.galleryElement = element;
               this.galleryData = this.options.manualData;
               this.galleryInit = 1;
               this.galleryElements = Array();
               this.thumbnailElements = Array();
               this.galleryElement.addClass(this.options.baseClass);
               if (this.options.useReMooz&&(this.options.defaultTransition=="fade"))
                       this.options.defaultTransition="crossfade";
               this.populateFrom = element;
               if (this.options.populateFrom)
                       this.populateFrom = this.options.populateFrom;
               if (this.options.populateData)
                       this.populateData();
               element.style.display="block";
               if (this.options.useHistoryManager)
                       this.initHistory();
               if ((this.options.embedLinks)|(this.options.useReMooz))
               {
                       this.currentLink = new Element('a').addClass('open').setProperties({
                               href: '#',
                               title: ''
                       }).injectInside(element);
                       if ((!this.options.showArrows) && (!this.options.showCarousel))
                               this.galleryElement = element = this.currentLink;
                       else
                               this.currentLink.setStyle('display', 'none');
               }
               this.constructElements();
               if ((this.galleryData.length>1)&&(this.options.showArrows))
               {
                       var leftArrow = new Element('a').addClass('left').addEvent(
                               'click',
                               this.prevItem.bind(this)
                       ).injectInside(element);
                       var rightArrow = new Element('a').addClass('right').addEvent(
                               'click',
                               this.nextItem.bind(this)
                       ).injectInside(element);
                       this.galleryElement.addClass(this.options.withArrowsClass);
               }
               this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
               if (this.options.showInfopane) this.initInfoSlideshow();
               if (this.options.showCarousel) this.initCarousel();
               this.doSlideShow(1);
       },
       populateData: function() {
               currentArrayPlace = this.galleryData.length;
               options = this.options;
               var data = $A(this.galleryData);
               data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
               this.galleryData = data;
               this.fireEvent('onPopulated');
       },
       populateGallery: function(element, startNumber) {
               var data = [];
               options = this.options;
               currentArrayPlace = startNumber;
               element.getElements(options.elementSelector).each(function(el) {
                       elementDict = $H({
                               image: el.getElement(options.imageSelector).getProperty('src'),
                               number: currentArrayPlace,
                               transition: this.options.defaultTransition
                       });
                       if ((options.showInfopane) | (options.showCarousel))
                               elementDict.extend({
                                       title: el.getElement(options.titleSelector).innerHTML,
                                       description: el.getElement(options.subtitleSelector).innerHTML
                               });
                       if ((options.embedLinks) | (options.useReMooz))
                               elementDict.extend({
                                       link: el.getElement(options.linkSelector).href||false,
                                       linkTitle: el.getElement(options.linkSelector).title||false,
                                       linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
                               });
                       if ((!options.useThumbGenerator) && (options.showCarousel))
                               elementDict.extend({
                                       thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
                               });
                       else if (options.useThumbGenerator)
                               elementDict.extend({
                                       thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
                               });
                       data.extend([elementDict]);
                       currentArrayPlace++;
                       if (this.options.destroyAfterPopulate)
                               el.dispose();
               });
               return data;
       },
       constructElements: function() {
               el = this.galleryElement;
               if (this.options.embedLinks && (!this.options.showArrows))
                       el = this.currentLink;
               this.maxIter = this.galleryData.length;
               var currentImg;
               for(i=0;i<this.galleryData.length;i++)
               {
                       var currentImg = new Fx.Morph(
                               new Element('div').addClass('slideElement').setStyles({
                                       'position':'absolute',
                                       'left':'0px',
                                       'right':'0px',
                                       'margin':'0px',
                                       'padding':'0px',
                                       'backgroundPosition':"center center",
                                       'opacity':'0'
                               }).injectInside(el),
                               {duration: this.options.fadeDuration}
                       );
                       if (this.options.preloader)
                       {
                               currentImg.source = this.galleryData[i].image;
                               currentImg.loaded = false;
                               currentImg.load = function(imageStyle, i) {
                                       if (!imageStyle.loaded)        {
                                               this.galleryData[i].imgloader = new Asset.image(imageStyle.source, {
                                           'onload'  : function(img, i){
                                                        img.element.setStyle(
                                                            'backgroundImage',
                                                            "url('" + img.source + "')")
                                                            img.loaded = true;
                                                            img.width = this.galleryData[i].imgloader.width;
                                                            img.height = this.galleryData[i].imgloader.height;
                                                            }.pass([imageStyle, i], this)
                                               });
                                       }
                               }.pass([currentImg, i], this);
                       } else {
                               currentImg.element.setStyle('backgroundImage',
                                                                       "url('" + this.galleryData[i].image + "')");
                       }
                       this.galleryElements[parseInt(i)] = currentImg;
               }
       },
       destroySlideShow: function(element) {
               var myClassName = element.className;
               var newElement = new Element('div').addClass('myClassName');
               element.parentNode.replaceChild(newElement, element);
       },
       startSlideShow: function() {
               this.fireEvent('onStart');
               this.loadingElement.style.display = "none";
               this.lastIter = this.maxIter - 1;
               this.currentIter = 0;
               this.galleryInit = 0;
               this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
               if (this.options.showInfopane)
                       this.showInfoSlideShow.delay(1000, this);
               if (this.options.useReMooz)
                       this.makeReMooz.delay(1000, this);
               var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
               if (this.options.showCarousel&&(!this.options.carouselPreloader)&&(!this.options.useExternalCarousel))
                       this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
               this.prepareTimer();
               if (this.options.embedLinks)
                       this.makeLink(this.currentIter);
       },
       nextItem: function() {
               this.fireEvent('onNextCalled');
               this.nextIter = this.currentIter+1;
               if (this.nextIter >= this.maxIter)
                       this.nextIter = 0;
               this.galleryInit = 0;
               this.goTo(this.nextIter);
       },
       prevItem: function() {
               this.fireEvent('onPreviousCalled');
               this.nextIter = this.currentIter-1;
               if (this.nextIter <= -1)
                       this.nextIter = this.maxIter - 1;
               this.galleryInit = 0;
               this.goTo(this.nextIter);
       },
       goTo: function(num) {
               this.clearTimer();
               if(this.options.preloader)
               {
                       this.galleryElements[num].load();
                       if (num==0)
                               this.galleryElements[this.maxIter - 1].load();
                       else
                               this.galleryElements[num - 1].load();
                       if (num==(this.maxIter - 1))
                               this.galleryElements[0].load();
                       else
                               this.galleryElements[num + 1].load();
               }
               if (this.options.embedLinks)
                       this.clearLink();
               if (this.options.showInfopane)
               {
                       this.slideInfoZone.clearChain();
                       this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
               } else
                       this.currentChangeDelay = this.changeItem.delay(500, this, num);
               if (this.options.embedLinks)
                       this.makeLink(num);
               this.prepareTimer();
               /*if (this.options.showCarousel)
                       this.clearThumbnailsHighlights();*/
       },
       changeItem: function(num) {
               this.fireEvent('onStartChanging');
               this.galleryInit = 0;
               if (this.currentIter != num)
               {
                       for(i=0;i<this.maxIter;i++)
                       {
                               if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});
                       }
                       gallery.Transitions[this.galleryData[num].transition].pass([
                               this.galleryElements[this.currentIter],
                               this.galleryElements[num],
                               this.currentIter,
                               num], this)();
                       this.currentIter = num;
                       if (this.options.useReMooz)
                               this.makeReMooz();
               }
               var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
               if ((this.options.showCarousel)&&(!this.options.useExternalCarousel))
                       this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
               this.doSlideShow.bind(this)();
               this.fireEvent('onChanged');
       },
       clearTimer: function() {
               if (this.options.timed)
                       $clear(this.timer);
       },
       prepareTimer: function() {
               if (this.options.timed)
                       this.timer = this.nextItem.delay(this.options.delay, this);
       },
       doSlideShow: function(position) {
               if (this.galleryInit == 1)
               {
                       imgPreloader = new Image();
                       imgPreloader.onload=function(){
                               this.startSlideShow.delay(10, this);
                       }.bind(this);
                       imgPreloader.src = this.galleryData[0].image;
                       if(this.options.preloader)
                               this.galleryElements[0].load();
               } else {
                       if (this.options.showInfopane)
                       {
                               if (this.options.showInfopane)
                               {
                                       this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
                               } else
                                       if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
                                               this.centerCarouselOn(position);
                       }
               }
       },
       createCarousel: function() {
               var carouselElement;
               if (!this.options.useExternalCarousel)
               {
                       var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
                       this.carouselContainer = new Fx.Morph(carouselContainerElement, {transition: Fx.Transitions.Expo.easeOut});
                       this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
                       this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
                       this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
                               title: this.options.textShowCarousel
                       }).injectInside(carouselContainerElement);
                       if(this.options.carouselPreloader)
                               this.carouselBtn.set('html', this.options.textPreloadingCarousel);
                       else
                               this.carouselBtn.set('html', this.options.textShowCarousel);
                       this.carouselBtn.addEvent(
                               'click',
                               function () {
                                       this.carouselContainer.cancel();
                                       this.toggleCarousel();
                               }.bind(this)
                       );
                       this.carouselActive = false;
                       carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
                       this.carousel = new Fx.Morph(carouselElement);
               } else {
                       carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
               }
               this.carouselElement = new Fx.Morph(carouselElement, {transition: Fx.Transitions.Expo.easeOut});
               this.carouselElement.normalHeight = carouselElement.offsetHeight;
               if (this.options.showCarouselLabel)
                       this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
               carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
               this.carouselWrapper = new Fx.Morph(carouselWrapper, {transition: Fx.Transitions.Expo.easeOut});
               this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
               this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
               if (this.options.activateCarouselScroller)
               {
                       this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
                               area: 100,
                               velocity: 0.2
                       })
                       this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
                               duration: 400,
                               onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
                               onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
                       });
               }
       },
       fillCarousel: function() {
               this.constructThumbnails();
               this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
               if (this.options.carouselHorizontal)
                       this.carouselInner.style.width = this.carouselInner.normalWidth;
       },
       initCarousel: function () {
               this.createCarousel();
               this.fillCarousel();
               if (this.options.carouselPreloader)
                       this.preloadThumbnails();
       },
       flushCarousel: function() {
               this.thumbnailElements.each(function(myFx) {
                       myFx.element.dispose();
                       myFx = myFx.element = null;
               });
               this.thumbnailElements = [];
       },
       toggleCarousel: function() {
               if (this.carouselActive)
                       this.hideCarousel();
               else
                       this.showCarousel();
       },
       showCarousel: function () {
               this.fireEvent('onShowCarousel');
               this.carouselContainer.start({
                       'opacity': this.options.carouselMaximizedOpacity,
                       'top': 0
               }).chain(function() {
                       this.carouselActive = true;
                       this.carouselWrapper.scroller.start();
                       this.fireEvent('onCarouselShown');
                       this.carouselContainer.options.onComplete = null;
               }.bind(this));
       },
       hideCarousel: function () {
               this.fireEvent('onHideCarousel');
               var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
               this.carouselContainer.start({
                       'opacity': this.options.carouselMinimizedOpacity,
                       'top': targetTop
               }).chain(function() {
                       this.carouselActive = false;
                       this.carouselWrapper.scroller.stop();
                       this.fireEvent('onCarouselHidden');
                       this.carouselContainer.options.onComplete = null;
               }.bind(this));
       },
       constructThumbnails: function () {
               element = this.carouselInner;
               for(i=0;i<this.galleryData.length;i++)
               {
                       var currentImg = new Fx.Morph(new Element ('div').addClass("thumbnail").setStyles({
                                       backgroundImage: "url('" + this.galleryData[i].thumbnail + "')",
                                       backgroundPosition: "center center",
                                       backgroundRepeat: 'no-repeat',
                                       marginLeft: this.options.thumbSpacing + "px",
                                       width: this.options.thumbWidth + "px",
                                       height: this.options.thumbHeight + "px"
                               }).injectInside(element), {duration: 200}).start({
                                       'opacity': this.options.thumbIdleOpacity
                               });
                       currentImg.element.addEvents({
                               'mouseover': function (myself) {
                                       myself.cancel();
                                       myself.start({'opacity': 0.99});
                                       if (this.options.showCarouselLabel)
                                               $(this.carouselLabel).set('html', '<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
                               }.pass(currentImg, this),
                               'mouseout': function (myself) {
                                       myself.cancel();
                                       myself.start({'opacity': this.options.thumbIdleOpacity});
                               }.pass(currentImg, this),
                               'click': function (myself) {
                                       this.goTo(myself.relatedImage.number);
                                       if (this.options.thumbCloseCarousel&&(!this.options.useExternalCarousel))
                                               this.hideCarousel();
                               }.pass(currentImg, this)
                       });

                       currentImg.relatedImage = this.galleryData[i];
                       this.thumbnailElements[parseInt(i)] = currentImg;
               }
       },
       log: function(value) {
               if(console.log)
                       console.log(value);
       },
       preloadThumbnails: function() {
               var thumbnails = [];
               for(i=0;i<this.galleryData.length;i++)
               {
                       thumbnails[parseInt(i)] = this.galleryData[i].thumbnail;
               }
               this.thumbnailPreloader = new Preloader();
               if (!this.options.useExternalCarousel)
                       this.thumbnailPreloader.addEvent('onComplete', function() {
                               var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
                               this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
                       }.bind(this));
               this.thumbnailPreloader.load(thumbnails);
       },
       clearThumbnailsHighlights: function()
       {
               for(i=0;i<this.galleryData.length;i++)
               {
                       this.thumbnailElements[i].cancel();
                       this.thumbnailElements[i].start(0.2);
               }
       },
       changeThumbnailsSize: function(width, height)
       {
               for(i=0;i<this.galleryData.length;i++)
               {
                       this.thumbnailElements[i].cancel();
                       this.thumbnailElements[i].element.setStyles({
                               'width': width + "px",
                               'height': height + "px"
                       });
               }
       },
       centerCarouselOn: function(num) {
               if (!this.carouselWallMode)
               {
                       var carouselElement = this.thumbnailElements[num];
                       var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
                       var carouselWidth = this.carouselWrapper.element.offsetWidth;
                       var carouselInnerWidth = this.carouselInner.offsetWidth;
                       var diffWidth = carouselWidth / 2;
                       var scrollPos = position-diffWidth;
                       this.carouselWrapper.elementScroller.start(scrollPos,0);
               }
       },
       initInfoSlideshow: function() {
               /*if (this.slideInfoZone.element)
                       this.slideInfoZone.element.remove();*/
               this.slideInfoZone = new Fx.Morph(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
               var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
               var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
               this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
               this.slideInfoZone.element.setStyle('opacity',0);
       },
       changeInfoSlideShow: function()
       {
               this.hideInfoSlideShow.delay(10, this);
               this.showInfoSlideShow.delay(500, this);
       },
       showInfoSlideShow: function() {
               this.fireEvent('onShowInfopane');
               this.slideInfoZone.cancel();
               element = this.slideInfoZone.element;
               element.getElement('h2').set('html', this.galleryData[this.currentIter].title);
               element.getElement('p').set('html', this.galleryData[this.currentIter].description);
               if(this.options.slideInfoZoneSlide)
                       this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
               else
                       this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
               if (this.options.showCarousel)
                       this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
               return this.slideInfoZone;
       },
       hideInfoSlideShow: function() {
               this.fireEvent('onHideInfopane');
               this.slideInfoZone.cancel();
               if(this.options.slideInfoZoneSlide)
                       this.slideInfoZone.start({'opacity': 0, 'height': 0});
               else
                       this.slideInfoZone.start({'opacity': 0});
               return this.slideInfoZone;
       },
       makeLink: function(num) {
               this.currentLink.setProperties({
                       href: this.galleryData[num].link,
                       title: this.galleryData[num].linkTitle
               })
               if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
                       this.currentLink.setStyle('display', 'block');
       },
       clearLink: function() {
               this.currentLink.setProperties({href: '', title: ''});
               if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
                       this.currentLink.setStyle('display', 'none');
       },
       makeReMooz: function() {
               this.currentLink.setProperties({
                       href: '#'
               });
               this.currentLink.setStyles({
                       'display': 'block'
               });
               this.galleryElements[this.currentIter].element.set('title', this.galleryData[this.currentIter].title + ' :: ' + this.galleryData[this.currentIter].description);
               this.ReMooz = new ReMooz(this.galleryElements[this.currentIter].element, {
                       link: this.galleryData[this.currentIter].link,
                       shadow: false,
                       dragging: false,
                       addClick: false,
                       resizeOpacity: 1
               });
               var img = this.galleryElements[this.currentIter];
               var coords = img.element.getCoordinates();
               delete coords.right;
               delete coords.bottom;
               widthDiff = coords.width - img.width;
               heightDiff = coords.height - img.height;
               coords.width = img.width;
               coords.height = img.height;
               coords.left += Math.ceil(widthDiff/2)+1;
               coords.top += Math.ceil(heightDiff/2)+1;
               this.ReMooz.getOriginCoordinates = function(coords) {
                       return coords;
               }.bind(this, coords);
               this.currentLink.onclick = function () {
                       this.ReMooz.open.bind(this.ReMooz)();
                       return false;
               }.bind(this);
       },
       /* To change the gallery data, those two functions : */
       flushGallery: function() {
               this.galleryElements.each(function(myFx) {
                       myFx.element.dispose();
                       myFx = myFx.element = null;
               });
               this.galleryElements = [];
       },
       changeData: function(data) {
               this.galleryData = data;
               this.clearTimer();
               this.flushGallery();
               if (this.options.showCarousel) this.flushCarousel();
               this.constructElements();
               if (this.options.showCarousel) this.fillCarousel();
               if (this.options.showInfopane) this.hideInfoSlideShow();
               this.galleryInit=1;
               this.lastIter=0;
               this.currentIter=0;
               this.doSlideShow(1);
       },
       /* Plugins: HistoryManager */
       initHistory: function() {
               this.fireEvent('onHistoryInit');
               this.historyKey = this.galleryElement.id + '-picture';
               if (this.options.customHistoryKey)
                       this.historyKey = this.options.customHistoryKey;

               this.history = new History.Route({
                       defaults: [1],
                       pattern: this.historyKey + '\\((\\d+)\\)',
                       generate: function(values) {
                               return [this.historyKey, '(', values[0], ')'].join('')
                       }.bind(this),
                       onMatch: function(values, defaults) {
                               if (parseInt(values[0])-1 < this.maxIter)
                                       this.goTo(parseInt(values[0])-1);
                       }.bind(this)
               });
               this.addEvent('onChanged', function(){
                       this.history.setValue(0, this.currentIter+1);
                       this.history.defaults=[this.currentIter+1];
               }.bind(this));
               this.fireEvent('onHistoryInited');
       }
};
gallery = new Class(gallery);

gallery.Transitions = new Hash ({
       fade: function(oldFx, newFx, oldPos, newPos){
               oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
               oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
               if (newPos > oldPos) newFx.start({opacity: 1});
               else
               {
                       newFx.set({opacity: 1});
                       oldFx.start({opacity: 0});
               }
       },
       crossfade: function(oldFx, newFx, oldPos, newPos){
               oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
               oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
               newFx.start({opacity: 1});
               oldFx.start({opacity: 0});
       },
       fadebg: function(oldFx, newFx, oldPos, newPos){
               oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
               oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
               oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
       }
});

/* All code copyright 2007 Jonathan Schemoul */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: Preloader (class)
* Simple class for preloading images with support for progress reporting
* Copyright 2007 Tomocchino.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

var Preloader = new Class({
Implements: [Events, Options],
options: {
root        : '',
period      : 100
},
initialize: function(options){
this.setOptions(options);
},
load: function(sources) {
this.index = 0;
this.images = [];
this.sources = this.temps = sources;
this.total = this. sources.length;
this.fireEvent('onStart', [this.index, this.total]);
this.timer = this.progress.periodical(this.options.period, this);
this.sources.each(function(source, index){
this.images[index] = new Asset.image(this.options.root + source, {
'onload'  : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
});
}, this);
},
progress: function() {
this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
if(this.index >= this.total) this.complete();
},
complete: function(){
$clear(this.timer);
this.fireEvent('onComplete', [this.images]);
},
cancel: function(){
$clear(this.timer);
}
});
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: formatString (function)
* Original name: Yahoo.Tools.printf
* Copyright Yahoo.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

function formatString() {
       var num = arguments.length;
       var oStr = arguments[0];
       for (var i = 1; i < num; i++) {
               var pattern = "\\{" + (i-1) + "\\}";
               var re = new RegExp(pattern, "g");
               oStr = oStr.replace(re, arguments[i]);
       }
       return oStr;
}
//]]>
</script>
<style type='text/css'>
#myGallery, #myGallerySet {width: 515px;height: 250px;z-index:0;}
.jdGallery a{outline:0;}
.jdGallery{overflow: hidden;position: relative;}
.jdGallery img{border: 0;margin: 0;}
.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image:url('');}
.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 90px;background: #363636;color: #fff;text-indent: 0;overflow: hidden;}
* html .jdGallery .slideInfoZone{bottom: -1px;}
.jdGallery .slideInfoZone h2
{padding: 0;font-size: 14px;text-decoration:none;margin: 0;margin: 2px 5px;font-weight: bold;color: #ff9000 !important;}
.jdGallery .slideInfoZone h2 a
{padding: 0;font-size: 14px;text-decoration:none;margin: 0;font-weight: bold;color: #ff9000 !important;}
.jdGallery .slideInfoZone p
{padding: 0;font-size: 12px;margin: 2px 5px;color: #eee;}
</style>

NOTE : You can DOWNLOAD and HOST mootools-1.2.1-core-yc.js yourself. And also you can change width and height of this slider easily (Default width:515px and height:250px;).

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 and click save.


<script type="text/javascript">
function startGallery() {
 var myGallery = new gallery($('myGallery'), {
         timed: true,
         delay: 5000,
         slideInfoZoneOpacity: 0.8,
         showCarousel: false
 });
}
window.addEvent('domready', startGallery);
</script>

<div id="myGallery">
<div class="imageElement">
<h3><a href="ENTER-YOUR-POST-1-LINK-HERE">THIS-IS-FEATURED-POST-1-TITLE</a></h3>
<p>FEATURED-POST-1-DESCRIPTION</p>
<a href="#" class="open"></a>
<img src="FEATURED-POST-1-IMAGE-ADDRESS" class="full" alt="" />
</div>

<div class="imageElement">
<h3><a href="ENTER-YOUR-POST-LINK-2-HERE">THIS-IS-FEATURED-POST-2-TITLE</a></h3>
<p>FEATURED-POST-2-DESCRIPTION</p>
<a href="#" class="open"></a>
<img src="FEATURED-POST-2-IMAGE-ADDRESS" class="full" alt="" />
</div>

<div class="imageElement">
<h3><a href="ENTER-YOUR-POST-3-LINK-HERE">THIS-IS-FEATURED-POST-3-TITLE</a></h3>
<p>FEATURED-POST-3-DESCRIPTION</p>
<a href="#" class="open"></a>
<img src="FEATURED-POST-3-IMAGE-ADDRESS" class="full" alt="" />
</div>

<div class="imageElement">
<h3><a href="ENTER-YOUR-POST-4-LINK-HERE">THIS-IS-FEATURED-POST-4-TITLE</a></h3>
<p>FEATURED-POST-4-DESCRIPTION</p>
<a href="#" class="open"></a>
<img src="FEATURED-POST-4-IMAGE-ADDRESS" class="full" alt="" />
</div>

<div class="imageElement">
<h3><a href="ENTER-YOUR-POST-5-LINK-HERE">THIS-IS-FEATURED-POST-5-TITLE</a></h3>
<p>FEATURED-POST-5-DESCRIPTION</p>
<a href="#" class="open"></a>
<img src="FEATURED-POST-5-IMAGE-ADDRESS" class="full" alt="" />
</div>

</div>

Change delay: 5000 to change your slider speed.

NOTE : Remember to replace ,

ENTER-YOUR-POST-X-LINK-HEREs with your real post links.

THIS-IS-FEATURED-POST-X-TITLEs with your real post titles.

FEATURED-POST-X-DESCRIPTIONs with your post descriptions.

FEATURED-POST-X-IMAGE-ADDRESSs with your real image addresses.

You are done.

jQuery.ajax()

2011-01-14T09:46:00.000-08:00

Description: Perform an asynchronous HTTP (Ajax) request.

jQuery.ajax( settings )

settings

A set of key/value pairs that configure the Ajax request. All options are optional. A default can be set for any option with $.ajaxSetup().

async

Default: true

By default, all requests are sent asynchronous (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

beforeSend(XMLHttpRequest)

A pre-callback to modify the XMLHttpRequest object before it is sent. Use this to set custom headers etc. The XMLHttpRequest is passed as the only argument. This is an Ajax Event. You may return false in function to cancel the request.

cache

Default: true, false for dataType 'script' and 'jsonp'

If set to false it will force the pages that you request to not be cached by the browser.

complete(XMLHttpRequest, textStatus) - Function

A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The XMLHttpRequest object and a string describing the type of success of the request. This is an Ajax Event.

contentType - String

Default: 'application/x-www-form-urlencoded'

When sending data to the server, use this content-type. Default is "application/x-www-form-urlencoded", which is fine for most cases. If you explicitly pass in a content-type to $.ajax() then it'll always be sent to the server (even if no data is sent).

context - Object

This object will be made the context of all Ajax-related callbacks. For example specifying a DOM element as the context will make that the context for the complete callback of a request, like so:

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

data - Object, String

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key i.e. {foo:["bar1", "bar2"]} becomes '&foo=bar1&foo=bar2'.

dataFilter(data, type) - Function

A function to be used to handle the raw responsed data of XMLHttpRequest.This is a pre-filtering function to sanitize the response.You should return the sanitized data.The function gets passed two arguments: The raw data returned from the server, and the 'dataType' parameter.

dataType - String

Default: Intelligent Guess (xml, json, script, or html)

The type of data that you're expecting back from the server. If none is specified, jQuery will intelligently try to get the results, based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). The available types (and the result passed as the first argument to your success callback) are:

"xml": Returns a XML document that can be processed via jQuery.
"html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
"script": Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option "cache" is used. Note: This will turn POSTs into GETs for remote-domain requests.
"json": Evaluates the response as JSON and returns a JavaScript object. In jQuery 1.4 the JSON parsing is done in a strict manner, any malformed JSON is rejected and a parsererror is thrown.
"jsonp": Loads in a JSON block using JSONP. Will add an extra "?callback=?" to the end of your URL to specify the callback.
"text": A plain text string.

error(XMLHttpRequest, textStatus, errorThrown) - Function

A function to be called if the request fails. The function is passed three arguments: The XMLHttpRequest object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "notmodified" and "parsererror". This is an Ajax Event.

global - Boolean

Default: true

Whether to trigger global Ajax event handlers for this request. The default is true. Set to false to prevent the global handlers like ajaxStart or ajaxStop from being triggered. This can be used to control various Ajax Events.

ifModified - Boolean

Default: false

Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header. In jQuery 1.4 this technique also checks the 'etag' specified by the server to catch unmodified data.

jsonp - String

Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url for a GET or the data for a POST. So {jsonp:'onJsonPLoad'} would result in 'onJsonPLoad=?' passed to the server.

jsonpCallback - Function

Specify the callback function name for a jsonp request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests.

password - String

processData - Boolean

Default: true

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

scriptCharset - String

Only for requests with "jsonp" or "script" dataType and "GET" type. Forces the request to be interpreted as a certain charset. Only needed for charset differences between the remote and local content.

success(data, textStatus, XMLHttpRequest) - Function

A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the 'dataType' parameter; and a string describing the status; and the XMLHttpRequest object. This is an Ajax Event.

timeout - Number

Set a local timeout (in milliseconds) for the request. This will override the global timeout, if one is set via $.ajaxSetup. For example, you could use this property to give a single request a longer timeout than all other requests that you've set to time out in one second. See $.ajaxSetup() for global timeouts.

traditional - Boolean

param serialization

type - String

Default: 'GET'

The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.

url - String

Default: The current page

username - String

xhr - Function

Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.

The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available and are easier to use. If less common options are required, though, $.ajax() can be used more flexibly.

At its simplest, the $.ajax() function can be called with no arguments:

$.ajax();

Note: Default settings can be set globally by using the $.ajaxSetup() function.

This example, using no options, loads the contents of the current page, but does nothing with the result. To use the result, we can implement one of the callback functions.

Callback Functions

The beforeSend, error, dataFilter, success and complete options all take callback functions that are invoked at the appropriate times:

beforeSend is called before the request is sent, and is passed the XMLHttpRequest object as a parameter.
error is called if the request fails. It is passed the XMLHttpRequest object, a string indicating the error type, and an exception object if applicable.
dataFilter is called on success. It is passed the returned data and the value of dataType, and must return the (possibly altered) data to pass on to success.
success is called if the request succeeds. It is passed the returned data, as well as a string containing the success code.
complete is called when the request finishes, whether in failure or success. It is passed the XMLHttpRequest object, as well as a string containing the success or error code.

To make use of the returned HTML, we can implement a success handler:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Such a simple example would generally be better served by using .load() or $.get().

Data Types

The $.ajax() function relies on the server to provide information about the retrieved data. If the server reports the return data as XML, the result can be traversed using normal XML methods or jQuery's selectors. If another type is detected, such as HTML in the example above, the data is treated as text.

Different data handling can be achieved by using the dataType option. Besides plain xml, the dataType can be html, json, jsonp, script, or text.

The text and xml types return the data with no processing. The data is simply passed on to the success handler, either through the responseText or responseHTML property of the XMLHttpRequest object, respectively.

Note: We must ensure that the MIME type reported by the web server matches our choice of dataType. In particular, XML must be declared by the server as text/xml or application/xml for consistent results.

If html is specified, any embedded JavaScript inside the retrieved data is executed before the HTML is returned as a string. Similarly, script will execute the JavaScript that is pulled back from the server, then return the script itself as textual data.

The json type parses the fetched data file as a JavaScript object and returns the constructed object as the result data. To do so, it uses JSON.parse() when the browser supports it; otherwise it uses a Function constructor. JSON data is convenient for communicating structured data in a way that is concise and easy for JavaScript to parse. If the fetched data file exists on a remote server, the jsonp type can be used instead. This type will cause a query string parameter of callback=? to be appended to the URL; the server should prepend the JSON data with the callback name to form a valid JSONP response. If a specific parameter name is desired instead of callback, it can be specified with the jsonp option to $.ajax().

Note: JSONP is an extension of the JSON format, requiring some server-side code to detect and handle the query string parameter. More information about it can be found in the original post detailing its use.

When data is retrieved from remote servers (which is only possible using the script or jsonp data types), the operation is performed using a <script> tag rather than an XMLHttpRequest object. In this case, no XMLHttpRequest object is returned from $.ajax(), nor is one passed to the handler functions such as beforeSend.

Sending Data to the Server

By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the type option. This option affects how the contents of the data option are sent to the server.

The data option can contain either a query string of the form key1=value1&key2=value2, or a map of the form {key1: 'value1', key2: 'value2'}. If the latter form is used, the data is converted into a query string before it is sent. This processing can be circumvented by setting processData to false. The processing might be undesirable if we wish to send an XML object to the server; in this case, we would also want to change the contentType option from application/x-www-form-urlencoded to a more appropriate MIME type.

Advanced Options

The global option prevents handlers registered using .ajaxSend(), .ajaxError(), and similar methods from firing when this request would trigger them. This can be useful to, for example, suppress a loading indicator that was implemented with .ajaxSend() if the requests are frequent and brief. See the descriptions of these methods below for more details.

If the server performs HTTP authentication before providing a response, the user name and password pair can be sent via the username and password options.

Ajax requests are time-limited, so errors can be caught and handled to provide a better user experience. Request timeouts are usually either left at their default or set as a global default using $.ajaxSetup() rather than being overridden for specific requests with the timeout option.

By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set cache to false. To cause the request to report failure if the asset has not been modified since the last request, set ifModified to true.

The scriptCharset allows the character set to be explicitly specified for requests that use a <script> tag (that is, a type of script or jsonp). This is useful if the script and host page have differing character sets.

The first letter in Ajax stands for "asynchronous," meaning that the operation occurs in parallel and the order of completion is not guaranteed. The async option to $.ajax() defaults to true, indicating that code execution can continue after the request is made. Setting this option to false (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.

The $.ajax() function returns the XMLHttpRequest object that it creates. Normally jQuery handles the creation of this object internally, but a custom function for manufacturing one can be specified using the xhr option. The returned object can generally be discarded, but does provide a lower-level interface for observing and manipulating the request. In particular, calling .abort() on the object will halt the request before it completes.

Examples:

Example: Load and execute a JavaScript file.

$.ajax({
   type: "GET",
   url: "test.js",
   dataType: "script"
 });

Example: Save some data to the server and notify the user once it's complete.

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });

Example: Retrieve the latest version of an HTML page.

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

Example: Loads data synchronously. Blocks the browser while the requests is active. It is better to block user interaction by other means when synchronization is necessary.

var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

Example: Sends an xml document as data to the server. By setting the processData option to false, the automatic conversion of data to strings is prevented.

var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

Example: Sends an id as data to the server, save some data to the server and notify the user once it's complete.

bodyContent = $.ajax({
      url: "script.php",
      global: false,
      type: "POST",
      data: ({id : this.getAttribute('id')}),
      dataType: "html",
      success: function(msg){
         alert(msg);
      }
   }
).responseText;

Ajax Capabilities

2011-01-13T08:40:00.000-08:00

The jQuery library has a full suite of AJAX capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh.

jQuery.ajax()
Low-Level Interface
Perform an asynchronous HTTP (Ajax) request.
.ajaxComplete()
Global Ajax Event Handlers
Register a handler to be called when Ajax requests complete. This is an Ajax Event.
.ajaxError()
Global Ajax Event Handlers
Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.
.ajaxSend()
Global Ajax Event Handlers
Show a message before an Ajax request is sent.
jQuery.ajaxSetup()
Low-Level Interface
Set default values for future Ajax requests.
.ajaxStart()
Global Ajax Event Handlers
Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
.ajaxStop()
Global Ajax Event Handlers
Hide a loading message after all the Ajax requests have stopped.
.ajaxSuccess()
Global Ajax Event Handlers
Show a message when an Ajax request completes successfully.
jQuery.get()
Shorthand Methods
Load data from the server using a HTTP GET request.
jQuery.getJSON()
Shorthand Methods
Load JSON-encoded data from the server using a GET HTTP request.
jQuery.getScript()
Shorthand Methods
Load a JavaScript file from the server using a GET HTTP request, then execute it.
.load()
Shorthand Methods
Load data from the server and place the returned HTML into the matched element.
jQuery.param()
Collection Manipulation, Forms, Helper Functions
Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.
jQuery.post()
Shorthand Methods
Load data from the server using a HTTP POST request.
.serialize()
Forms, Helper Functions
Encode a set of form elements as a string for submission.
.serializeArray()
Forms, Helper Functions
Encode a set of form elements as an array of names and values.

About Us

2010-10-22T06:18:00.000-07:00

This blog belongs to Bambang Wicaksono blogging from Medan, Indonesia.
jQuery World has been online since February 2011.
The blog has been targeted to one type of person since it’s inception – Bloggers! We try our best to post articles and news that interest both new and experienced bloggers with topics jQuery for Your Blog. With the main aim of helping other bloggers to uplift and optimize their blogs. jQuery World is mainly beneficial for people who blog on Google’s Blogger and Wordpress platform.

Thanks.
Bambang Wicaksono

jQuery World

Easy Image Zoom with jQuery

CSS Circle Button

Background Animations Using MooTools

Cursor Following Menu for Site

Rotating Image Slider with jQuery

Shutter Effect with jQuery

jquery.shutter.css

jQuery

Generated HTML

The Final Code

Fading and Spinning Icons with CSS3 and jQuery

Circulate jQuery Plugin

Dojo Lightbox

The CSS

The HTML and JavaScript

Exploding Logo with CSS3 and jQuery

Create a Spinning Effect with CSS3

The CSS

Creating Gradients with CSS3 and HTML5

The use of jQuery

High Quality JQuery Horizontal Navigation Menus

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

Add Smart JQuery Featured Slider to Blogger / Websites

Posts Auto Slider to Blogger or Websites with Mootools - 1.2.1

jQuery.ajax()

jQuery.ajax( settings )

settings

async

beforeSend(XMLHttpRequest)

cache

complete(XMLHttpRequest, textStatus) - Function

contentType - String

context - Object

data - Object, String

dataFilter(data, type) - Function

dataType - String

error(XMLHttpRequest, textStatus, errorThrown) - Function

global - Boolean

ifModified - Boolean

jsonp - String

jsonpCallback - Function

password - String

processData - Boolean

scriptCharset - String

success(data, textStatus, XMLHttpRequest) - Function

timeout - Number

traditional - Boolean

type - String

url - String

username - String

xhr - Function

Callback Functions

Data Types

Sending Data to the Server

Advanced Options

Examples:

Example: Load and execute a JavaScript file.

Example: Save some data to the server and notify the user once it's complete.

Example: Retrieve the latest version of an HTML page.

Example: Loads data synchronously. Blocks the browser while the requests is active. It is better to block user interaction by other means when synchronization is necessary.

Example: Sends an xml document as data to the server. By setting the processData option to false, the automatic conversion of data to strings is prevented.

Example: Sends an id as data to the server, save some data to the server and notify the user once it's complete.

Ajax Capabilities