Plaatjes in een pop-up (Lightbox)

Met een Lightbox javascript kun je op plaatjes klikken voor een vergroting. In WordPress hoef je alleen een plugin (bijvoorbeeld Easy Fancybox) aan te zetten. In een HTML-site kan je het handmatig doen, als volgt:

Maak een map “ima” en zet daarin de grote plaatjes. Max 1200px, via Photoshop > Save for Web (⌘-Alt-Shift-S). In de map ima zet je nog een map “lr” met de dezelfde plaatjes, maar dan klein: 200px bij 200px, via Photoshop > Crop (links-boven in de Opties afstellen). Dan weer Save for Web. Meer info over plaatjes voor Web.

Zet het kleine lr-plaatje in portfolio.html, op de goede plek (Invoegen > Image). Maak daar een link van naar het grote hr-plaatje (via de Eigenschappen). En dan de Lightbox:

1. Plak dit in de HTML, achter <head>
<link href="http://gameschool.nl/css/lightbox.css" rel="stylesheet">
2. Plak dit 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 deze groene tekst toe, tussen  “<a “   en “href”
<a 
 data-lightbox="groep1" data-title="Je tekst" 
href="ima/1.jpg" >
<img src="ima/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 die data-title.

Kopieer dan het hele stukje 8x en verander telkens de details.

Bonus-tip: extra styling + animatie op de hover

Wil je meer styling op de kleine plaatjes, bijvoorbeeld afgeronde hoeken en/of een animatie op de Hover? Zet dan extra CSS neer.

.gallery img {border-radius:10px; transition:all 0.5s}
.gallery img:hover {transform: scale(1.2) rotate(10deg);}

Ook de pop-up zelf, en de tekst daarin kun je verder stylen met CSS. 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.

CSS modals met :target

Met de nieuwe :target in CSS3 kun je ook Modals maken: dat zijn pop ups die hetzelfde doen als Lightbox. Maar dan zonder Javascript, dus puur in HTML/CSS. Zie hier 3 voorbeelden.