Slideshow Controls

**Kraven1** · 09-09-2010, 07:40 PM

I'm working on a slideshow and am having difficulty adding 'Previous' 'Pause' and 'Next' controls.
This is the code:

Code:

<script src="pics/getimages.php"></script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "pics/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>

<div style="width: 170px; height: 160px">
<img id="slideshow" src="pics/bear.gif" />
</div>

I was able to get it to jump to the next slide using this:

Code:

<a href="javascript:rotateimages()">Next Slide</a>

But I'm at a loss, after trying dozens of things, on how to add 'Pause' and 'Previous'.
Any pointers would be appreciated.

Thanks,
Kraven1

**jscheuer1** · 09-10-2010, 02:13 AM

There are slideshows that could be easily adapted to use your getimages script that already have these capabilities and more. I'm thinking specifically of:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

There are many others.

However, I get the idea that you want to learn. To that end, here's one way:

Code:

<script src="pics/getimages.php"></script>

<script type="text/javascript">

var curimg=0
function rotateimages(override){
if(rotateimages.pause && override !== true){return;}
document.getElementById("slideshow").setAttribute("src", "pics/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>

<div style="width: 170px; height: 160px">
<img id="slideshow" src="pics/bear.gif" />
</div>

<a href="javascript:next()" onclick="rotateimages.pause = true; rotateimages(true); return false;">Next Slide</a> 
<a href="javascript:pause()" onclick="rotateimages.pause = true; return false;">Pause</a> 
<a href="javascript:resume()" onclick="rotateimages.pause = false; return false;">Resume</a> 
<a href="javascript:previous()" onclick="rotateimages.pause = true; curimg = (curimg + galleryarray.length - 2) % galleryarray.length; rotateimages(true); return false;">Previous Slide</a>

Notes:

Due to odd things that can sometimes happen (partial unloading of the page), one shouldn't use the href="javascript:whatever()" convention without an onclick event that returns false. Usually there's no problem, but it can cause animated .gif images and/or Flash applications to halt and/or other undesirable things (sometimes even scripts to halt) to happen in some browsers. Once you have an onclick event which returns false, you can use whatever you like in the href - the href will never fire. In this case I've used pseudo code that will give the user a clue as to what will happen. Remember, what's in the href will be seen in the status bar on hover of the link.

I've tested the above code out in a limited fashion and it works. It may need some tweaking though. But it should give you a basic idea of how to go.

**vwphillips** · 09-10-2010, 08:40 AM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
var path='http://www.vicsjavascripts.org.uk/StdImages/';
var galleryarray=[
 'Egypt5.jpg',
 'Egypt6.jpg',
 'Egypt7.jpg',
 'Egypt9.jpg'
];

var curimg=0,to;

function rotateimages(ud,nu){
 clearTimeout(to);
 if (nu&&galleryarray[nu-1]){
  curimg=nu-1;
 }
 else {
  curimg+=ud>0?1:-1;
  curimg=curimg>=galleryarray.length?0:curimg<0?galleryarray.length-1:curimg;
 }
 document.getElementById("slideshow").setAttribute("src", path+galleryarray[curimg]);

}

function Auto(){
 clearTimeout(to);
 rotateimages(1);
 to=setTimeout(function(){ Auto();  },2500);
}

function Pause(){
 clearTimeout(to);
}

window.onload=function(){
setTimeout(function(){ Auto(); }, 2500);
}
</script>

</head>

<body>
<div style="width: 170px; height: 160px">
<img id="slideshow" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<input type="button" name="" value="Pause" onmouseup="Pause();"/>
<input type="button" name="" value="Auto" onmouseup="Auto();"/>
<input type="button" name="" value="GoTo 1" onmouseup="rotateimages(0,1);"/>
<input type="button" name="" value="GoTo 2" onmouseup="rotateimages(0,2);"/>
<input type="button" name="" value="GoTo 3" onmouseup="rotateimages(0,3);"/>
<input type="button" name="" value="GoTo 4" onmouseup="rotateimages(0,4);"/>
<input type="button" name="" value="Previous" onmouseup="rotateimages(-1);"/>
<input type="button" name="" value="Next" onmouseup="rotateimages(1);"/>

</div>

</body>

</html>

**Kraven1** · 09-10-2010, 04:16 PM

Thanks jscheuer1.

You're right, I do want to learn. That's why I'm going with a simple script that I can build upon, rather than just using a more complete ready to wear. That'd be easier, but I wouldn't learn much, and it wouldn't feel like mine.

I tried the script with your modifications, but without success.
Everything loads fine; I get the first image and the controls, but nothing else happens.
I thought that maybe with the 'override' it would have to be manually started, so I clicked resume. Nothing happened; not even a color change in the text. The same is true for the pause. I do get a color change when I click next and previous, but no change in the image.

I've been looking it over with my amateur eyes, and it all seems to make sense... it looks like it should work.
I couldn't remember if it did or not, but my first thought was that the getimages.php might reference the slideshow script. (Before making changes to my original, I uploaded this one to my server under a different file name to try it out) Of course, that wasn't the case.

If I were to guess, I'd say it's something in the 'override' that's the source of the problem. Out of curiosity, I took it out just to see what would happen. I knew that the rest of the script depended on that being in, but I was curious if the images would auto rotate on load. They didn't, but the change did make it so all the control text changed color on click. Of course they still didn't function, but I'm looking for clues.

What really has me baffled is it works for you, but not for me, and we're using the same script. That brings me back to the getimages.php. That's the one thing that I have, that may be different than what you're using. I would think that an image array, is an image array... but maybe that's not so; I am a real beginner here. Just in case, I'm adding that php code. Meanwhile, I'll keep trying to find the problem... trying this and that to see what happens.
(ya never know, I might stumble upon something)

Code:

<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

Thanks again for the effort that you've already put into this.

Kraven

**jscheuer1** · 09-10-2010, 06:39 PM

The easiest thing would be to give us a link to a live demo.

Here's how I tested it:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
galleryarray = [1, 2, 3, 4];
var curimg=0
function rotateimages(override){
if(rotateimages.pause && override !== true){return;}
document.getElementById("slideshow").innerHTML = galleryarray[curimg];
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>
</head>
<body>
<div id="slideshow" style="width: 170px; height: 160px; border: 1px solid #000;"></div>

<a href="javascript:next()" onclick="rotateimages.pause = true; rotateimages(true); return false;">Next Slide</a> 
<a href="javascript:pause()" onclick="rotateimages.pause = true; return false;">Pause</a> 
<a href="javascript:resume()" onclick="rotateimages.pause = false; return false;">Resume</a> 
<a href="javascript:previous()" onclick="rotateimages.pause = true; curimg = (curimg + galleryarray.length - 2) % galleryarray.length; rotateimages(true); return false;">Previous Slide</a> 
</body>
</html>

The only real differences are that I used a valid page, added a border to the display area, and instead of images and an image tag's source attribute, I used the the division's innerHTML property to display a number.

If you revert all that except for the valid page, it would work with images, as long as the PHP code makes a valid array of images with the correct paths to those images. It's pretty easy to check, simply view the the getimages.php directly in the browser. You should see a valid javascript array with the correct information for the images. If not, it should be fairly obvious what needs to be changed in the PHP code.

I get the impression that it was working before though, so the the PHP file should be fine. It's probably how the code from my previous post got implemented.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**Kraven1** · 09-11-2010, 02:46 AM

Hey John! It works!!

It was my fault.

I focused so much on the function script changes, I overlooked something.
When I posted a copy of the test page script, it was as it was prior to my adding images to a file and actually running it. In the functioning script I'd placed my images in a directory named images. I remembered that and changed the directory name in 2 locations, and forgot the third... where my getimages.php file resides.
I corrected that and it all works great.
I apologize for the extra effort you put out due to my error, and thank you very much for the help.
The Slideshow isn't on my site yet; I'll be making quite a few more modifications before I add it as a page, or more likely a popup.

I puzzled over this issue for a week. Searching the net for tutorials etc.
Now I have a Rosetta Stone that will help me to understand.

Thanks again.... I may get a night's sleep where I'm not coding in my dreams.

Kraven

Thread: Slideshow Controls

Thread Tools

Search Thread

Slideshow Controls

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions