Link van plaatje in slideshow maken!

[madglaz]

Experts! Ik hoop dat jullie mij kunnen helpen met een voor mij onmogelijke zaak en voor jullie een walk-in-the-park. Ik heb op de voorpagina van mijn website een Javascript slider staan, en deze werkt perfect! (even wachten voordat de eerste laat) Alleen nu wil ik graag dat er op de plaatjes geklikt kan worden, zodat er naar een pagina binnen de website gelinkt wordt.

Hieronder staat de slider javascript (stelt niet zoveel voor) en je begrijpt dat alle .jpg files de foto's zijn die voorbij komen. Mijn vraag, wat moet er aan toegevoegd moet worden zodat de foto's clickable zijn? Mocht je nog meer bestanden of broncodes nodig hebben dan hoor ik het graag

[JS]
var images = new Array( '/static/img/home_intro/Bijbelschool_Opendag.jpg ',
'/static/img/home_intro/Bijbelschool_Opendag.jpg ',
'/static/img/home_intro/Bijbelschool_on_tour_0.jpg ',
'/static/img/home_intro/Bijbelschool_on_tour_1.jpg ',
'/static/img/home_intro/Bijbelschool_on_tour_2.jpg ',
'/static/img/home_intro/Bijbelschool_on_tour_3.jpg ',
'/static/img/home_intro/Bijbelschool_kracht.jpg ',
'/static/img/home_intro/Bijbelschool_van_start_3.jpg ',
'/static/img/home_intro/Bijbelschool_open_dag_1.jpg ',
'/static/img/home_intro/Bijbelschool_open_dag_2.jpg ',
'/static/img/home_intro/Bijbelschool_kracht_1.gif ',
'/static/img/home_intro/Bijbelschool_Efeze.jpg ',
'/static/img/home_intro/Bijbelschool_Daniel.jpg ');

var imageWidth = 525;
var imageHeight = 265;
var imageTimeout = 2000;
var nextImage = 1;

function setOpacity(el, opacity) {

// Which opacity method does this browser support?

opacity /= 100;

el.style.opacity = opacity;
el.style.MozOpacity = opacity;
el.style.filter = "alpha(opacity=" + (opacity*100) + ")";

}

function fadeImage(el, currentOpacity) {

currentOpacity += 5;

if (currentOpacity > 100) {
setOpacity(el, 100);
var prevEl = el.previousSibling ? el.previousSibling : el.parentNode.lastChild;
prevEl.style.visibility = 'hidden';
el.style.zIndex = 1;
window.setTimeout(startFading, imageTimeout);
}
else {
setOpacity(el, currentOpacity);
window.setTimeout(function() { fadeImage(el, currentOpacity); }, 50);
}

}


function startFading() {

var el = document.getElementById('image-container').childNodes[nextImage];

el.style.visibility = 'visible';
el.style.zIndex = 2;
setOpacity(el, 0);
fadeImage(el,0);

nextImage = (nextImage < images.length-1) ? nextImage + 1 : 0;

}


function pageLoad() {

var el = document.getElementById('image-container');

while (el.firstChild) { el.removeChild(el.firstChild); }

el.style.width = imageWidth + 'px';
el.style.height = imageHeight + 'px';

for(var i=0; i<images.length; i++) {

var t = document.createElement('IMG');
t.setAttribute('src',images);
t.setAttribute('width',imageWidth);
t.setAttribute('height',imageHeight);
t.style.position = 'absolute';
t.style.visibility = 'hidden';
el.appendChild(t);

}

el.firstChild.style.visibility = 'visible';

window.setTimeout(startFading, imageTimeout);

}


addLoadEvent( pageLoad );

[/JS]

 

[That Guy]

Hm, moeten ze elk naar een andere link gaan? If not, hier een correctie van startFading() functie:
[JS]
function startFading() {

var el = document.getElementById('image-container').childNodes[nextImage];

el.style.visibility = 'visible';
el.style.zIndex = 2;


/* Vegras edit
verander 'http://locatie.example.com' naar de goede locatie
overgens is dit een nogal 'lelijke' manier, maargoed, het gaat
om het idee
*/
el.onclick = function(){ window.location = 'http://locatie.example.com'; }


setOpacity(el, 0);
fadeImage(el,0);

nextImage = (nextImage < images.length-1) ? nextImage + 1 : 0;

}
[/JS]

 

[madglaz]

Bedankt voor je reactie! Het is inderdaad de bedoeling dat elk plaatje afzonderlijk naar een andere link kan gaan Maar dit is een begin! Bedankt

 

[That Guy]

Je zal je array moeten veranderen, of een extra array maken. Het 2e lijkt me een betere oplossing omdat je anders je hele script moet gaan fixen. In ieder geval, hier het idee:
[JS]var links = ['http://link1.example.com',
'http://that-guy.net',
'....'
];[/JS]
je functie:[JS]function startFading() {

var el = document.getElementById('image-container').childNodes[nextImage];

el.style.visibility = 'visible';
el.style.zIndex = 2;


/* Vegras edit
overgens is dit een nogal 'lelijke' manier, maargoed, het gaat
om het idee. Dit zou t moeten doen:
*/
el.onclick = function(){ window.location = links[nextImage]; }

setOpacity(el, 0);
fadeImage(el,0);

nextImage = (nextImage < images.length-1) ? nextImage + 1 : 0;

}[/JS]

 

[madglaz]

Geweldig! Super bedankt! De code werkt perfect zoals je kunt zien op www.foundation4life.nl. Helemaal fantastisch en bedankt voor al je moeite! Super zeg