THUMBNAILS 8

JavaScripts knippen en plakken

Op deze website vind je javascripts die je door eenvoudig knippen en plakken aan jouw site kunt toevoegen.

Home CSS DHTML Forum E-mail Sitezoeker Links

THUMBNAILS 8

Eenvoudige versie met genummerde foto's.
Het aantal foto's is, net zoals het aantal getoonde thumbnails, onbeperkt.

1. Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina :

/* **************************   DIT AANPASSEN   ******************** */
var thumbs = 3; // het aantal thumbnails
var afb = 5;    // het aantal foto's
/* **************************  EINDE AANPASSEN   ******************* */

d = document.getElementById("scroller");
var einde = afb-thumbs+1;
var fotoreeks = "<table cellspacing='10' cellpadding='10'><tr>";
fotoreeks += "<td><img src=";
if (nr == 1) { // indien de eerste foto helemaal links staat
fotoreeks += "'../pics/pijl_links2.gif";} // het grijze pijltje 
else {fotoreeks += "'../pics/pijl_links.gif' onmousedown='scrollen(" + eval(nr - 1) + ");";}; // het rode pijltje
fotoreeks += "'></td>";

for (var i = nr; i < nr + thumbs; i++) {
fotoreeks += "<td><img src='../pics/foto" + i + ".jpg' onmousedown='toon_foto(" + i + ");' height=40 width=65></td>";};
fotoreeks += "<td><img src=";
if (nr == einde) { fotoreeks += "'../pics/pijl_rechts2.gif";} // het grijze pijltje 
else {fotoreeks += "'../pics/pijl_rechts.gif' onmousedown='scrollen(" + eval(nr + 1) + ");";}; // het rode pijltje
fotoreeks += "'></td></tr></table>";
d.innerHTML = fotoreeks;}

function toon_foto (nr) {document.beeld.src = "../pics/foto" + nr + ".jpg";}
</script>

2. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina :
3. Plaats binnenin de <body>-tag: <body onload="scrollen(1)">

Instructies: Lees de commentaar in het script. De naam van de foto's wijzig je best in foto1.jpg, foto2.jpg, foto3.jpg, ... .

Copyright: Het internet is van iedereen, de volledige inhoud van deze site kan door iedereen vrij gebruikt worden.