I am using Mike Alsup's Cycle Plugin, but am running into a snag.
Here is what I'm trying to accomplish:
I have 4 <div> tags each with an image inside that is a link to that
image:
<div id="slides" class="pics">
<div>
<a href="img/1.jpg"><img src="img/1.jpg"
width="200" height="200" /></a>
</div>
<div>
<a href="img/2.jpg"><img src="img/2.jpg"
width="200" height="200" /></a>
</div>
<div>
<a href="img/3.jpg"><img src="img/3.jpg"
width="200" height="200" /></a>
</div>
<div>
<a href="img/4.jpg"><img src="img/4.jpg"
width="200" height="200" /></a>
</div>
</div>
Here is the initial call:
// Timeout and Speed Values
var tVal = 3000;
var sVal = 1000;
$('#slides').cycle( {fx: 'fade', speed: sVal, timeout: tVal });
Now, I am using the Report Progress plugin as well, which builds a
simple progress/status bar. (
http://digitalbush.com/projects/progress-bar-plugin
)
I have the progress bar using the same time value as the cycle plugin,
namely, the variable "tVal". So when the page loads, the progress for
how much longer the current image (the <div>) is going to be shown is
displayed. However, when the user mouse's over the image, the cycle
plugin "pauses" as does the progress bar, and then on mouseout the
progress bar continues as does the current image cycle.
The issue is if I mouseover with say only 30% of the time elapsed,
pause, and then mouseout, the progress bar restarts at 31% and
continues fine, but the image suddenly fades to the next one. As if
the transition itself paused, but the time interval did not. Or
sometimes, I does the opposite, where the progress bar is "ahead" of
the transition, or simply the transition is lagging. Have a look via
the link below.
Ultimately, I will need the progress bar itself to reset upon each new
image load, but for the time being I need to get them in sync with
each other.
Any ideas on this?
www.subprint.com/dev/cycle/
Thanks.
