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

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

Microsoft SQL Server 2005 Service Pack 3 for Windows 7 (64 bit)

You can download from here Microsoft SQL Server 2005 Service Pack 3 Overview Service Pack 3 for Microsoft SQL Server 2005 is now available. SQL Server 2005 service packs are cumulative, and this service pack upgrades all service levels of SQL Server 2005 to SP3. You can use these packages to upgrade any of the following SQL Server 2005 editions: Enterprise Enterprise Evaluation Developer Standard Workgroup Download Size: 326.0 MB http://www.microsoft.com/downloads/details.aspx?FamilyID=ae7387c3-348c-4faa-8ae5-949fdfbe59c4&displaylang=en Microsoft SQL Server Management Studio Express Service Pack 3 Overview Microsoft SQL Server Management Studio Express (SSMSE) is a free, easy-to-use graphical management tool for managing SQL Server 2005 Express Edition and SQL Server 2005 Express Edition with Advanced Services. SSMSE can also manage instances of the SQL Server Database Engine created by any edition of SQL Server 2005. Note: SSMSE cannot manage SQL Server Analysis

Configuring CORS in IIS - Response to preflight request doesn't pass access control check: It does not have HTTP ok status

The Access-Control-Allow-Origin Header Explained – With a CORS Example Often times when calling an API, you may see an error in your console that looks like this: Access to fetch at 'http://somesite.com' from origin 'http://yoursite.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin Add following in <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Methods" value="*" /> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="*" /> </customHeaders> </system.webServer> After adding the above code in web.config, received the following error in response. .... Has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: