...

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum