...

View Full Version : Dynamically changing Play / Pause buttons



wolfenr
12-21-2011, 03:02 PM
Hi all and hope that you can help.

I have an image slideshow that works fine and, I may be being over ambitious but I'd like to combine the Play and Pause buttons so that when the slideshow is playing, the Play button is replaced by the Pause button and when it is paused the Pause button is replaced by the Play button.

Sounds like a simple JavaScipt change image function but both buttons have roll over effects and they both have different JavaScript functions assigned to them so I'm struggling to get my head around what I need to do.

Thanks for your interest,
R

I've highlighted the relevant chunks of code below...

The HTML / CSS...


<style type="text/css">
#midcol {
padding: 0 25px;
width: 672px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/first.gif) no-repeat 0 0; }
#previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/previous.gif) no-repeat 0 0; }
#pause {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/pause.gif) no-repeat 0 0; }
#pplay {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/play.gif) no-repeat 0 0; }
#next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/next.gif) no-repeat 0 0; }
#last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/last.gif) no-repeat 0 0; }
#first:hover {background:url(navbars/first.gif) no-repeat 0 -32px; }
#previous:hover {background:url(navbars/previous.gif) no-repeat 0 -32px;}
#pause:hover {background:url(navbars/pause.gif) no-repeat 0 -32px;}
#pplay:hover {background:url(navbars/play.gif) no-repeat 0 -32px;}
#next:hover {background:url(navbars/next.gif) no-repeat 0 -32px;}
#last:hover {background:url(navbars/last.gif) no-repeat 0 -32px;}
</style>
</head>

<body>
<div id="midcol">
<table width="592" border="0">
<tr >
<td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr>
<tr><td colspan="8"><br /></td></tr>
<tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr>
<tr height="33">
<td width="160"></td>
<td id="first" onclick="first();clearTimeout(timerID);"></td>
<td id="previous" onclick="previous();clearTimeout(timerID);"></td>
<td id="pause" onclick="clearTimeout(timerID);"></td>
<td id="pplay" onclick="swapPicture();"></td>
<td id="next" onclick="next();clearTimeout(timerID);"></td>
<td id="last" onclick="last();clearTimeout(timerID);"></td>
<td width="160"><form name="dropdown" action="">Slide duration:
<select id="duration" onchange="setInterval(this.form.duration);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form></td>
</tr>
</table>

The JavaScript...


var dimages=new Array();
var numImages=31;
var interval = 3000;
var image_dir = "images/large/"
for (i=0; i<numImages; i++)
{
dimages[i]=new Image();
dimages[i].src=image_dir+(i+1)+".jpg";
}
var imageCaption = new Array();
var ImageNum = 0;
imageCaption[ImageNum++] = "Caption 1.";
imageCaption[ImageNum++] = "Caption 2.";

etc. etc.

var curImage=-1;
function swapPicture()
{
if (document.images) // does the browser support image changes?
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded?
{
var target=0;
if (document.images.myImage)
target=document.images.myImage;
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;
if (document.all && document.getElementById("myImage"))
target=document.getElementById("myImage");
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;

// make sure target is valid. It might not be valid
// if the page has not finished loading
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
doTimer(interval);
}
else
{
setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again.
}
}
}

function first(){ // Goes to the 1st image and stops
curImage=-1;
stopTimer();
swapPicture();
}
function last(){ // Goes to the last image and stops
curImage=numImages-2;
stopTimer();
swapPicture();
}
function previous(){ // Goes to the previous image and stops
curImage=curImage-2;
stopTimer();
swapPicture();
}
function next(){ // Goes to the next image and stops
stopTimer();
swapPicture();
}
function doTimer(interval){ // The Play button
timerID=setTimeout("swapPicture()",interval);
}
function stopTimer(){ // The Pause button
clearTimeout(timerID);
}
function setInterval(t){ // The slide duration drop down box.
var e = document.getElementById("duration");
interval = (e.options[e.selectedIndex].value)*1000;
}
doTimer(interval); // Starts the slideshow on load.

