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);
});
$(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);
});
- Sold between 250 000 and 1 000 000 dollars
- Community Moderator
- Author was Featured
- Item was Featured
- 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
May I suggest you create a fiddle? http://jsfiddle.net/ 
