jQuery Image Swap with Effects

Swapping one image with another is probably one of the most used javascript techniques. Also Dreamweaver made “Image Replacement” even easier for non HTML/Javascript programmers by including this feature out of the box. One thing about Dreamweaver’s image swapping javascript is that it’s not the most beautiful javascript code. Well, as always with anything javascript related, jQuery is to the rescue. Query makes dynamic image swapping a peace of cake.
Firstly you have to copy the following javascript code in the HEAD section of your page. You can also save the following javascript functions in a seperate js file.

(function($) {

    $.fn.innerfade = function(options) {
        return this.each(function() {   
            $.innerfade(this, options);
        });
    };

    $.innerfade = function(container, options) {
        var settings = {
         'animationtype':    'fade',
            'speed':            'fast',
            'type':             'sequence',
            'timeout':          2000,
            'containerheight':  'auto',
            'runningclass':     'innerfade',
            'children':         null
        };
        if (options)
            $.extend(settings, options);
        if (settings.children === null)
            var elements = $(container).children();
        else
            var elements = $(container).children(settings.children);
        if (elements.length > 1) {
            $(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
            for (var i = 0; i < elements.length; i++) {
                $(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
            };
            if (settings.type == "sequence") {
                setTimeout(function() {
                    $.innerfade.next(elements, settings, 1, 0);
                }, settings.timeout);
                $(elements[0]).show();
            } else if (settings.type == "random") {
              var last = Math.floor ( Math.random () * ( elements.length ) );
                setTimeout(function() {
                    do { 
            current = Math.floor ( Math.random ( ) * ( elements.length ) );
          } while (last == current );             
          $.innerfade.next(elements, settings, current, last);
                }, settings.timeout);
                $(elements[last]).show();
      } else if ( settings.type == 'random_start' ) {
        settings.type = 'sequence';
        var current = Math.floor ( Math.random () * ( elements.length ) );
        setTimeout(function(){
         $.innerfade.next(elements, settings, (current + 1) %  elements.length, current);
        }, settings.timeout);
        $(elements[current]).show();
      } else {
       alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
      }
    }
    };

    $.innerfade.next = function(elements, settings, current, last) {
        if (settings.animationtype == 'slide') {
            $(elements[last]).slideUp(settings.speed);
            $(elements[current]).slideDown(settings.speed);
        } else if (settings.animationtype == 'fade') {
            $(elements[last]).fadeOut(settings.speed);
            $(elements[current]).fadeIn(settings.speed, function() {
       removeFilter($(this)[0]);
      });
        } else
            alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
        if (settings.type == "sequence") {
            if ((current + 1) < elements.length) {
                current = current + 1;
                last = current - 1;
            } else {
                current = 0;
                last = elements.length - 1;
            }
        } else if (settings.type == "random") {
            last = current;
            while (current == last)
                current = Math.floor(Math.random() * elements.length);
        } else
            alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
        setTimeout((function() {
            $.innerfade.next(elements, settings, current, last);
        }), settings.timeout);
    };

})(jQuery);

// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
 if(element.style.removeAttribute){
  element.style.removeAttribute('filter');
 }
}


$(document).ready(
    function(){
         
     $('ul#gallery').innerfade({
      speed: 800,
      timeout: 4000,
      type: 'sequence',
      containerheight: '220px'
     });
     
     
});

Now Inside Body Tag, Copy paste the following code. You can replace the image src with your own :)