Sciliano
12-21-2011, 03:12 PM
See,
Thumbnail Slideshow Creator (http://www.freewarefiles.com/Thumbnail-Slideshow-Creator_program_53870.html)

wolfenr
12-21-2011, 03:17 PM
Thanks @Sciliano but I'm not sure this will help. I've got the slideshow working just fine, I just want some subtlety with my Play / Pause buttons.

Cheers
R

wolfenr
12-21-2011, 04:51 PM
OK guys I'm making some progress but am not there yet.

My revised code works as required in the Live View window of Dreamweaver but doesn't display either Play or Pause buttons in IE or FF.

Any clues?
My thanks
R

My adjusted HTML code...


<body onload="addPause();">
// Plenty of code above here
<tr height="33">
<td width="160"></td>
<td id="first" onclick="first();clearTimeout(timerID);"></td>
<td id="previous" onclick="previous();clearTimeout(timerID);"></td>
<!-- As slideshow auto starts only display Pause button first -->
<div id="firstButton"></div> // This is the container for either the Play or Pause button
<td id="next" onclick="next();clearTimeout(timerID);"></td>
<td id="last" onclick="last();clearTimeout(timerID);"></td>
// Code after here too

The JavaScript to control what gets put in the the 'firstButton' div...

// loads of other stuff above here
function changeButton1(){ // Clicked by Pause button to convert it to the Play button
document.getElementById('firstButton').innerHTML = playHTML;
}
function changeButton2(){ // Clicked by Play button to convert it to the Pause button.
document.getElementById('firstButton').innerHTML = pauseHTML;
}
pauseHTML = "<td id='pause' onclick='changeButton1();clearTimeout(timerID);'></td>";
playHTML = "<td id='pplay' onclick='changeButton2();swapPicture();'></td>";

function addPause(){ // Shows the Pause button on load as the slideshow auto starts
document.getElementById('firstButton').innerHTML = pauseHTML;
}

The buttons are defined as background images in CSS and have hover over effects there too.

xelawho
12-21-2011, 05:02 PM
do you get errors in the error console of FF?

wolfenr
12-21-2011, 05:05 PM
Good Q @xelawho!

Yep I do but I don't understand it... (but I'm off digging / Googling right now)

[17:03:57.034] Use of getAttributeNodeNS() is deprecated. Use getAttributeNS() instead. @ http://localhost/my_sites/php/stories/temp.html

xelawho
12-21-2011, 05:11 PM
don't waste your time - that doesn't mean anything. It's just a, erm, firebug bug :rolleyes:

wolfenr
12-21-2011, 05:19 PM
Thanks @xelawho - I did Google and the first post I found was a thread of yours on the same issue.

To continue the story...

What I'm hoping to end up with in the HTML after JavaScript has done its magic is:
Before loading =
<div id="firstButton"></div>

Onload =
<div id="firstButton"><td id='pause' onclick='changeButton1();clearTimeout(timerID);'></td></div>

After clicking the Pause button =
<div id="firstButton"><td id='pplay' onclick='changeButton2();swapPicture();'></td></div>

Is it possible to check this using Firebug? I'm not familiar with this debugger.
Thanks

xelawho
12-21-2011, 05:34 PM
dunno. hard to say without seeing the page in action.

I suspect you're having trouble redefining the onclick after the element has been created (but that's just a wild guess). Here's a simple snippet that I use to toggle, maybe you can adapt it:



<html>
<head>
</head>

<body onload="addPause()">
<div id="firstButton" onclick="changeButts()"></div>
<script>
var clicks =0;

function changeButts(){
clicks++
if (clicks%2==0){
document.getElementById('firstButton').innerHTML = pauseHTML;
swapPicture();
}else {
document.getElementById('firstButton').innerHTML = playHTML;
clearTimeout(timerID);
}
}
pauseHTML = "<td id='pause'>pause</td>";
playHTML = "<td id='pplay'>play</td>";

function addPause(){
document.getElementById('firstButton').innerHTML = pauseHTML;
}
</script>
</body>
</html>

wolfenr
12-21-2011, 06:43 PM
Thanks @xelawho, appreciate your input.

I've embedded your code but still the same problem i.e. it (sort of) works in Dreamweaver Live View but not in any real browser.

When I say it sort of works, I mean the correct button appears on the page and either plays or pauses the slideshow as expected but it is not in the right place. In addition I notice in Firebug that the div id firstButton is not in the expected place and doesn't have any content.

