Einfache Lightbox mit Fancybox

Fancybox ist eine funktionsreichere Alternative zu Featherlight. Sie wird über das Attribut data-fancybox am Link aktiviert.

<!-- 1. CSS + JS von cdnjs.cloudflare.com einbinden -->
<link rel="stylesheet" href="...jquery.fancybox.min.css">

<!-- 2. Link mit data-fancybox-Attribut -->
<a data-fancybox="image" href="img/bild-gross.jpg">
  <img src="img/bild-thumb.jpg" alt="Vorschau">
</a>

<!-- 3. jQuery + Fancybox JS am Ende des <body> -->
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="...jquery.fancybox.min.js"></script>

Klick auf das Bild öffnet die Lightbox:

Wasserbild