jQuery Noob - General approach to task at hand......
Hey All,
I am a seasoned flash developer diving into the world of jQuery and css and am being tasked with converting an old flash piece to jQuery/css execution.
I have been plugging away and making progress however, it's been a bit of "1 step forward 2 steps back".
1. Basically what I have is a 4 image slide show.
2. Each slide contains a button [with it's own rollover effect] that users could click to dive deeper into the site.
3. There are 4 thumbnail images below the slide show the user could rollover to call any of the 4 slides to view.
The slides fade in and out in 6 second intervals.
If a user rolls over a slides button the timer stops until the user rolls off or clicks [they would be redirected].
As each slide comes up it's thumb fades up in opacity from 50%-100% and back to 50% with the next slide.
I'm looking for a general approach.
I had a fairly long drawn out series of jQuery functions that were controlling the looping of this piece, like 8 steps. Here's a snippet......
jQuery(function($) {
var timer;
function startLoop(event)
{
clearTimeout(timer);
timer = setTimeout(eval(step2),"5000");
}
function step2(event)
{
clearTimeout(timer);
timer = setTimeout(eval("step3"),"1000");
$("#vin1").animate({"opacity":0.0},800, "linear", null);
$("img.a").animate({"opacity":0.0},800, "linear", null);
$("img.b").animate({"opacity":0.0},800, "linear", null);
$("#thumb1").animate({"opacity":0.3},800, "linear", null);
$("div.cta2hover").animate({"opacity":1.0},800, "linear", null);
}
function step3(event)
{
clearTimeout(timer);
timer = setTimeout(eval("step4"),"5000");
$("div.cta1hover").css("visibility","hidden");
$("div.cta2hover").css("visibility","visible");
$("img.a").animate({"opacity":1.0},800, "linear", null);
$("img.b").animate({"opacity":0.0},800, "linear", null);
$("#thumb1").animate({"opacity":0.3},800, "linear", null);
$("#vin2").animate({"opacity":1.0},800, "linear", null);
$("#thumb2").animate({"opacity":1.0},800, "linear", null);
}
function step4(event)
{
clearTimeout(timer);
timer = setTimeout(eval("step5"),"1000");
$("#vin2").animate({"opacity":0.0},800, "linear", null);
$("img.a").animate({"opacity":0.0},800, "linear", null);
$("img.b").animate({"opacity":0.0},800, "linear", null);
$("#thumb2").animate({"opacity":0.3},800, "linear", null);
$("div.cta3hover").animate({"opacity":1.0},800, "linear", null);
}
function step5(event)
{
clearTimeout(timer);
timer = setTimeout(eval("step6"),"5000");
$("div.cta2hover").css("visibility","hidden");
$("div.cta3hover").css("visibility","visible");
$("img.a").animate({"opacity":1.0},800, "linear", null);
$("img.b").animate({"opacity":0.0},800, "linear", null);
$("#thumb2").animate({"opacity":0.3},800, "linear", null);
$("#vin3").animate({"opacity":1.0},800, "linear", null);
$("#thumb3").animate({"opacity":1.0},800, "linear", null);
}
function step6(event)
{
clearTimeout(timer);
timer = setTimeout(eval("step7"),"1000");
$("#vin3").animate({"opacity":0.0},800, "linear", null);
$("img.a").animate({"opacity":0.0},800, "linear", null);
$("img.b").animate({"opacity":0.0},800, "linear", null);
$("#thumb3").animate({"opacity":0.3},800, "linear", null);
$("div.cta4hover").animate({"opacity":1.0},800, "linear", null);
}
function step7(event)
{
clearTimeout(timer);
timer = setTimeout(eval("step8"),"5000");
$("div.cta3hover").css("visibility","hidden");
$("div.cta4hover").css("visibility","visible");
$("img.a").animate({"opacity":1.0},800, "linear", null);
$("img.b").animate({"opacity":0.0},800, "linear", null);
$("#thumb3").animate({"opacity":0.3},800, "linear", null);
$("#vin4").animate({"opacity":1.0},800, "linear", null);
$("#thumb4").animate({"opacity":1.0},800, "linear", null);
}
function step8(event)
{
clearTimeout(timer);
timer = setTimeout(eval("step9"),"1000");
$("#vin4").animate({"opacity":0.0},800, "linear", null);
$("img.a").animate({"opacity":0.0},800, "linear", null);
$("img.b").animate({"opacity":0.0},800, "linear", null);
$("#thumb4").animate({"opacity":0.3},800, "linear", null);
$("div.cta1hover").animate({"opacity":1.0},800, "linear", null);
}
function step9(event)
{
clearTimeout(timer);
timer = setTimeout(eval("startLoop"),"1000");
$("div.cta4hover").css("visibility","hidden");
$("div.cta1hover").css("visibility","visible");
$("img.a").animate({"opacity":1.0},800, "linear", null);
$("img.b").animate({"opacity":0.0},800, "linear", null);
$("#thumb4").animate({"opacity":0.3},800, "linear", null);
$("#vin1").animate({"opacity":1.0},800, "linear", null);
$("#thumb1").animate({"opacity":1.0},800, "linear", null);
}
startLoop();
});
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
$("img.b").stop().animate({"opacity": "1"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
$("img.b").stop().animate({"opacity": "0"}, "slow");
});
});
And this was all good until I began seeking a way to interrupt or pause this when the user rolled over one of the slide[s] buttons or the thumb functionality.
How could I pause the loop and set a variable for it to start again on roll off?
How would the thumbnail roll over work with this approach?
Any insight as to a solid approach here would be MUCH appreciated.
Again, I'm looking for a general approach. Big Picture type structure.
cheers
-4spd-
I've attached a .jpg for reference.
Where each slide and button transition to the next in 6 sec intervals as do the thumbs opacity below.