# Javascript input please



## Macified (Sep 18, 2003)

I have just added a javascript into iWeb as an html snippet. Works the way it was intended to work.

The script pre-loads some images into the page and then cycles through them based on a pre-defined timer. 

The only problem is that the script doesn't loop. Once the final image is loaded the script ends.

I know I could just add more lines of script that keeps referencing back to the same images but that's not the proper way and, eventually, the script would end anyway.

I know nothing nothing about javascript. It was a copy and paste affair and follow the included instructions to reference my own images. Could someone review the following script and tell me how to make it loop?

Thanks in advance...



The code to be pasted into the HTML Snippet is shown below:
The URLs to the images are marked in blue. Add more as needed.
The slideshow is called up using the URL to the first slide - marked in orange - and the frame size and border are adjusted by the items marked in red.
The timing is adjusted by increasing or decreasing the Timeout - marked in yellow.
Add the line....
if (whichimage==1)
window.location="link1.htm"
..... for each additional slide and number it appropriately in two places.


<html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="http://www.domain.com/Folder-Name/1.jpg"
var image2=new Image()
image2.src="http://www.domain.com/Folder-Name/2.jpg"
var image3=new Image()
image3.src="http://www.domain.com/Folder-Name/3.jpg"

//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="http://www.domain.com/Folder-Name/1.jpg" name="slide" border="0" width="960" height="300" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
setTimeout("slideit()",5000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>
</body>
</html>


----------



## WestWeb (Jul 11, 2009)

It looks like it isn't looping because it is set to loop at the 10th image, and you only have 3.

Change the number 10 in this line:

```
if (step<10)
```
to match the number of images you are using, so the line would look like this after:

```
if (step<3)
```
I'm not sure how iWeb works particularly, but if you could change the code you have working to be like the following code:

```
<html>
<head>
<script type="text/javascript">

//preload images
var image1=new Image()
image1.src="http://www.domain.com/Folder-Name/1.jpg"
var image2=new Image()
image2.src="http://www.domain.com/Folder-Name/2.jpg"
var image3=new Image()
image3.src="http://www.domain.com/Folder-Name/3.jpg"

/* "var images" stores the file names of your images. You can re-order the file names to control the order that images display in your slideshow. */ 
var images = [ '1.jpg', '2.jpg', '3.jpg'];

var pos = 1;
function image_loader() {
pos = (pos + 1) % images.length;
document.getElementById("slideshow").src = "http://www.domain.com/Folder-Name/" + images[pos];
}
</script>
</head>
<body onload="setInterval(image_loader, 5000)">
<img id="slideshow" src="http://www.domain.com/Folder-Name/1.jpg" name="slideshow" width="960" height="300" />
</body>
</html>
```
It would be quite an improvement.


----------



## Macified (Sep 18, 2003)

Changing the if step worked great. I'll keep the new script handy so that I can change it out when I know more about javascript.

Thanks a bunch.


----------



## Macified (Sep 18, 2003)

More questions relating to the same JavaScript. When I click on an image that is being displayed inside the iFrame, the URL is accessed but also inside that iFrame. I understand that I can't have the link go to an external site (ie. A charitable donation site) but I can create a page within my own domain that contains more info and external links. 

The question is how do I get the link to open a new page rather than inside the iFrame?


----------



## whatiwant (Feb 21, 2008)

Macified said:


> More questions relating to the same JavaScript. When I click on an image that is being displayed inside the iFrame, the URL is accessed but also inside that iFrame. I understand that I can't have the link go to an external site (ie. A charitable donation site) but I can create a page within my own domain that contains more info and external links.
> 
> The question is how do I get the link to open a new page rather than inside the iFrame?


The easiest way to do that would be to change 
This:
<a href="javascript:slidelink()">
to this:
<a href="javascript:slidelink()" target="_blank">


----------



## Macified (Sep 18, 2003)

Sweet. Thanks. I'll give that a try.


----------



## Macified (Sep 18, 2003)

Thanks for the pointer but I had no luck by just making the switch.

I have created a page on my site to point to.
I made the switch in that javascript line.
I have the link for the particular image pointing to the page.

The page still appears inside the iFrame on the main page rather than opening a new window or replacing the complete windows contents.

Any pointers to good javascript basics books?


----------



## desperado (Feb 29, 2008)

Macified said:


> function slidelink(){
> if (whichimage==1)
> window.location="link1.htm"
> else if (whichimage==2)
> ...


you are telling the browser to change the content located inside your iframe

replace window.location with the window.open() method : that will open a new window.
(Window open() Method)

if you use parent.window.location, that would change the location of the iframe's parent, e.g. the main window.


----------



## whatiwant (Feb 21, 2008)

Macified said:


> Thanks for the pointer but I had no luck by just making the switch.
> 
> I have created a page on my site to point to.
> I made the switch in that javascript line.
> ...


Duh. My bad. Can't use the easy method when the href is a js function. Need to specify new window within the function as desperado pointed out. Sorry for the mislead.


----------

