Lightbox-Galerie mit Fancybox

Mehrere Bilder als Galerie — durch Klick auf ein Thumbnail öffnet es sich in der Lightbox; mit den Pfeilen kann durch alle Galeriebilder navigiert werden.

Der Trick: alle Links teilen denselben Wert im data-fancybox-Attribut. Fancybox erkennt so, dass sie zusammengehören.

<!-- Im <head> der Seite das CSS einbinden: -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css">

<!-- Alle Links mit demselben data-fancybox-Wert = eine Galerie -->
<div id="myFB">
  <a data-fancybox="gallery" href="img/bild1-gross.jpg">
    <img src="img/bild1-thumb.jpg" alt="Bild 1">
  </a>
  <a data-fancybox="gallery" href="img/bild2-gross.jpg">
    <img src="img/bild2-thumb.jpg" alt="Bild 2">
  </a>
</div>

<!-- Vor dem schließenden </body> auf der Seite das JS einbinden: -->
<script src="https://code.jquery.com/jquery-latest.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js" ></script>
 
Wasserbild Wasserbild Wasserbild Wasserbild