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.

★ Open dom/toep_lightbox.html.

Elke thumbnail opent een grote afbeelding in hetzelfde browservenster. Ziehier de HTML-code voor één van de afbeeldingen:

<p>
    <a class="lightbox" href="../assets/fotos/anjer.jpg">
        <img src="../assets/fotos/thumb_anjer.jpg" width="100" height="100" alt="anjer">
    </a>
    ...
</p>

★ Pas het script als volgt aan:

$('a.lightbox').click(function(e){ 
    e.preventDefault();
    $('<div id="overlay"></div>').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.

<style>
#overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(255,255,255,.7) url(../assets/pixel.png) no-repeat center center;
}
</style>

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.

★ Klik op één van de afbeeldingen.

De overlay komt tevoorschijn, maar we kunnen hem nog niet laten verdwijnen.

★ Voeg onderstaande code toe en bekijk het resultaat in een browser.

$('a.lightbox').click(function(e){ 
    e.preventDefault();
    $('<div id="overlay"></div>').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().

Omdat div#overlay een dynamisch gegenereerd element is, kunnen we het click-event niet rechtstreeks aanspreken via $('#overlay').click(...).

Als laatste gaan we de vergrote foto binnen het document openen. Hiervoor gaat u het click-event op de thumbnails vervolledigen.

★ Voeg volgende code toe:

$('a.lightbox').click(function(e){ e.preventDefault();
    e.preventDefault();
    $('<div id="overlay"></div>').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.