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 |