Lightbox? Wat is dat voor een beest?

Lightbox is een techniek gebaseerd op JavaScript en CSS en wordt tegenwoordig veel gebruikt in websites om in te zoomen op een verkleinde afbeelding. Deze afbeelding kan al dan niet gekoppeld worden aan een fotoalbum. De gebruiker kan zo netjes door de afbeeldingen bladeren en geniet tegelijkertijd van een strak en modern design!

De Lightbox van nyroModal

Tegenwoordig bestaat er een heel gamma aan Lightboxes die je kan integreren in je website. Eentje daarvan is de Lightbox van nyroModal. Het leuke aan deze Lightbox is dat hij de afbeelding(en) steeds maximaal zal tonen, rekening houdend met de aangeboden scherm resolutie. Het probleem dat een ingezoomde afbeelding dus buiten beeld valt, is verleden tijd!

Hoe integreer ik deze Lightbox in mijn website?

Simpel! Doorloop onderstaande stappen en voor je het weet staat hij te blinken op je scherm.

Stap 1:
Plaats bovenaan in het head gedeelte van de html pagina waar je de Lightbox wilt integreren volgende code:

<link rel="stylesheet" href="/css/nyromodal.css" type="text/css" media="screen" />
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/jquery.nyroModal.custom.js"></script>
<script type="text/javascript">
$( function () {
   $("a.jquery-lightbox").nyroModal();
});
</script>

Via het bestandje nyromodal.css, ga je de look-and-feel bepalen van je lightbox.

Het jquery.js bestand en het nyromodal javascript (.js) bestand bevatten de code die de Lightbox nodig heeft om te kunnen functioneren.
Ten slotte laat je de methode nyroModal (afkomstig uit jquery.nyroModal.custom.js) los op alle links (a tag) die een css klasse "jquery-lightbox" hebben. Binnen deze links kan je dan je images gaan plaatsen. Dit gaat als volgt:

Stap 2.

Merk op dat een afbeelding telkens binnen een a tag geplaatst wordt. Geef elke a tag een css klasse "jquery-lightbox" mee en zet het "rel" attribuut op een unieke naam bv. "group". Op deze manier weet de Lightbox dat deze afbeeldingen tot één en hetzelfde fotoalbum behoren.

Wie de code goed bestudeerd heeft, zal zien dat de laatste twee afbeeldingen een extra styling meekrijgen nl.: "display:none". Dit heeft tot resultaat dat de eerste afbeelding als cover voor het fotoalbum gebruikt zal worden. Bij het klikken op deze afbeelding, kan je doorklikken naar de volgende twee. Laat je de styling "display:none" weg, dan zullen de thumbnails gewoon naast elkaar getoond worden, en kan je op elk van deze items inzoomen om het fotoalbum te bekijken.

<a class="jquery-lightbox" href="/images/afbeelding1.jpg" title="afbeelding1" rel="group">
    <img width="200px" src="/images/afbeelding1.jpg" alt="afbeelding1" />
</a>
<a class="jquery-lightbox" href="/images/afbeelding2.jpg" title="afbeelding2" rel="group" style="display:none;">
    <img width="200px" src="/images/afbeelding2.jpg" alt="afbeelding2" />
</a>
<a class="jquery-lightbox" href="/images/afbeelding3.jpg" title="afbeelding3" rel="group" style="display:none;">
    <img width="200px" src="/images/afbeelding3.jpg" alt="afbeelding3" />
</a>

Stap 3

Test uit! Bekijk een soortgelijk voorbeeld in actie.

Stap 4

Voetjes omhoog, relax en geniet van deze mooie toevoeging!

Ken je nog leuke lightboxen? Wat is jouw ervaring hiermee? Laat het horen in de comments!