Plaatjes in een pop-up (Lightbox)

Met een Lightbox-script kun je op plaatjes klikken voor een vergroting. In WordPress hoef je alleen de plugin aan te zetten. In een HTML-site kan het als volgt:

Maak een map hr en zet daarin de grote plaatjes. Die zijn bijv 1200px, via Photoshop > Save for Web (⌘-Alt-Shift-S). In een map lr zet je de kleine plaatjes. Die zijn bijv 200 x 200 px, via Photoshop > Crop (links-bovenaan in de Options Bar afstellen). Dan weer Save for Web. En dan:

1. Zet de Lightbox-CSS in de <head> vlak boven je eigen CSS
<link href="http://gameschool.nl/css/lightbox.css" rel="stylesheet">
2. Zet deze 2 scripts onderaan, vlak voor </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://gameschool.nl/js/lightbox.min.js"></script>
3. Voeg data-lightbox en data-title toe, aan de links om de plaatjes

Of kopieer dit hele zwikje voor 1 plaatje, en herhaal dat dan telkens:

<a href="hr/1.jpg" data-lightbox="groep1" data-title="Hier je tekst">
<img src="lr/1.jpg" width="200" height="200" alt=""/></a>

In een groep plaatjes (waar je met de pijltjestoetsen doorheen kan) gebruik je telkens dezelfde waarde bij data-lightbox. Bijschriften kan je per plaatje doen met data-title.

Onder het script kun je nog opties toevoegen zoals:
<script>
   lightbox.option({
   'resizeDuration': 400,
   'showImageNumberLabel': true,
   'fadeDuration':400,
   })
</script>
Bonus-tip: extra styling, + animatie op de hover
.gal img {border-radius:10px; transition:all 0.5s}
.gal img:hover {transform: scale(1.2) rotate(10deg);}

Zie hier een voorbeeld, en zie meer uitleg op de website van Lightbox2. Er zijn ook nog andere lightbox-scripts. Fancybox heeft ook video, Poptrox is ook een goede, Fresco is responsive (maar zonder swipe), en dan is er Photoswipe, die kan ook fullscreen swipen. Die kun je ook op andere manieren gebruiken, zie bijvoorbeeld bodarglas.nl waar het een achtergrondslider op de homepage is, of aartjan.nl/mag waar het een standalone App wordt, ofwel een eenvoudige ePub of iPad-magazine. Extra info en opties.