Zum Inhalt

baguetteBox – Eine reine JavaScript Lightbox für Bilder

Wer auf seiner Webseite Bilder oder Grafiken einbindet, kann nicht immer die volle Größe verwenden. Das sprengt regelrecht das Design. Genau deswegen werden Bilder verkleinert eingebunden. Das hat den Nachteil, dass der Besucher nur ein kleines Bild sieht. Als Lösung verwenden die meisten Designer sogenannte Lightbox Plugins. Das Bild wird verkleinert eingebunden, beim Klick auf das Bild vergrößert sich die Ansicht in einem Modal. So schlägt man zwei Fliegen mit einer Klappe.

Einen sehr interessanten Ansatz macht hierbei das Lightbox Script baguetteBox.js. Anders als die großen Lightbox Plugins wie lightbox2, featherlight oder fancybox kommt baguetteBox.js ganz ohne Abhängigkeiten aus. Das Script ist in JavaScript geschrieben und benötigt weder jQuery noch lodash. Als nettes Feature berücksichtigt diese Lightbox verschiedene Bildgrößen. Anhand von data-Attribute im <a>-Link Tag wird die richtige größe geladen:

<a href="img/2-1.jpg"
    data-at-450="img/thumbs/2-1.jpg"
    data-at-800="img/small/2-1.jpg"
    data-at-1366="img/medium/2-1.jpg"
    data-at-1920="img/big/2-1.jpg">
        <img src="img/thumbs/2-1.jpg">
</a>

Für die Darstellung der Lightbox stehen mehrere Optionen zur Verfügung. Diese sind auf der Github Projektseite dokumentiert. Das Script steht unter MIT Lizenz und wird aktiv entwickelt. Es gibt mehrere Wege um baguetteBox.js einzubinden:

npm

npm install baguettebox.js --save

yarn

yarn add baguettebox.js

bower

bower install baguettebox.js --save

Manuell über ein CDN

cdnjs.com/libraries/baguettebox.js

Share This:

Published inOpen SourceWeb Tipp

Schreibe den ersten Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.