Image Slideshow Pause onMouseOver


T

Tim

Hope someone in the big wide world can help...

What I want to do is have an image slideshow which automatically
scrolls through a series of images very fast, then pauses when you
move your mouse over the image. The images will flick through (at a
rate of about 5 per second) then pause when the user onMouseOver's.

Any help would be gratefully received.

:eek:)
 
Ad

Advertisements

T

Tim

I apologize, but my knowledge of JavaScript is apparently not that
good. I tried incorporating your code with the existing code I was
trying to use.



****HERE'S THE CODE I'M USING IN THE JAVASCRIPT FILE****

var slideshowAutomaticSlides = new Array();
var slideshowAutomaticCurrent = 0;

// Preload slideshow images
function slideshowAutomaticInit() {
if (document.images) {
for (var i = 0; i < slideshowAutomaticImageFiles.length; i++) {
slideshowAutomaticSlides = new Image();
slideshowAutomaticSlides.src = slideshowAutomaticImageDirectory
+ slideshowAutomaticImageFiles;
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBeforeStart*1000);
}
}

// Show next slide
function slideshowAutomaticForward() {
if (document.images && typeof slideshowAutomaticSlides !=
'undefined') {
slideshowAutomaticCurrent++;
if (slideshowAutomaticCurrent >= slideshowAutomaticSlides.length)
slideshowAutomaticCurrent = 0;
document.images.slideshowAutomatic.src =
slideshowAutomaticSlides[slideshowAutomaticCurrent].src;
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBetweenSlides*1000);
}




****HERE'S THE CODE I'M USING IN THE BODY OF MY HTML PAGE****

<script language="javascript" type="text/javascript">
<!--
var slideshowAutomaticImageDirectory = '../images/';
var slideshowAutomaticImageFiles = new Array('1.gif', '2.gif',
'3.gif');
var slideshowAutomaticDelayBeforeStart = 5;
var slideshowAutomaticDelayBetweenSlides = 5;
//-->
</script>

<script language="javascript" type="text/javascript"
src="slideshow_automatic.js">
<!--
function slideshowAutomaticInit() {}
//-->
</script>

<img src="../images/1.gif" name="slideshowAutomatic" width="20"
height="21">


*** How is it I go about including your code?? Thanks ever so much.
 
T

Tim

Thanks, that's kinda solved the problem. The only thing is that I
wanted the slideshow to return to it's original frame rate when you
onMouseOut. The method you use requires the user to wait for the timer
to expire. Changing the timer to allow the user 5 seconds before
resuming original frame rate works ok for my purpose though.


George Ziniewicz said:
Tim,

To answer your question, you need to simply set a timeout variable using
mouseover/out to say 1000 or 0.2 for a large or short timer delay, and use
this variable in your setTimeout function call:

<img src="../images/1.gif" name="slideshowAutomatic" width="20"
height="21"
onMouseOver='slideshowAutomaticDelayBetweenSlides=1000'
onMouseOut='slideshowAutomaticDelayBetweenSlides=0.2'>

In my code I use onClick to set or clear a 1 or 0 flag, which the timer
functions look at to know what to do.

-------------

You might want to check out my slide show for some ideas:

http://zintel.com/picsel.html

That version isn't cross-browser, it works just on IE 5. I am just
finishing up a rewrite that works on IE, Netscape and Mozilla that I've
tested, and features:

toggle play/hold by clicking on a pic
draggable menu
forward or reverse play
sequential or random order
settable delay

Using IE, it also includes:
image zoom
image filters (B&W, color, blends)
fullscreen toggle slides on a full screen black background
hideable popup menu
pausable scrolling info div section


zin

Tim said:
I apologize, but my knowledge of JavaScript is apparently not that
good. I tried incorporating your code with the existing code I was
trying to use.



****HERE'S THE CODE I'M USING IN THE JAVASCRIPT FILE****

var slideshowAutomaticSlides = new Array();
var slideshowAutomaticCurrent = 0;

// Preload slideshow images
function slideshowAutomaticInit() {
if (document.images) {
for (var i = 0; i < slideshowAutomaticImageFiles.length; i++) {
slideshowAutomaticSlides = new Image();
slideshowAutomaticSlides.src = slideshowAutomaticImageDirectory
+ slideshowAutomaticImageFiles;
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBeforeStart*1000);
}
}

// Show next slide
function slideshowAutomaticForward() {
if (document.images && typeof slideshowAutomaticSlides !=
'undefined') {
slideshowAutomaticCurrent++;
if (slideshowAutomaticCurrent >= slideshowAutomaticSlides.length)
slideshowAutomaticCurrent = 0;
document.images.slideshowAutomatic.src =
slideshowAutomaticSlides[slideshowAutomaticCurrent].src;
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBetweenSlides*1000);
}




****HERE'S THE CODE I'M USING IN THE BODY OF MY HTML PAGE****

<script language="javascript" type="text/javascript">
<!--
var slideshowAutomaticImageDirectory = '../images/';
var slideshowAutomaticImageFiles = new Array('1.gif', '2.gif',
'3.gif');
var slideshowAutomaticDelayBeforeStart = 5;
var slideshowAutomaticDelayBetweenSlides = 5;
//-->
</script>

<script language="javascript" type="text/javascript"
src="slideshow_automatic.js">
<!--
function slideshowAutomaticInit() {}
//-->
</script>

<img src="../images/1.gif" name="slideshowAutomatic" width="20"
height="21">


