friends i am trying to add a slide show in my web site and so i got a coding of jQuery
which right now is allowing me to have a slide show of 4 images , but i need to have a variety of between minimum of 10 images .
i tried to modify the codes but i am a noob in this field and so though of asking for experts advice
Here are the orignal coding of the jQuery for refference :-
$(document).ready(function(){
//This keeps track of the slideshow's current location
var current_panel = 1;
//Controlling the duration of animation by variable will simplify changes
var animation_duration = 2500;
$.timer(6000, function (timer) {
//Determine the current location, and transition to next panel
switch(current_panel){
case 1:
$("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 2;
break;
case 2:
$("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 3;
break;
case 3:
$("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 4;
break;
case 4:
$("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 1;
break;
timer.reset(12000);
}
});
});
HERE IS SOMETHING I TRIED TO DO :/
$(document).ready(function(){
//This keeps track of the slideshow's current location
var current_panel = 1;
//Controlling the duration of animation by variable will simplify changes
var animation_duration = 2500;
$.timer(6000, function (timer) {
//Determine the current location, and transition to next panel
switch(current_panel){
case 1:
$("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 2;
break;
case 2:
$("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 3;
break;
case 3:
$("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 4;
break;
case 4:
$("#slideshow").stop().animate({right: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 5;
break;
case 5:
$("#slideshow").stop().animate({right: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 6;
break;
case 6:
$("#slideshow").stop().animate({right: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 7;
break;
case 7:
$("#slideshow").stop().animate({right: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 8;
break;
case 8:
$("#slideshow").stop().animate({right: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 9;
break;
case 9:
$("#slideshow").stop().animate({right: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 10;
break;
case 10:
$("#slideshow").stop().animate({right: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 1;
break;
timer.reset(12000);
}
});
});
Guys do u thing what i think is possible :huh:
thank in advance :clap: and please bare my posts and query in future to
--- Updated Post - Automerged ---
why nobody is replaying ??????
which right now is allowing me to have a slide show of 4 images , but i need to have a variety of between minimum of 10 images .
i tried to modify the codes but i am a noob in this field and so though of asking for experts advice
Here are the orignal coding of the jQuery for refference :-
$(document).ready(function(){
//This keeps track of the slideshow's current location
var current_panel = 1;
//Controlling the duration of animation by variable will simplify changes
var animation_duration = 2500;
$.timer(6000, function (timer) {
//Determine the current location, and transition to next panel
switch(current_panel){
case 1:
$("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 2;
break;
case 2:
$("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 3;
break;
case 3:
$("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 4;
break;
case 4:
$("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 1;
break;
timer.reset(12000);
}
});
});
HERE IS SOMETHING I TRIED TO DO :/
$(document).ready(function(){
//This keeps track of the slideshow's current location
var current_panel = 1;
//Controlling the duration of animation by variable will simplify changes
var animation_duration = 2500;
$.timer(6000, function (timer) {
//Determine the current location, and transition to next panel
switch(current_panel){
case 1:
$("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 2;
break;
case 2:
$("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 3;
break;
case 3:
$("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 4;
break;
case 4:
$("#slideshow").stop().animate({right: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 5;
break;
case 5:
$("#slideshow").stop().animate({right: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 6;
break;
case 6:
$("#slideshow").stop().animate({right: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 7;
break;
case 7:
$("#slideshow").stop().animate({right: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 8;
break;
case 8:
$("#slideshow").stop().animate({right: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 9;
break;
case 9:
$("#slideshow").stop().animate({right: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 10;
break;
case 10:
$("#slideshow").stop().animate({right: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 1;
break;
timer.reset(12000);
}
});
});
Guys do u thing what i think is possible :huh:
thank in advance :clap: and please bare my posts and query in future to
--- Updated Post - Automerged ---
why nobody is replaying ??????