> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/8-dom-manipulatie/toepassing-1-lightbox.md).
# Toepassing 1: lightbox
Om een afbeelding groter weer te geven zonder een nieuw venster te openen, gebruiken meer en meer sites een *lightbox-effect*. De grote afbeelding verschijnt dan binnen het actieve venster. Ook jQuery kent verschillende plug-ins om dit effect te bekomen, maar in deze oefening gaan we zelf een eenvoudige lightbox ontwerpen.
{% hint style="success" %}
★ Open **dom/toep\_lightbox.html**.
{% endhint %}
Elke thumbnail opent een grote afbeelding in hetzelfde browservenster. Ziehier de HTML-code voor één van de afbeeldingen:
```markup
...
```
{% hint style="success" %}
★ Pas het script als volgt aan:
{% endhint %}
```javascript
$('a.lightbox').click(function(e){
e.preventDefault();
$('').fadeIn('slow').appendTo('body');
});
```
`e.preventDefault()` blokkeert de links op de thumbnails. Vervolgens gaan we een extra div-tag met id *#overlay* aan de body-tag toevoegen.
De overlay eigenschappen staan volledig in CSS beschreven.
```markup
```
*div#overlay* heeft een breedte en hoogte van 100%. De achtergrondkleur is volledig wit, maar 70% transparant. De div-tag staat absoluut gepositioneerd en heeft een z-index van 100. De z-index zorgt ervoor dat de div-tag boven alle andere elementen uitstijgt en het volledig scherm met een witte, deels transparante, waas bedekt.
{% hint style="success" %}
★ Klik op één van de afbeeldingen.
{% endhint %}
De overlay komt tevoorschijn, maar we kunnen hem nog niet laten verdwijnen.
{% hint style="success" %}
★ Voeg onderstaande code toe en bekijk het resultaat in een browser.
{% endhint %}
```javascript
$('a.lightbox').click(function(e){
e.preventDefault();
$('').fadeIn('slow').appendTo('body');
});
$('body').on('click', '#overlay', function(){
$('#overlay').fadeOut('slow', function(){
$(this).remove();
$('body').css('overflow', 'auto');
});
});
```
Door op *div#overlay* te klikken verdwijnt de div-tag langzaam uit beeld. Na de animatie wordt de div-tag volledig verwijderd via `remove()`.
{% hint style="danger" %}
Omdat `div#overlay` een dynamisch gegenereerd element is, kunnen we het click-event niet rechtstreeks aanspreken via `$('#overlay').click(...)`.
{% endhint %}
Als laatste gaan we de vergrote foto binnen het document openen. Hiervoor gaat u het click-event op de thumbnails vervolledigen.
{% hint style="success" %}
★ Voeg volgende code toe:
{% endhint %}
```javascript
$('a.lightbox').click(function(e){ e.preventDefault();
e.preventDefault();
$('').fadeIn('slow').appendTo('body');
var fotoURL = $(this).attr('href');
$('#overlay').css('background-image', 'url(' + fotoURL + ')');
$('body').css('overflow', 'hidden'); // Verberg scrollbars
});
```
Het pad naar de grote afbeelding vinden we in het href-attribuut van de link. Dit pad bewaren we in de variabele *fotoURL*. Vervolgens vervangen we de achtergrondafbeelding (de preloader) van de overlay door de foto uit *fotoURL*.
De laatste codelijn zorgt ervoor dat eventuele scrollbalken op het browservenster verdwijnen.
...