*** How is it I go about including your code?? Thanks ever so much.


Martin Honnen <[email protected]> wrote in message
Tim wrote:
Hope someone in the big wide world can help...

What I want to do is have an image slideshow which automatically
scrolls through a series of images very fast, then pauses when you
move your mouse over the image. The images will flick through (at a
rate of about 5 per second) then pause when the user onMouseOver's.

Any help would be gratefully received.

Schedule your image change with
var tid = setInterval('image change code here', 5000)
then cancel it onmouseover and restart it onmouseout
<img onmouseover="clearInterval(tid);"
onmouseout="tid = setInterval('...', 5000);"
 
G

George Ziniewicz

Tim said:
Thanks, that's kinda solved the problem. The only thing is that I
wanted the slideshow to return to it's original frame rate when you
onMouseOut. The method you use requires the user to wait for the timer
to expire. Changing the timer to allow the user 5 seconds before
resuming original frame rate works ok for my purpose though.

Modify the onMouseOut to instead of just change the timer value, to clear
the current timeout, change the variable, and restart the timer again:

onMouseOut="clearTimeout(timerID);
slideshowAutomaticDelayBetweenSlides=0.2;
timerID=setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBeforeStart*1000);"

This requires you to keep the timerID handy, so capture it on all your
setTimeout calls.

zin
"George Ziniewicz" <[email protected]> wrote in message
Tim,

To answer your question, you need to simply set a timeout variable using
mouseover/out to say 1000 or 0.2 for a large or short timer delay, and use
this variable in your setTimeout function call:

<img src="../images/1.gif" name="slideshowAutomatic" width="20"
height="21"
onMouseOver='slideshowAutomaticDelayBetweenSlides=1000'
onMouseOut='slideshowAutomaticDelayBetweenSlides=0.2'>

In my code I use onClick to set or clear a 1 or 0 flag, which the timer
functions look at to know what to do.

-------------

You might want to check out my slide show for some ideas:

http://zintel.com/picsel.html

That version isn't cross-browser, it works just on IE 5. I am just
finishing up a rewrite that works on IE, Netscape and Mozilla that I've
tested, and features:

toggle play/hold by clicking on a pic
draggable menu
forward or reverse play
sequential or random order
settable delay

Using IE, it also includes:
image zoom
image filters (B&W, color, blends)
fullscreen toggle slides on a full screen black background
hideable popup menu
pausable scrolling info div section


zin

Tim said:
I apologize, but my knowledge of JavaScript is apparently not that
good. I tried incorporating your code with the existing code I was
trying to use.



****HERE'S THE CODE I'M USING IN THE JAVASCRIPT FILE****

var slideshowAutomaticSlides = new Array();
var slideshowAutomaticCurrent = 0;

// Preload slideshow images
function slideshowAutomaticInit() {
if (document.images) {
for (var i = 0; i < slideshowAutomaticImageFiles.length; i++) {
slideshowAutomaticSlides = new Image();
slideshowAutomaticSlides.src = slideshowAutomaticImageDirectory
+ slideshowAutomaticImageFiles;
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBeforeStart*1000);
}
}

// Show next slide
function slideshowAutomaticForward() {
if (document.images && typeof slideshowAutomaticSlides !=
'undefined') {
slideshowAutomaticCurrent++;
if (slideshowAutomaticCurrent >= slideshowAutomaticSlides.length)
slideshowAutomaticCurrent = 0;
document.images.slideshowAutomatic.src =
slideshowAutomaticSlides[slideshowAutomaticCurrent].src;
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBetweenSlides*1000);
}




****HERE'S THE CODE I'M USING IN THE BODY OF MY HTML PAGE****

<script language="javascript" type="text/javascript">
<!--
var slideshowAutomaticImageDirectory = '../images/';
var slideshowAutomaticImageFiles = new Array('1.gif', '2.gif',
'3.gif');
var slideshowAutomaticDelayBeforeStart = 5;
var slideshowAutomaticDelayBetweenSlides = 5;
//-->
</script>

<script language="javascript" type="text/javascript"
src="slideshow_automatic.js">
<!--
function slideshowAutomaticInit() {}
//-->
</script>

<img src="../images/1.gif" name="slideshowAutomatic" width="20"
height="21">


*** How is it I go about including your code?? Thanks ever so much.


Martin Honnen <[email protected]> wrote in message

Tim wrote:
Hope someone in the big wide world can help...

What I want to do is have an image slideshow which automatically
scrolls through a series of images very fast, then pauses when you
move your mouse over the image. The images will flick through (at a
rate of about 5 per second) then pause when the user onMouseOver's.

Any help would be gratefully received.

Schedule your image change with
var tid = setInterval('image change code here', 5000)
then cancel it onmouseover and restart it onmouseout
<img onmouseover="clearInterval(tid);"
onmouseout="tid = setInterval('...', 5000);"
 
Ad

Advertisements

T

Tim

Schedule your image change with

How do I include your code (above) into my new code (below)? The code
below simply cycles a series of images. As before, I'd simply like it
to pause onMouseOver...

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

var timeDelay = 0.15; // change delay time in seconds
var Pix = new Array
("images/1.gif"
,"images/2.gif"
,"images/3.gif"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//-->
</script>
</HEAD>

<BODY OnLoad="startPix()">

<img name="ChangingPix" src="images/1.gif">

</BODY>
</HTML>
 

Top