DNS4 

CSS
PHP-CSS lightbox

Klik op het plaatje
van de Hummer

Deze lightbox maakt op geen enkele manier gebruik
van JavaScript. Doordat alles server-side wordt
geregeld, zal deze lightbox altijd, op elk moment,
en in alle browsers voorbeeldig zijn werk doen.

Voor deze procedure wordt gebruik gemaakt van een
stylesheet switcher. Als de pagina geladen wordt
is de default stylesheet van kracht. Het plaatje
wordt geladen in de cache. Doordat in de stylesheet
display:none; is gesteld, is het plaatje niet zichtbaar.
Met een PHP routine wordt van stylesheet gewisseld.
Hierdoor wordt het mogelijk om aan de div van het plaatje
display:block; mee te geven. Omdat het plaatje al in de
cache zit, zal het ogenblikkelijk tevoorschijn komen.

Maak eerst de twee CSS files lightbox_gedimd.css en
lightbox_helder.css. Vervolg met de twee PHP files
die de stylesheet veranderen, respectievelijk
box_dimmen.php en box_helder.php.
De html van het deze pagina (lightbox.html) is te vinden
in deze file en tot slot is zijn hier de lightbox.png
en de glans.png.

Zet alle files op de goede plek en pas de verwijzingen van
de files in jouw website en directory-structuur aan.
Vergeet niet om de http://www.dns4.nl/pagina/css/standaard.css
die voor de meeste voorbeelden gebruikt wordt om een standaard
pagina voor de voorbeelden te maken, op jouw website te zetten.

♥
♦
♠
♣
←
↑
↓
↔

De titel van deze pagina is: 'PHP lightbox met alleen CSS'.
De sleutelwoorden zijn : lightbox,css,php,script.
De omschrijving is: 'een lightbox ZONDER JavaScript: alleen PHP en CSS!'.