Foto's in een slide show linken

[Zaankantertje75]

Beste mensen,

Ik heb hier een vrij oud javascriptje die ik wil gebruiken voor een slide show.

[JS]<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3300;
// Duration of crossfade (seconds)
var crossFadeDuration = 5;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below


Pic[0] = "banners3.jpg"
Pic[1] = 'banner2.jpg'
Pic[2] = 'banner1.jpg'
Pic[3] = 'banner3.jpg'
Pic[4] = 'banner4.jpg'
Pic[5] = 'banner6.jpg'
Pic[6] = 'banner7.jpg'
Pic[7] = 'banner7.2.jpg'

var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply ();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play( ); //zorgt voor de fadeover
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}


// End --> [/JS]

Nou dacht ik. Ok het zal leuk zijn als ik elke foto individueel kan linken. Dus heb ik even gezocht op google. En wat gevonden ik heb er dit van gemaakt.
Bij regel 20 begint de link code

[JS]
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3300;
// Duration of crossfade (seconds)
var crossFadeDuration = 5;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below


Pic[0] = "banners3.jpg"
Pic[1] = 'banner2.jpg'
Pic[2] = 'banner1.jpg'
Pic[3] = 'banner3.jpg'
Pic[4] = 'banner4.jpg'
Pic[5] = 'banner6.jpg'
Pic[6] = 'banner7.jpg'
Pic[7] = 'banner7.2.jpg'
----------------------------
//link script.
var imagelinks = new Array();

imagelinks[1]= "http://www.javascriptkit.com"
imagelinks[2]= "http://www.netscape.com"
imagelinks[3]= "http://www.microsoft.com"
imagelinks[4]= "http://www.dynamicdrive.com"
imagelinks[5]= "http://www.freewarejava.com"
imagelinks[6]= "http://www.cnn.com"

var ry=Math.floor(Math.random()*Pic.length)
if (ry==0) ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+Pic[ry]+'" border=0></a>')


random_imglink()

--------------------------

var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply ();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play( ); //zorgt voor de fadeover
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}


// End --> [/JS]

Nou bleek dit een nieuwe afbeelding weer te geven op in de linker boven hoek van mijn site. En elke keer al sik refreshede stond er een andere foto, en die foto inkte ook naar de site. Opzich handig maar niet wat ik wil.

Weet iemand hoe ik dit op kan lossen/werkend kan krijgen? of me een tip kan geven?

heel erg bedankt!

Bram.

 

[Flamedog]

kijk eens naar http://rabo.echost.nl/photo

Dit heb ik ooit gemaakt voor een schoolopdracht. Als je klikt op een plaatje wordt hij uitvergroot. Wat we doen is eigenlijk gewoon alle andere plaatjes 'hidden' maken (met document.style.visibility) en van het ene plaatje verander je de width en height (document.style.width etc)

Hopelijk heb je hier wat aan

(in firefox druk ctrl+U voor de broncode van het bestand)

 

[Zaankantertje75]

Heey Flamedog,

Thanks voor je optie. Maar deze werkt bij mij niet op IE en hij moet het sowieso op IE ook gaan doen.. Maar bedankt voor je input

Bram

 

[Flamedog]

dan is je browser verouderd ik heb hem getest op firefox, chrome, safari en opera, alleen bij internet explorer heeft hij inderdaad kuren als het niet de nieuwste versie is

ontopic: Je kan natuurlijk ook gewoon een <a> tag om iedere image heen zetten, en die vervolgens een link geven (allemaal via javascript).

var a1 = document.createElement('a');
var a2 = document.getElementById('main');
var a3 = document.createElement('img');

a1.setAttribute('href','www.google.com');
a3.setAttribute('src'),'images/plaatje.jpg');
a2.appendChild(a1);
a1.appendChild(a3);