</body>
Pop-up met commentaar

Voorbeeld #8 :

pop-up album door gebruik van javascript



Werkende demo met foto

Klik op de foto

 


Werkende demo met tekst

Klik op de tekst

 

Bekijk de foto's


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