Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Image Slideshow script - I need to be able to pause an image 1

Status
Not open for further replies.
hellsing

hellsing

MIS
Sep 3, 2001
97
GB
Hi,
I've got the following javascript which sets up an image slideshow effect. Basically the images fade from one to another. What I need to do is to be able to pause the show when the user puts there mouse pointer over the image and then continue the show once the mouse is moved away.

Can anyone help. I have included the script below:

<script>
var SlideShowSpeed = 3000;

var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this

Picture[1] = 'images/slideshow1.jpg';
Picture[2] = 'images/slideshow2.jpg';
Picture[3] = 'images/slideshow3.jpg';

Caption[1] = "French Polisher in Nottingham";
Caption[2] = "Expert and Affordable Service";
Caption[3] = "All Aspects of Polishing Work Undertaken";

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}

</script>
 
Sort by date Sort by votes
var stopShow;

on the img onmouseover, set the stopShow variable to 1
on the img onmouseout, set the stopShow variable to 0

in your runSlideShow function, check the value of stopShow and only move on if ==0

Cheers.
 
Upvote 0 Downvote
Hi, thanks a lot for your reply. I'm a complete newbie with javascript and really haven't got a clue what I'm doing. The script above is something someone else provided for me. Can you show exactly what code needs to be put in.
Thanks a lot.
 
Upvote 0 Downvote
hi

you will have an <img id="PictureBox" name="PictureBox"> tag in your page somewhere

add to this onmouseover="javascript:stopShow=1;" onmouseout="javascript=stopShow=0;" thus:

<img id="PictureBox" name="PictureBox" onmouseover="javascript:stopShow=1;" onmouseout="javascript=stopShow=0;" >

change your function to add an outer 'if' statement thus:

function runSlideShow(){

if (stopShow==0) //only do the do if not paused
{
//your existing stuff goes here
}

}

cheers
 
Upvote 0 Downvote
oops, sorry
forgot to mention that the stopShow variable should be declared within the script tag, but outside of you function ie it is a page level variable, available throughout the page, as opposed to a function level variable which is available only within the function.

<script>

var stopShow;

//other variable declared

function runSlideShow()
{
//etc
}

</script>
 
Upvote 0 Downvote
arst06d, you made a typo.
image tag should be
<img id="PictureBox" name="PictureBox" onmouseover="javascript:stopShow=1;" onmouseout="javascript:stopShow=0;" >

--Chessbot
 
Upvote 0 Downvote
actually, onmouseover and onmouseout should not include the 'javascript:' oart at all, as these are automatically evaluated as Javascript.

--Chessbot
 
Upvote 0 Downvote
Hi, thanks very much for your replies.

Sorry to be a total pain but I've tried that out as you suggested and although I don't get any errors, the slideshow doesn't actually run anymore. It just sticks on the first image of the show.

Any ideas??

Thanks.
 
Upvote 0 Downvote
OK - heres a bodge of your code that works for me ...
main chnages are:

initialise the stopShow variable to 0 - sorry, I forgot!
use setInteval instead of setTimeout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content=" <script>
var stopShow = 0;

var SlideShowSpeed = 3000;

var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this

Picture[1] = 'jfdi_logo.gif';
Picture[2] = '4.jpg';
Picture[3] = 'b4thu.jpg';

Caption[1] = "French Polisher in Nottingham";
Caption[2] = "Expert and Affordable Service";
Caption[3] = "All Aspects of Polishing Work Undertaken";

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
//alert(stopShow);
if (stopShow==0){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
//window.setTimeout('runSlideShow()', SlideShowSpeed);
}
}

</script>
</head>
<body onload="window.setInterval('runSlideShow()', SlideShowSpeed);" >
<IMG alt="" src="" id="PictureBox" name="PictureBox" onmouseover="javascript:stopShow=1;" onmouseout="javascript:stopShow=0;">
</body>
</html>


cheers
 
Upvote 0 Downvote
add
Code: 
<div id="CaptionBox"></div>
under the IMG tag

--Chessbot
 
Upvote 0 Downvote
That worked a treat. Thanks a lot guys, especially arst06d.

Cheers
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
796
lexer
lexer
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
680
Rayj0000
Rayj0000
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
916
xwb
xwb
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
1K
MDGarcia
MDGarcia

Part and Inventory Search

Sponsor

Back
Top