PDA

View Full Version : slideshow/image swap



treepixie
11-10-2004, 02:46 AM
Hi! I have a script that swaps one picture for another to create a slide show on a page. However, I'd like to put three different categories of items on a page; such as, a bear, a lion, and a zebra. Then for each category I'd like to make a slideshow of three different pics of each animal running at the same time. Does anyone know of a script that can do that and will run in all popular browsers? Thanks for your help!

ampws_1
11-15-2004, 08:05 PM
Hi,
I'm a newbie myself. I found a neat little scrip to act as a slider + text. Prob. not what you want but good anyway.

Only other way I know to get a slideshow is PP. of course no good as uses entire screen. Other way to create animated gif can have multiple gifs in page.

Slider + Text
=========

<table border="0" cellpadding="0">
<caption><strong>Kevin's pet dog</strong></caption>
<tr>
<td width="100%"><img src="http://www.javascriptsolutions.com/imagesOLD/Img002.jpg" width="400" height="264" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p>

<script language="JavaScript1.1">

/*
Photo Slider II- By Kevin Adams (kadams@kyk.net)
For this script and more
Visit http://www.javascriptkit.com
*/

var photos=new Array()
var text=new Array()
var which=0
var what=0

//Change the below variables to reference your own images. You may have as many images in the slider as you wish
photos[0]="http://www.javascriptsolutions.com/imagesOLD/Img002.jpg"
photos[1]="http://www.javascriptsolutions.com/imagesOLD/Img003.jpg"
photos[2]="http://www.javascriptsolutions.com/imagesOLD/Img004.jpg"
photos[3]="http://www.javascriptsolutions.com/imagesOLD/Img005.jpg"
photos[4]="http://www.javascriptsolutions.com/imagesOLD/ministix4.jpg"
photos[5]="http://www.javascriptsolutions.com/imagesOLD/ministix5.jpg"
photos[6]="http://www.javascriptsolutions.com/imagesOLD/ministix6.jpg"

//change coresponding description
text[0]="Libby watching another dog from the front porch"
text[1]="A calm moment. EXTREMELY RARE!"
text[2]="Curious as to what that flash was all about"
text[3]="Mad at Momma for taking pictures."
text[4]="Libby striking back!"
text[5]="They make messes and they lay in them."
text[6]="Libby catching a frisbee, Ministix following."

window.onload=new Function("document.rotater.description.value=text[0]")

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}

function type()
{
alert("This textbox will only display default comments")
}


</script>
<p><input type=text name="description" style="width:400px" size=50>

<p><input type="button" value="<<Back" name="B2"
onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=1;what=1;backward();return false"><small>Start Over</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

hemebond
11-15-2004, 09:46 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>47274</title>
</head>
<body>
<ul name="slideshow">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
<ul name="slideshow">
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
</ul>
<ul name="slideshow">
<li><img src="images/7.jpg" alt=""></li>
<li><img src="images/8.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
</ul>
<script type="text/javascript">
var slideshows = document.getElementsByName("slideshow");
var list = new Array();

for(var i = 0; i < slideshows.length; i++)
{
list[i] = slideshows[i].getElementsByTagName("li");
for(var j = 1; j < list[i].length; j++)
{
list[i][j].style.display = 'none';
}
}

function next()
{
for(i = 0; i < slideshows.length; i++)
{
j = 0;
while(j < list[i].length && list[i][j].style.display == 'none')
{
j++;
}

list[i][j].style.display = 'none';
j++;
if(j == list[i].length)
{
j = 0;
}
list[i][j].style.display = '';
}

setTimeout("next()",1000);
}

next();
</script>
</body>
</html>If you want to support Internet Explorer you'll need to find another way to fill the slideshows array. IE does not support the getElementsByName method.

canadianjameson
11-16-2004, 12:10 AM
however it does support getElementById... a small modification but that might solve the problem.

you could even do an "if i.e (getElementById)" thing to maintain current compatibility, and add i.e compatibility