Skip to main content

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 :)
Thats is! You are done. Thanks for viewing :)

Comments

Post a Comment

Popular posts from this blog

Call User-defined Function on Linked Server :SQL Server

If you try to invoke a user-defined function (UDF) through a linked server in SQL Server by using a "four-part naming" convention (server.database.dbo.Function), you may receive error message.  The reason is User-defined function calls inside a four-part linked server query are not supported in SQL Server. Thats why error message indicates that the syntax of a Transact-SQL statement is incorrect.  To work around this problem, use the Openquery function instead of the four-part naming convention. For example, instead of the following query Select * from Linked_Server.database.dbo.Function(10) run a query with the Openquery function: Select * from Openquery(Linked_Server,'select database.dbo.Function(10)') If the user-defined function takes variable or scalar parameters, you can use the sp_executesql stored procedure to avoid this behavior.  For example: exec Linked_Server.database.dbo.sp_executesql N'SELECT database.dbo.Function(@input)',N'@input...
10 comments
Read more

Truncate a SQL Server log file (Reduce the size of an LDF file)

I have been doing database administration and have been asked several times to reduce the size of database files. The actual mdf file is small, 3MB, but the LDF file is 10GB !! I have read about the DBCC SHRINKFILE command and tried this, but the file has stayed at 10GB even though it said the command executed fine. I've also tried using the wizard in SQL Server to reduce the LDF to a specified file size (800MB), this also failed to change the size even though it gave me the impression it had worked and was successful via the wizard. The best thing I found is to change the recovery mode of database to RECOVERY SIMPLE before executing the SHRINKFILE command. After that change back the recovery mode to FULL . ALTER DATABASE ExampleDB SET RECOVERY SIMPLE DBCC SHRINKFILE('ExampleDB_log', 0, TRUNCATEONLY) ALTER DATABASE ExampleDB SET RECOVERY FULL Happy Coding :)
Post a Comment
Read more

Pass multiple complex objects to Web API action

Working with ASP.NET Web API, the most unexpected thing is the limited support of POST data values to simple ApiController methods. When a parameter has [FromBody], Web API uses the Content-Type header to select a formatter. At most one parameter is allowed to read from the message body. The reason for this rule is that the request body might be stored in a non-buffered stream that can only be read once. A simple principle, you can send any content in HTTP request, it only need to be serializable into a string. So, it could be multiple JSON object. In this example, the content type is "application/json" and the request body is a raw JSON string (not a JSON object). Here I found a workaround to pass multiple complex objects (using the above principle) from jquery to a WEB API using JObject , and then cast back to your required specific object type in api controller. This objects provides a concrete type specifically designed for working with JSON. var customer = { ...
Post a Comment
Read more