Links to slideshow

JavaScript
1

Hello,
I have a nice working javascript for 2 slideshows on one page.
Now I would like to add links to the differente images, but unfortunatelly I don´t know how to do this. Could anyone help me please? Thanks in Advance!!!

Code in the Head
<script type=“text/javascript”>

function swapImage(id, path)
{
var el = document.getElementById(id);
el.count = el.count || 0;
el.src = path[el.count];
el.count = (el.count + 1) % path.length;
}
function slideshow() {
setInterval(function () {
swapImage(‘slide1’, [
“website_images/hoofdcat_2.jpg”,
“website_images/hoofdcat_1.jpg”,
“website_images/hoofdcat_2.jpg”,
“website_images/hoofdcat_1.jpg”,
“website_images/hoofdcat_2.jpg”
]);
swapImage(‘slide2’, [
“website_images/hoofdcat_1.jpg”,
“website_images/hoofdcat_2.jpg”,
“website_images/hoofdcat_1.jpg”,
“website_images/hoofdcat_2.jpg”
]);
}, 3000);
}
onload = slideshow;
</script>

Code in the Body:

	&lt;TABLE&gt;

<TD WIDTH=“314” HEIGHT=“445”>
<img id=“slide1” height=“445” width=“315” src=“website_images/hoofdcat_1.jpg”>

&lt;/TD&gt;

<TD WIDTH=“314” HEIGHT=“445”>
<img id=“slide2” height=“445” width=“315” src=“website_images/hoofdcat_2.jpg”>
</TD>
</TR>
</TABLE>

2

You could move the identifier to a link instead:


<a id="slide1" href="#"><img  height="445" width="315" src="website_images/hoofdcat_1.jpg"></a>

and then in the script, update the href with the path, and get the image to update its src attribute.


var el = document.getElementById(id),
    img = el.getElementsByTagName('img')[0];

el.count = el.count || 0;
el.href = path[el.count];
img.src = el.href;
el.count = (el.count + 1) % path.length;
3

Dear Paul,
thank you for your reply!

Now the slideshow have 2 links.

But how can I put links to all images and not just to a seperate slideshow.

So to every seperate image, for example:
swapImage(‘slide1’, [
“website_images/hoofdcat_2.jpg”, www.test1.com
“website_images/hoofdcat_1.jpg”, www.test2.com
“website_images/hoofdcat_2.jpg”, domain disabled
“website_images/hoofdcat_1.jpg”, test4.com
“website_images/hoofdcat_2.jpg” test5.com
]);
swapImage(‘slide2’, [
“website_images/hoofdcat_1.jpg”, www.test6.com
“website_images/hoofdcat_2.jpg”, test7.com
“website_images/hoofdcat_1.jpg”, www.test8.com
“website_images/hoofdcat_2.jpg” www.test9.com
]);
}, 3000);
}
onload = slideshow;
</script>

Hope you can help me with this last part of my problem.

Thanks in advance!

4

Here’s an array of images from before:


[
"website_images/hoofdcat_1.jpg",
"website_images/hoofdcat_2.jpg",
"website_images/hoofdcat_1.jpg",
"website_images/hoofdcat_2.jpg"
]

You can make each item in that array an object, with an image property and a link property.


[
{image: "website_images/hoofdcat_1.jpg", link: 'http://www.abc.com/here'},
{image: "website_images/hoofdcat_2.jpg", link: 'http://www.def.com/there'},
{image: "website_images/hoofdcat_1.jpg", link: 'http://www.hij.com/hither'},
{image: "website_images/hoofdcat_2.jpg" link: 'http://www.klm.com/thither'}
]

Then in the code, you refer to each of those image/link properties.


el.href = path[el.count].link;
img.src = path[el.count].image;
5

Dear Paul,
i´m sorry to ask you again, but I think i did something wrong.
Now the image´s don´t move anymore.

Here is the code that a made with your advice, but agian I think I did something wrong?

<script type=“text/javascript”>

