</body>
Pop-up : pop-up box

Voorbeeld #7 :

pop-up die "geprojecteerd" wordt op donkere achtergrond (versie 2),
door gebruik van javascript


Werkende demo

Klik op ��n van de foto's

Babes - reeks 1

Babes - reeks 2


Werkwijze

Stap 1: Download onderstaand javascript, CSS en png en gif bestanden.

Opmerking: om de CSS, png en gif bestanden te downloaden, klik met de rechtermuisknop op het bestand en neem "bewaar bestand als".

 prototype.js
 scriptaculous.js
 lightbox.js
 effects.js
 lightbox.css
 overlay.png
 blank.gif
 loading.gif
 close.gif
 prevlabel.gif
 nextlabel.gif


Stap 2: Plaats onderstaande code tussen <head> en </head>

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />


<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox.js"></script>


Stap 3: Plaats onderstaande code tussen <body> en </body> op de plaats waar je de thumbnail (verkleinde foto) wil tonen.

<a href="benaming_foto.jpg" rel="lightbox[groepsnaam]" title="benaming">
<img src="benaming_foto.jpg" border="0" width="66" height="100"></a>

De rode tekst moet je zelf nog aanpassen.

Herhaal stap 3 voor elke nieuwe foto.


Stap 4: Upload alle bestanden naar je webserver.
Foto's, html bestand, de javascripts prototype.js, scriptaculous.js, lightbox.js, effects.js, het CSS bestand lightbox.css en de bestanden overlay.png, blank.gif, loading.gif en close.gif.


Configuratie van de javascripts.

Je moet GEEN aanpassingen aanbrengen aan de javascripts prototype.js, scriptaculous.js, lightbox.js, effects.js bestanden.


Configuratie van het CSS bestand popupbox.css

Je kan eventueel aanpassingen aanbrengen aan het lightbox.css bestand

Opgelet:
Wijzig ENKEL de groene tekst en laat de rest zoals het is.
Heb je wijzigingen aangebracht, bewaar het bestand dan terug als popupbox.css

Open het bestand popupbox.css in bv. kladblok.

Je krijgt nu de volgende code te zien:

#lightbox{
position: absolute;
top: 40px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #000000;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 140%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(extlabel.gif) right 15% no-repeat; }


#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #000000;
margin: 0 auto;
line-height: 1.4em;
}

#imageData{
padding:0 10px;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

* html>body .clearfix {
display: inline-block;
width: 100%;
}

* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}
 


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