?
Solved

javascript photo gallery

Posted on 2010-01-10
5
Medium Priority
?
426 Views
Last Modified: 2012-05-08
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
Comment
Question by:lpetrowicz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 22

Expert Comment

by:kadaba
ID: 26277933
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26278105
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
 

Author Comment

by:lpetrowicz
ID: 26309572
the code above did not work
0
 
LVL 22

Accepted Solution

by:
kadaba earned 1000 total points
ID: 26311277
>> 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
 

Author Comment

by:lpetrowicz
ID: 26319696
Hey, That's It!!!  I appreciate it.  I must have copied it wrong.  Thanks for the help!!!!!!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question