function swapImage(id, path)
{
var el = document.getElementById(id),
img = el.getElementsByTagName(‘img’)[0];

el.count = el.count || 0;
el.href = path[el.count].link;
img.src = path[el.count].image;
el.count = (el.count + 1) % path.length;
}
function slideshow() {
setInterval(function () {
swapImage(‘slide1’,[
{image: “website_images/hoofdcat_1.jpg”, link: ‘http://www.abc.com/here’},
{image: “website_images/hoofdcat_2.jpg”, link: ‘http://www.def.com/there’},
{image: “website_images/hoofdcat_1.jpg”, link: ‘http://www.hij.com/hither’},
{image: “website_images/hoofdcat_2.jpg” link: ‘http://www.klm.com/thither’},
]);
swapImage(‘slide2’, [
{image: “website_images/hoofdcat_1.jpg”, link: ‘http://www.abc.com/here’},
{image: “website_images/hoofdcat_2.jpg”, link: ‘http://www.def.com/there’},
{image: “website_images/hoofdcat_1.jpg”, link: ‘http://www.hij.com/hither’},
{image: “website_images/hoofdcat_2.jpg” link: ‘http://www.klm.com/thither’},
]);
}, 3000);
}
onload = slideshow;
</script>

<body>

<TABLE>

<TD WIDTH=“314” HEIGHT=“445”>
<a id=“slide1” href=“http://www.den-elzen.nl/over-den-elzen”><img height=“445” width=“315” src=“website_images/hoofdcat_1.jpg”></a>

&lt;/TD&gt;

<TD WIDTH=“314” HEIGHT=“445”>
<a id=“slide2” href=“http://www.den-elzen.nl/openingstijden”><img id=“slide2” height=“445” width=“315” src=“website_images/hoofdcat_2.jpg”></a>
</TD>
</TR>
</TABLE>

Hope you can help me agian :slight_smile:

Thanks in Advance!

6

It looks like there’s a trailing comma in the array of items.

7

haha I´m not so smart with it.

I´m really sorry, what do you mean with that ??

I´m a starter with javascript…

8

Found it !!!

I search and saw what you ment!

Thank you for your help!!

9

What I mean, is that in an array, commas are placed between each item in the array. There should not be a comma at the end of the array though. That’s the trailing comma I was meaning.

10

Hello Paul,
thank you for helping me out with the script.

One last question.

In firefox and safari it´s works really well, but in IE the slideshow doesn´t repeat.
So when all images have been shown, it stops? In Firefox the slideshow than continious with the first image.

Is there a code, so i can let the slideshow repeat in IE?

Here is the code:

<script type=“text/javascript”>

function swapImage(id, path)
{
var el = document.getElementById(id),
img = el.getElementsByTagName(‘img’)[0];

el.count = el.count || 0;
el.href = path[el.count].link;
img.src = path[el.count].image;
el.count = (el.count + 1) % path.length;
}
function slideshow() {
setInterval(function () {
swapImage(‘slide2’,[

{image: “images/slide/sneek.jpg”, link: ‘http://www.den-elzen.nl/home’},
{image: “images/slide/malino.jpg”, link: ‘http://www.den-elzen.nl/home’},
{image: “images/slide/sneek.jpg”, link: ‘http://www.den-elzen.nl/home’},
{image: “images/slide/eagle.jpg”, link: ‘http://www.den-elzen.nl/home’},

]);
swapImage(‘slide1’, [
{image: “images/slide/boxton.jpg”, link: ‘http://www.den-elzen.nl/home’},
{image: “images/slide/osterund.jpg”, link: ‘http://www.den-elzen.nl/home’},
{image: “images/slide/varin.jpg”, link: ‘http://www.den-elzen.nl/home’},
{image: “images/slide/rindal.jpg”, link: ‘http://www.den-elzen.nl/home’},
]);
}, 3500);
}
onload = slideshow;
</script>

In the body:

<TABLE>

<TD WIDTH=“314” HEIGHT=“445”>
<a id=“slide1” href=“http://www.den-elzen.nl/over-den-elzen”><img height=“445” width=“315” src=“images/slide/boxton.jpg”></a>

&lt;/TD&gt;

<TD WIDTH=“314” HEIGHT=“445”>
<a id=“slide2” href=“http://www.den-elzen.nl/openingstijden”><img id=“slide2” height=“445” width=“315” src=“images/slide/sneek.jpg”></a>
</TD>
</TR>
</TABLE>

Hope you can help.

Thanks in Advance!

11

It’s the trailing comma in the list of items that is still causing you problems.

When there’s a trailing comma, Internet Explorer thinks there’s another unspecified item in the list, so your list is no longer 4 items long but 5 items long instead. Then Internet Explorer tries to read that 5th item and fails, stopping the script.

Get rid of that trailing comma in each of the arrays, and your problem will be solved.

If you don’t understand what a trailing comma is, here is is highlighted in red:

var array = [1, 2, 3, 4[color="red"][b],[/b][/color]];
12

Thanks Paul,
I really appriciate it !!