• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 427
  • Last Modified:

javascript photo gallery

I have created  a gallery using javascript.  I was wondering if there is a way to cycle through the photos only once and end on the last photo and it remain on the screen.

What I have created in the code below is a race car coming acrossed the screen.  I want it to get o the middle and stop using the same speed already in the code.

I know there are other things like flash and all but I only know this and have a week to complete.  Thanks for your assistance in advance.
<html>

<head>

<title>new 1</title>

</head>

<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>

<body background="steelplate.bmp">

<EMBED src="sound1.wav" autostart=true loop=false volume=100 
hidden=true><NOEMBED><BGSOUND src="sound1.wav"></NOEMBED>


<center>

<table width="800" border="0" bordercolor="black" cellspacing="0">

<tr>
<td bgcolor="black"><img src="round2b.bmp" border="0"></td>
</tr>

<tr>
<td height="30" bgcolor="black">&nbsp;</td>
</tr>

<tr>
<td width="800" height="200" bgcolor="black"><img src="passby01.jpg" name="slide" border=0><script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages

("passby01.jpg","passby01.jpg","passby01.jpg","passby02.jpg","passby02.jpg","passby02.jpg","passby02.jpg","passby02.jpg","passby02.jpg","passby02.jpg","passb

y02.jpg","passby01.jpg","passby01.jpg","passby01.jpg","passby01.jpg","passby01.jpg","passby01.jpg","passby01.jpg","passby01.jpg","passby03.jpg","passby04.jpg

","passby05.jpg","passby06.jpg","passby07.jpg","passby08.jpg","passby09.jpg","passby10.jpg","passby11.jpg","passby12.jpg","passby13.jpg","passby14.jpg","pass

by15.jpg","passby16.jpg","passby17.jpg","passby18.jpg","passby19.jpg","passby20.jpg","passby21.jpg","passby21.jpg","passby21.jpg","passby22.jpg","passby22.jp

g","passby22.jpg","passby23.jpg","passby23.jpg","passby23.jpg","passby24.jpg","passby25.jpg","passby26.jpg","passby27.jpg","passby28.jpg","passby29.jpg","pas

sby30.jpg","passby31.jpg","passby32.jpg","passby33.jpg","passby34.jpg","passby35.jpg","passby36.jpg","passby37.jpg","passby37.jpg","passby37.jpg","passby37.j

pg","passby37.jpg")


//configure the speed of the slideshow, in miliseconds
var slideshowspeed=50

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script></td>
</tr>

</table>

</center>

</body>

</html>

Open in new window

0
lpetrowicz
Asked:
lpetrowicz
  • 2
  • 2
1 Solution
 
kadabaCommented:
replace this function and try

function slideit()
{
	if (!document.images)
	return;
	document.images.slide.src=slideimages[whichimage].src;
	whichlink=whichimage;
	if (whichimage<slideimages.length-1){
		whichimage++;
		setTimeout("slideit()",slideshowspeed);
	}
}

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
if (!document.images) will happily catch IE 3.0. That is very useful ;)
As useful as the JavaScript1.1 which will also block IE3.0

http://goinside.com/96/ie3.html
0
 
lpetrowiczAuthor Commented:
the code above did not work
0
 
kadabaCommented:
>> to cycle through the photos only once and end on the last photo and it remain on the screen.

If this is what you are looking for that should work. See the sample code

<html>
<head>
<script type="text/javascript">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>
</head>
<body>
<a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("http://www.javascriptkit.com/script/script2/photo1.jpg","http://www.javascriptkit.com/script/script2/photo2.jpg","http://www.javascriptkit.com/script/script2/photo3.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit()
{
        if (!document.images)
        return;
        document.images.slide.src=slideimages[whichimage].src;
        whichlink=whichimage;
        if (whichimage<slideimages.length-1){
                whichimage++;
                setTimeout("slideit()",slideshowspeed);
        }
}
slideit()

//-->
</script>
</body>
</html>

Open in new window

0
 
lpetrowiczAuthor Commented:
Hey, That's It!!!  I appreciate it.  I must have copied it wrong.  Thanks for the help!!!!!!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now