This is how Firebug reports the HTML structure...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body onload="addPause();">
<div id="midcol">
<div id="firstButton" onclick="changeButts();"></div> // this should be appearing within the table, not here.
<table width="592" border="0">
<tbody>
<tr>
<tr>
<tr height="60">
<tr height="33">
<td width="160"></td>
<td id="first" onclick="first();clearTimeout(timerID);" title="First image"></td>
<td id="previous" onclick="previous();clearTimeout(timerID);" title="Previous image"></td>
<td id="next" onclick="next();clearTimeout(timerID);" title="Next image"></td>
<td id="last" onclick="last();clearTimeout(timerID);" title="Last image"></td>
<td width="160">
</tr>
</tbody>
</table>
</div>
</body>
</html>

Finally, a (non working) example of the page on the web. (http://www.rogw.net/php/stories/temp.html). The Play / Pause buttons should be in the middle of the other buttons.

xelawho
12-21-2011, 06:49 PM
no, that link has your old code in it - seems the js file hasn't been updated?

[edit]: I see it now (the code, that it is), but I don't see the play/pause button at all... I guess this is the problem, huh?

wolfenr
12-21-2011, 06:59 PM
Thanks @xelawho but the sample js file does have some redundant old code (lazy me) but also includes the new code you posted.

Here's the js code FYI. The stuff of interest is at the foot of the JS code.

// JavaScript Document

var dimages=new Array();
var numImages=31;
var interval = 3000;
var image_dir = "images/large/"
for (i=0; i<numImages; i++)
{
dimages[i]=new Image();
dimages[i].src=image_dir+(i+1)+".jpg";
}
var imageCaption = new Array();
var ImageNum = 0;
// Load of stuff here to set the image captions
...
// end loading captions

var curImage=-1;


function swapPicture()
{
if (document.images) // does the browser support image changes?
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded?
{
var target=0;
if (document.images.myImage)
target=document.images.myImage;
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;
if (document.all && document.getElementById("myImage"))
target=document.getElementById("myImage");
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;

// make sure target is valid. It might not be valid
// if the page has not finished loading
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
doTimer(interval);
}
else
{
setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again.
}
}
}

function first(){ // Goes to the 1st image and stops
curImage=-1;
stopTimer();
swapPicture();
}
function last(){ // Goes to the last image and stops
curImage=numImages-2;
stopTimer();
swapPicture();
}
function previous(){ // Goes to the previous image and stops
curImage=curImage-2;
stopTimer();
swapPicture();
}
function next(){ // Goes to the next image and stops
stopTimer();
swapPicture();
}
function doTimer(interval){ // The Play button
timerID=setTimeout("swapPicture()",interval);
}
function stopTimer(){ // The Pause button
clearTimeout(timerID);
}
function setInterval(t){ // The slide duration drop down box.
var e = document.getElementById("duration");
interval = (e.options[e.selectedIndex].value)*1000;
}
function changeButton1(){ // Clicked by Pause button
document.getElementById('firstButton').innerHTML = playHTML;
}
function changeButton2(){ // Clicked by Play button
document.getElementById('firstButton').innerHTML = pauseHTML;
}
pauseHTML = "<td id='pause'></td>";
playHTML = "<td id='pplay'></td>";

function addPause(){
document.getElementById('firstButton').innerHTML = pauseHTML;
}

var clicks=0;
function changeButts(){
clicks++;
if (clicks%2==0){
document.getElementById('firstButton').innerHTML = pauseHTML;
swapPicture();
} else {
document.getElementById('firstButton').innerHTML = playHTML;
clearTimeout(timerID);
}
}
doTimer(interval); // Starts the slideshow on load.

wolfenr
12-21-2011, 07:12 PM
Yep that's exactly the problem.

Don't know if you've a) got Dreamweaver or, b) tried loading the 2 files into Dreamweaver, but if you do, and turn on Live View, you'll find the Play / Pause button at the top of the page and it has the functionality I'm looking for.

Summary, don't understand why this works in Live View but not in reality.

Thanks for sustaining your interest in this.
Best wishes,
R

xelawho
12-21-2011, 07:25 PM
no, that's not going to happen.

have a look at your page in firebug - click on the html tab and mouseover the various elements - you will see that your firstButton div is there, but it doesn't show up.

I don't know much about laying out with tables (except that it's a bad idea, but why not wrap that div in a <td></td> like the rest of your buttons? or even just change it to
<td id="firstButton" onclick="changeButts();"></td>

wolfenr
12-21-2011, 07:41 PM
OK no problem.

Yep that's a valid suggestion but I need an ID to reference the object so that I can do onload / onclick etc. functions but I also need an ID so that I can reference it in CSS so that the correct background image displays and the hover effects work. (This is probably the heart of my problems i.e. needing to reference the object twice!).

