Image Lightbox ist eine minimalistische Lightbox mit responsive Design und Touch Unterstützung.
Lightbox Scripts sind perfekt um Bilder bzw. Bildergalerien darzustellen, deshalb gibt es gefühlt 1000 verschiedene Lightbox Scripte, die mehr und minder gut sind. Lightbox ist eins davon den positiven Lösungen.
Hier eine kurze Auflistung der Vorteile:
- Minimalistisch (nur 4KB groß und keine default Styles)
- Responsive und Touch freundlich
- iOS, Android und Windows Phone support
- Konfigurierbar
- jQuery 1.x & 2.x kompatibel
- Keyboard Interaktionen
Um Lightbox zu verwenden ist nicht viel nötig. Da es aber als jQuery Plugin gebaut worden ist, ist jQuery auch vorrausgesetzt. Ist das Script eingebunden kann es auch schon los gehen.
HTML
Es wird kein kompliziertes Markup benötigt. Nur ein <img> Tag für das Thumbnail und ein Anker für das richtige Bild
<a href="picture_big.jpg" class="lightbox">
<img src="picture_thumbnail.jpg" />
</a>CSS
Da es keine Default Styles gibt müssen wir diese selbst vornehmen:
#imagelightbox {
position: absolute;
z-index: 9999;
}Javascript
Jetzt kommen wir zu dem wichtigsten Part. Das initialisieren des jQuery Plugins:
<script src="jquery.js"></script>
<script src="imagelightbox"></script>
<script>
$(function() {
$('a.lightbox').imageLightbox();
});
</script>Zusätzlich kannst du mit einer Reihe von Parametern die Lightbox noch konfigurieren und auf deine Bedürfnisse einpassen. Auf der offiziellen Seite kannst du alles noch mal genau nachlesen und dir das Script runterladen.