CodeCanyon

Is this javascript code ok?

33 posts
  • Most Wanted Bounty Winner
  • Sold between 5 000 and 10 000 dollars
  • Ireland
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 2-3 years
Thomascullen92 says

I have been working on a site for a client who wants the background of the site to be an image slider with a ken burns like effect. I have a feeling that the code I have used can be improved. I would be greatfull if you javascript wizards could have a look and let me know if there are any changes i should make.

Also I realise that these are rather large images. What steps can I take so that the images will loads faster, or maybe not start the slide show until the images are loaded.

Here is the code in action<http://www.damblio.com/ken/

$().ready(function(){

    var windowWidth = $(window).width();

    var imgWidth = windowWidth + 120;

    $('#slider img').css({'width': imgWidth,'margin-left': -60, 'margin-top': -60});    

    $('#slider img').hide();

    $('#slider img:first').show();

    //animate Content
    $('#header').delay(600).slideDown(1000);

    var total = $('#slider img').size();
    var count = '1';

    ken();

    $('#header').hover(function(){
        $('#hide').fadeIn();
    },function(){
        $('#hide').fadeOut();
    });

    $('#hide').click(function(){
        $('#header').animate({top:-600},500);
        $('#show').fadeIn();
    });

    $('#show').click(function(){
        $('#header').animate({top:100},500);
        $('#show').fadeOut();
    });

    $('#aboutLink').click(function(){
        $('#header').animate({top:-600},500);
        $('#aboutPage').delay(500).animate({left:100},500);
    });

    $('#hideAbout').click(function(){
        $('#aboutPage').animate({left:-550},500);
        $('#header').delay(500).animate({top:100},500);
    });

    function ken(){

        effectNumber = Math.floor(Math.random()*4)

        effect(effectNumber);

        function effect(number){
            if(number == 0){
            $('#slider img:nth-child(' + count + ')').animate({marginLeft:'-10px'},4500);
            }
            if(number == 1){
            $('#slider img:nth-child(' + count + ')').animate({marginLeft:'-110px'},4500);
            }
            if(number == 2){
            $('#slider img:nth-child(' + count + ')').animate({marginTop:'-110px'},4500);
            }
            if(number == 3){
            $('#slider img:nth-child(' + count + ')').animate({marginTop:'-10px'},4500);
            }
        }

    }

    function slider(){
        var previous = count - 1;
        if(count < total){
            $('#slider img:nth-child(' + count + ')').fadeOut(1000);    
            count++;
            $('#slider img:nth-child(' + count + ')').fadeIn(1000);
            $('#slider img:nth-child(' + previous + ')').css({'width': imgWidth,'margin-left': -120, 'margin-top': -120});
            ken();
        }else{
            $('#slider img:nth-child(' + count + ')').fadeOut(1000);
            $('#slider img:nth-child(' + previous + ')').css({'width': imgWidth,'margin-left': -120, 'margin-top': -120});
            count = '1';
             $('#slider img:first').fadeIn(1000);
             ken();
        }
    }

    setInterval(function(){
        slider();
    }, 5000);

});
326 posts
  • Netherlands
  • Sold between 10 000 and 50 000 dollars
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Bought between 10 and 49 items
  • Referred between 10 and 49 users
  • Has been a member for 2-3 years
RikdeVos says
Made some changed for you :)
$(document).ready(function(){

    var windowWidth = $(window).width(),
        imgWidth = windowWidth + 120;

    $('#slider img')
        .css({'width': imgWidth,'margin-left': -60, 'margin-top': -60})
        .hide();

    $('#slider img:first').show();

    //animate Content
    $('#header').delay(600).slideDown(1000);

    var total = $('#slider img').size(),
        count = '1';

    ken();

    $('#header').hover(function(){
        $('#hide').fadeIn();
    },function(){
        $('#hide').fadeOut();
    });

    $('#hide').click(function(){
        $('#header').animate({top:-600},500);
        $('#show').fadeIn();
    });

    $('#show').click(function(){
        $('#header').animate({top:100},500);
        $('#show').fadeOut();
    });

    $('#aboutLink').click(function(){
        $('#header').animate({top:-600},500);
        $('#aboutPage').delay(500).animate({left:100},500);
    });

    $('#hideAbout').click(function(){
        $('#aboutPage').animate({left:-550},500);
        $('#header').delay(500).animate({top:100},500);
    });

    function ken(){
       effect(Math.floor(Math.random()*4));
    }

    function effect(number){
        if(number === 0){
            $('#slider img:nth-child(' + count + ')').animate({marginLeft:'-10px'},4500);
        }else if(number === 1){
            $('#slider img:nth-child(' + count + ')').animate({marginLeft:'-110px'},4500);
        }else if(number === 2){
            $('#slider img:nth-child(' + count + ')').animate({marginTop:'-110px'},4500);
        }else if(number === 3){
            $('#slider img:nth-child(' + count + ')').animate({marginTop:'-10px'},4500);
        }
    }

    setInterval(function(){
        var previous = count - 1;
        if(count < total){
            $('#slider img:nth-child(' + count + ')').fadeOut(1000);    
            count++;
            $('#slider img:nth-child(' + count + ')').fadeIn(1000);
            $('#slider img:nth-child(' + previous + ')').css({'width': imgWidth,'margin-left': -120, 'margin-top': -120});
            ken();
        }else{
            $('#slider img:nth-child(' + count + ')').fadeOut(1000);
            $('#slider img:nth-child(' + previous + ')').css({'width': imgWidth,'margin-left': -120, 'margin-top': -120});
            count = '1';
             $('#slider img:first').fadeIn(1000);
             ken();
        }
    }, 5000);

});
2842 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Community Moderator
  • Bought between 50 and 99 items
  • Referred between 1000 and 1999 users
  • Has been a member for 3-4 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+4 more
sevenspark moderator says

May I suggest you create a fiddle? http://jsfiddle.net/ :)

by
by
by
by
by