Summary - I need a cunk of HTML that I can reference in JavaScript that can also be separately referenced in CSS.

Sadly I'm going to have to close down now but will experiment further tomorrow a.m.

Really appreciate you input,
My thanks,
R

xelawho
12-21-2011, 08:10 PM
I don't know if it's that complicated, but maybe... but anyway, you can give an element an id (which must be unique) and a class (which can be shared amongst elements). As long as they don't conflict, css styling can be applied to both

xelawho
12-22-2011, 08:53 AM
This seems to work OK. Note that I changed your css a little - you can change the image paths back, but I think the pplay and the pic sections need to be that way.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/slideshow.js"></script>
<style type="text/css">
#midcol {
padding: 0 25px;
width: 672px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(http://www.rogw.net/php/stories/navbars/first.gif) no-repeat 0 0; }
#previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(http://www.rogw.net/php/stories/navbars/previous.gif) no-repeat 0 0; }
#pplay {height:32px; width:32px; overflow:hidden; display:inline-block; border:0;}
#thepic {position:relative}
#next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(http://www.rogw.net/php/stories/navbars/next.gif) no-repeat 0 0; }
#last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(http://www.rogw.net/php/stories/navbars/last.gif) no-repeat 0 0; }
#first:hover {background:url(http://www.rogw.net/php/stories/navbars/first.gif) no-repeat 0 -32px; }
#previous:hover {background:url(http://www.rogw.net/php/stories/navbars/previous.gif) no-repeat 0 -32px;}
#next:hover {background:url(http://www.rogw.net/php/stories/navbars/next.gif) no-repeat 0 -32px;}
#last:hover {background:url(http://www.rogw.net/php/stories/navbars/last.gif) no-repeat 0 -32px;}
</style>
</head>

<body>
<div id="midcol">
<table width="592" border="0">
<tr >

<td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr>
<tr><td colspan="8"><br /></td></tr>
<tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr>
<tr height="33">
<td width="160"></td>
<td id="first" title="First image" onclick="first();clearTimeout(timerID);"></td>
<td id="previous" title="Previous image" onclick="previous();clearTimeout(timerID);"></td>
<!-- As slideshow auto starts only display Pause button first -->
<td id="pplay"><img src="http://www.rogw.net/php/stories/navbars/pause.gif" id="thepic" onmouseout="over(this,false);" onmouseover="over(this,true);" onclick="changeButts(this)" /></td>
<td id="next" title="Next image" onclick="next();clearTimeout(timerID);"></td>
<td id="last" title="Last image" onclick="last();clearTimeout(timerID);"></td>
<td width="160"><form name="dropdown" action="">Slide duration:
<select id="duration" onchange="setInterval(this.form.duration);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form></td>
</tr>
</table>


</div>
<script>

function over(image,onoff){
image.style = onoff
? image.style.top="-32px"
: image.style.top="0px";
}

var clicks=0;
function changeButts(pic){
clicks++;
if (clicks%2==0){
pic.src= "http://www.rogw.net/php/stories/navbars/pause.gif";
swapPicture();
} else {
pic.src= "http://www.rogw.net/php/stories/navbars/play.gif";
clearTimeout(timerID);
}
}
</script>
</body>
</html>

wolfenr
12-22-2011, 10:13 AM
Wow @xelawho, you're still with me that's great, thanks.

Meanwhile I'd been tinkering at my end and produced this which works except for my commented out hover functions. Don't really know how to resolve that.

I'll play with your code too but there may be some delay as my wife insists that I take her Xmas shopping (yuk!).

Thanks again
R

From the HTML...

<td id='playPause' title="Play / Pause" onclick="changeButts();"></td>

From the JavaScript...

var clicks=0;
function changeButts(){
clicks++;
var myButt = document.getElementById('playPause');
if (clicks%2==0){
myButt.style.height="32px";
myButt.style.width="32px";
myButt.style.textIndent="-9999px";
myButt.style.overflow="hidden";
myButt.style.display="inline-block";
myButt.style.border="0";
myButt.style.background="url(navbars/pause.gif) no-repeat 0 0";
/* myButt.onmouseover.background="url(navbars/pause.gif) no-repeat 0 -32px";*/
swapPicture();
} else {
myButt.style.height="32px";
myButt.style.width="32px";
myButt.style.textIndent="-9999px";
myButt.style.overflow="hidden";
myButt.style.display="inline-block";
myButt.style.border="0";
myButt.style.background="url(navbars/play.gif) no-repeat 0 0";
/* myButt.onmouseover.background="url(navbars/play.gif) no-repeat 0 -32px";*/
clearTimeout(timerID);
}
}

wolfenr
12-22-2011, 10:28 AM
@xelawho, I'm very impressed!

Your version works just fine in FF but not quite in IE.

My version with the failing hover over effect on the play pause button is here (http://www.rogw.net/php/stories/temp.html).

Your version with the working hover over effect (at least in FF) is here (http://www.rogw.net/php/stories/temp3.html).

I'll play with it a bit later.

Really appreciate your persistence.
Best wishes,
R

xelawho
12-22-2011, 05:33 PM
Really appreciate your persistence.

yeah, I'm like a dog with a big javascript bone :D

so, my first idea was born of frustration, and of course I should have checked with &%$!ing IE, but this one is better - closer to the original and using the background image CSS for all buttons, so it should have reasonably consistent behaviour across browsers. Works ok in IE for me. Give it a go:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/slideshow.js"></script>
<style type="text/css">
#midcol {
padding: 0 25px;
width: 672px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(http://www.rogw.net/php/stories/navbars/first.gif) no-repeat 0px 0px; }
#previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(http://www.rogw.net/php/stories/navbars/previous.gif) no-repeat 0px 0px; }
#pplay {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(http://www.rogw.net/php/stories/navbars/pause.gif) no-repeat 0px 0px; }
#next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(http://www.rogw.net/php/stories/navbars/next.gif) no-repeat 0px 0px; }
#last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(http://www.rogw.net/php/stories/navbars/last.gif) no-repeat 0px 0px; }
#first:hover {background:url(http://www.rogw.net/php/stories/navbars/first.gif) no-repeat 0px -32px; }
#previous:hover {background:url(http://www.rogw.net/php/stories/navbars/previous.gif) no-repeat 0px -32px;}
#next:hover {background:url(http://www.rogw.net/php/stories/navbars/next.gif) no-repeat 0px -32px;}
#last:hover {background:url(http://www.rogw.net/php/stories/navbars/last.gif) no-repeat 0px -32px;}
</style>
</head>

<body>
<div id="midcol">
<table width="592" border="0">
<tr >

<td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr>
<tr><td colspan="8"><br /></td></tr>
<tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr>
<tr style="height:33px; overflow:hidden;">
<td width="160"></td>
<td id="first" title="First image" onclick="first();clearTimeout(timerID);"></td>
<td id="previous" title="Previous image" onclick="previous();clearTimeout(timerID);"></td>
<!-- As slideshow auto starts only display Pause button first -->
<td id="pplay" onmouseout="over(this.style,false);" onmouseover="over(this.style,true);" onclick="changeButts(this)" /></td>
<td id="next" title="Next image" onclick="next();clearTimeout(timerID);"></td>
<td id="last" title="Last image" onclick="last();clearTimeout(timerID);"></td>
<td width="160"><form name="dropdown" action="">Slide duration:
<select id="duration" onchange="setInterval(this.form.duration);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form></td>
</tr>
</table>


</div>
<script>

function over(image,onoff){
image.backgroundRepeat="no-repeat";
image = onoff
? image.backgroundPosition="0px -32px"
: image.backgroundPosition="0px 0px";
}


var clicks=0;
function changeButts(pic){
clicks++;
if (clicks%2==0){
pic.style.background= "url('http://www.rogw.net/php/stories/navbars/pause.gif')";
swapPicture();
} else {
pic.style.background= "url('http://www.rogw.net/php/stories/navbars/play.gif')";
clearTimeout(timerID);
}
}
</script>
</body>
</html>

wolfenr
12-23-2011, 08:34 AM
Hi @xelawho,

All solved now, can't say how impressed I've been with your input, sticking with me until the problem is resolved, absolutely great, thanks.

Really like the 2 clever functions you've added, very sophisticated.

The if else function for the hover effect...

function over(image,onoff){
image.backgroundRepeat="no-repeat";
image = onoff
? image.backgroundPosition="0px -32px"
: image.backgroundPosition="0px 0px";
}

The code that checks what image to replace and what action to perform as a result...

var clicks=0;
function changeButts(pic){
clicks++;
if (clicks%2==0){
pic.style.background= "url('http://www.rogw.net/php/stories/navbars/pause.gif')";
swapPicture();
} else {
pic.style.background= "url('http://www.rogw.net/php/stories/navbars/play.gif')";
clearTimeout(timerID);
}
}

For any others who may have had an interest in this thread I'm posting the HTML and JavaScript below for the final version...

HTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/slideshow2.js"></script>
<style type="text/css">
#midcol {
padding: 0 25px;
width: 672px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/first.gif) no-repeat 0px 0px; }
#previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/previous.gif) no-repeat 0px 0px; }
#pplay {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/pause.gif) no-repeat 0px 0px; }
#next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/next.gif) no-repeat 0px 0px; }
#last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/last.gif) no-repeat 0px 0px; }
#first:hover {background:url(navbars/first.gif) no-repeat 0px -32px; }
#previous:hover {background:url(navbars/previous.gif) no-repeat 0px -32px;}
#next:hover {background:url(navbars/next.gif) no-repeat 0px -32px;}
#last:hover {background:url(navbars/last.gif) no-repeat 0px -32px;}
</style>
</head>

<body>
<div id="midcol">
<table width="622" border="0">
<tr >

<td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr>
<tr><td colspan="8"><br /></td></tr>
<tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr>
<tr style="height:33px; overflow:hidden;">
<td width="210"></td>
<td id="first" width="32" title="First image" onclick="first();clearTimeout(timerID);"></td>
<td id="previous" width="32" title="Previous image" onclick="previous();clearTimeout(timerID);"></td>
<!-- As slideshow auto starts only display Pause button first -->
<td id="pplay" width="32" onmouseout="over(this.style,false);" onmouseover="over(this.style,true);" onclick="changeButts(this)"></td>
<td id="next" width="32" title="Next image" onclick="next();clearTimeout(timerID);"></td>
<td id="last" width="32" title="Last image" onclick="last();clearTimeout(timerID);"></td>
<td width="210" align="right"><form name="dropdown" action="">Slide duration:
<select id="duration" onchange="setInterval(this.form.duration);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form></td>
</tr>
</table>
</div>
</body>
</html>

The JavaScript...

var dimages=new Array();
var numImages=31;
var interval = 3000; // The initial slide duration
var image_dir = "images/large/"
for (i=0; i<numImages; i++)
{
dimages[i]=new Image();
dimages[i].src=image_dir+(i+1)+".jpg";
}
var imageCaption = new Array();
var ImageNum = 0;
imageCaption[ImageNum++] = "Caption 1";
imageCaption[ImageNum++] = "'Caption 2";
// Loads more caption definitions here

var curImage=-1;

function swapPicture()
{
if (document.images) // does the browser support image changes?
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded?
{
var target=0;
if (document.images.myImage)
target=document.images.myImage;
cap = imageCaption[nextImage]; // Lets add the caption
document.getElementById('caption').innerHTML=cap;
if (document.all && document.getElementById("myImage"))
target=document.getElementById("myImage");
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;

// make sure target is valid. It might not be valid
// if the page has not finished loading
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
doTimer(interval);
}
else
{
setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again.
}
}
}

function first(){ // Goes to the 1st image and stops
curImage=-1;
stopTimer();
swapPicture();
}
function last(){ // Goes to the last image and stops
curImage=numImages-2;
stopTimer();
swapPicture();
}
function previous(){ // Goes to the previous image and stops
curImage=curImage-2;
stopTimer();
swapPicture();
}
function next(){ // Goes to the next image and stops
stopTimer();
swapPicture();
}
function doTimer(interval){ // The Play button
timerID=setTimeout("swapPicture()",interval);
}
function stopTimer(){ // The Pause button
clearTimeout(timerID);
}
function setInterval(t){ // The slide duration drop down box.
var e = document.getElementById("duration");
interval = (e.options[e.selectedIndex].value)*1000;
}

// Clever if else stuff to do the Play / Pause hover effect
function over(image,onoff){
image.backgroundRepeat="no-repeat";
image = onoff
? image.backgroundPosition="0px -32px"
: image.backgroundPosition="0px 0px";
}

// More clever stuff to swop Play / Pase buttons depending on their original state
var clicks=0;
function changeButts(pic){
clicks++;
if (clicks%2==0){
pic.style.background= "url('navbars/pause.gif')";
swapPicture();
} else {
pic.style.background= "url('navbars/play.gif')";
clearTimeout(timerID);
}
}
doTimer(interval); // Starts the slideshow on load.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum