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="https://rocstudent.nl/ftp/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="https://rocstudent.nl/ftp/js/lightbox.min.js"></script>
3. Plak de groene code achter de “a” bij elke plaatjes-link:
<a data-lightbox="groep1" data-title="Je tekst" href="ima/1.jpg" > <img src="ima/lr/1.jpg" width="200" height="200" alt=""/></a>
“groep1” is een groep plaatjes waar je met de pijltjestoetsen doorheen kan. Bijschriften moet je per plaatje aanpassen: met die data-title.
Kopieer dan het hele stukje 9x 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.