Einfache Lightbox mit Featherlight

Eine Lightbox öffnet ein Bild in großer Ansicht über einem halbtransparenten Overlay — ohne die Seite zu verlassen.

Featherlight ist eine schlanke jQuery-Bibliothek für genau das. Einbindung: CSS + JS von CDN laden, jQuery einbinden, dann das Bild per data-featherlight-Attribut verlinken.

<!-- 1. CSS im <head> einbinden -->
<link href="...featherlight.min.css" rel="stylesheet">

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

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

Klick auf das Bild öffnet die Lightbox:

Wasserbild