Voorbeeld #8 :
pop-up album door gebruik van javascript
Werkende demo met foto
Klik op de foto
Werkwijze
Stap 1:
Dit bestaat uit 2 html bestanden:
- het html bestand waarin je verwijst naar de pop-up foto-album.
- het pop-up foto-album bestand waar de foto's staan.
Stap 2: Plaats onderstaande code tussen <head> en </head>
<script
language="JavaScript">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" +
id + "',
'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=405,height=660,left
= 447.5,top = 295');");
}
// End -->
</script>
De rode tekst moet je zelf nog aanpassen.
Hier bepaal je de breedte (width) en de hoogte (height) van de pop-up foto-album.
Dit is dus afhankelijk van de grootte van je te tonen foto's
Stap 3:
a- je wil een thumbnail (kleine foto) link
Plaats onderstaande code tussen <body> en </body> op de plaats waar
je de thumbnail (verkleinde foto) wil tonen.
<a href="javascript:popUp('popup_with_album_popup.html')">
<img src="benaming
eerste_foto.jpg"
align=0 border="0" width="66"
height="100"></a>
De rode tekst moet je zelf nog aanpassen.
De groene tekst kan je eventueel nog aanpassen.
b- je wil een tekst link
Plaats onderstaande code tussen <body> en </body> op de plaats waar
je de thumbnail (verkleinde foto) wil tonen.
<a href="javascript:popUp('popup_with_album_popup.html')">
Schrijf hier je tekst</a>
De rode tekst moet je zelf nog aanpassen.
De groene tekst kan je eventueel nog aanpassen.
Stap 5:
We maken nu het popup_with_album_popup.html bestand aan.
Open een nieuw bestand in bv. kladblok en copieer onderstaande code.
<html>
<head>
<title>Popup-Album</title>
<script language="JavaScript">
var slide = new Array();
slide[0] = "benaming_foto1.jpg";
slide[1] = "benaming_foto2.jpg";
slide[2] = "benaming_foto3.jpg";
slide[3] = "benaming_foto4.jpg";
slide[4] = "benaming_foto5.jpg";
slide[5] = "benaming_foto6.jpg";
slide[6] = "benaming_foto7.jpg";
slide[7] = "benaming_foto8.jpg";
slide[8] = "benaming_foto9.jpg";
slide[9] = "benaming_foto10.jpg";
var current = 0;
function advance(){
current++;
if(slide[current]){document.images.show.src
= slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+':
'+slide[current];}
}
function retract(){
current--;
if(slide[current]){document.images.show.src
= slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+':
'+slide[current];}
}
</script>
</head>
<body bgcolor="#000000">
<div align="center">
<table height="100%">
<tr>
<td>
<form name="formname">
<table cellspacing=1 cellpadding=1 bgcolor="#000000">
<tr><td colspan=2 align=center bgcolor="#808080">
<font face="arial" color="#FFFFFF"><b>Fotoboek</b></font>
</td></tr>
<tr>
<td colspan=2 align=center bgcolor="#808080">
<img src="benaming
eerste foto.jpg" name="show"
width="294" height="450"></td></tr>
<tr><td align=center bgcolor="#808080"
height="30" width="50%">
<input type=button onclick="retract();"
value="<< vorige">
</td><td align=center bgcolor="#808080"
height="30" width="50%">
<input type=button onclick="advance();"
value="volgende >>">
</td>
</tr>
<tr>
<td colspan="2" align="center"><br><form>
<input type=button value="Sluit Fotoboek"
onClick="javascript:window.close();">
</form>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
De rode tekst moet je zelf nog aanpassen.
De waarde van de paarse tekst moet je bij elke nieuwe foto met 1 verhogen. (Je begint met waarde 0)
m.a.w. de eerste foto heeft waarde slide[0], de tweede foto
slide[1]. de derde foto slide[2], enz...
Bewaar dit bestand onder de naam
popup_with_album_popup.html.
Stap 6:
Upload alle bestanden naar je webserver.
Foto's, de 2 html bestanden
|
OVERWEEG EEN DONATIE
Ben je tevreden over de gegeven informatie dan kan je als blijk van waardering voor de aangeboden hulp
steeds een donatie overwegen. Dit om de aangeboden hulp ook in de toekomst te kunnen blijven garanderen. Alvast bedankt. Webmaster |