15 Lightbox-Bibliotheken für mobiles Reaktionsverhalten

Lightbox ist ein beliebter Weg zu Überlagern von Bildern im Web. Wenn Sie auf ein Bild klicken, wird die Lightbox mit einer Form von Animation angezeigt und der Hintergrund wird so verkleinert, dass der Fokus auf dem Bild selbst liegt. Das Bild ist auch größer. Mit den beliebtesten Lightbox-JavaScript-Bibliotheken, die wir seit Jahren kennen, können Sie dies auf Desktop-Computern gut tun, auf mobilen Plattformen jedoch weniger.

Dies zu vernachlässigen und das Bedürfnis nach Reaktionsfähigkeit ist heutzutage keine gute Idee, weshalb diese Sammlung von 15 responsiven Lightbox-Bibliotheken ausgecheckt werden muss.

Mehr zu Hongkiat:

• Modales Fenster einfach mit dem HTML5-Dialog erstellen
• Top 10 kostenlose Responsive Bildergalerien / Diashows
• Erstellen, steuern und anpassen Sie mit Vex ein besseres modales Fenster für Ihre Site
• jQuery Bildergalerien & Schieberegler - Best Of

PhotoSwipe

PhotoSwipe ist bei weitem mein liebstes ligthbox plugin. Es ist leicht, berührungsempfindlich und vor allem modular, sodass ich einige Teile abgraben kann, die nicht benötigt werden. Es läuft gut in mobilen Browsern. Sie können mit den Fingern wie in einer nativen App durch die Bilder streichen, und der Übergang verläuft reibungslos.

• Abhängigkeit: Keiner
• Browser-Unterstützung: IE8 +, Chrome, Firefox, Safari, Opera und einige mobile Browser.
• Lizenz: MIT-Lizenz

MagnificPopup

MagnificPopup ist ein weiteres Leuchtkasten-Plugin, das von derselben Person entwickelt wurde, die uns PhotoSwipe, Dmitry Semenov, zur Verfügung gestellt hat. Es kommt in Form eines jQuery / Zepto-Plugins und enthält auch Funktionen, die in PhotoSwipe fehlen, z. B. Unterstützung für Video-, Map- und Ajax-Inhalte. Dies ist eine großartige Alternative für diejenigen, die mehr Funktionen zur Hand haben möchten.

• Abhängigkeit: jQuery 1.9.1+ oder Zepto.js
• Browser-Unterstützung: IE7 (teilweise), IE8 +, Chrome, Firefox, Safari und Opera.
• Lizenz: MIT-Lizenz

SwipeBox

Swipebox ist ein jQuery-Plugin mit Touch-Gesten-Unterstützung für mobile Plattformen. Es unterstützt neben Videos auch Videos von Youtube und Vimeo. Swipebox lässt sich außerdem ganz einfach implementieren und bietet eine Reihe von Optionen zur Anpassung des Verhaltens. Ich denke, Swipebox ist ein tolles Leuchtkasten-Plugin für JavaScript-Noobs.

• Abhängigkeit: jQuery
• Browser-Unterstützung: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android und Windows Phone.
• Lizenz: Nicht definiert

iLightbox

iLighbox ist ein jQuery-Lightbox-Plug-In, das eine breite Palette von Medientypen unterstützt: Videos, Flash / SWF, Ajax-Inhalte, Iframe und Karten. Dieses Plugin fügt außerdem Social Media-Schaltflächen über den Medien hinzu, sodass Ihre Benutzer sie auf Facebook, Twitter oder Reddit freigeben können. Lesen Sie auch den erweiterten Abschnitt, um zu erfahren, wie iLightbox in verschiedenen Szenarien angewendet werden kann.

• Abhängigkeit: jQuery
• Browser-Unterstützung: IE7 +, Chrome, Firefox, Safari und Opera
• Lizenz: Nicht definiert

Lightbox für Bootstrap

Lightbox ist eines der auffallend fehlenden Stücke von Bootstrap. Dieses Plugin behebt das. Wenn Sie Bootstrap verwenden, empfehle ich dringend, diese Bibliothek zu verwenden. Das Plugin ist gut in die Code-Base von Bootstrap integriert.

• Abhängigkeit: jQuery und Bootstrap Modal
• Browser-Unterstützung: IE8 +, Chrome, Firefox, Safari und Opera
• Lizenz: GNU-Lizenz

Nivo Lightbox

Nivo Lightbox ist ein flexibles Leuchtkasten-Plugin. Es gibt verschiedene Optionen, um das Erscheinungsbild in die gewünschte Weise zu ändern, z. B. das Thema, den Übergangseffekt und die Navigation.

• Abhängigkeit: jQuery
• Browser-Unterstützung: IE9 +, Chrome, Firefox, Safari und Opera
• Lizenz: MIT-Lizenz

ImageLightbox

ImageLightbox ist ein lightbox-plugin ohne aufblasen. Es wurde speziell für Bilder erstellt, daher der Name - keine Videos oder andere Medientypen werden unterstützt. Es erfordert auch keine überflüssige HTML-Markierung. das Element ist ausreichend. Das Plugin funktioniert einfach.

• Abhängigkeit: jQuery
• Browser-Unterstützung: IE9 +, Chrome, Firefox, Safari und Opera
• Lizenz: Nicht definiert

Mini-Lightbox

Ein weiteres Leuchtkasten-Plugin ohne Aufblasen. Die Bibliothek ist nur 2 KB groß und funktioniert nur mit Bildern. Es ist das perfekte Plugin, wenn Sie nur den neuesten Browser verwenden und keine anderen Medientypen wie Videos überlagern müssen.

• Abhängigkeit: Keiner
• Browser-Unterstützung: IE10 +, Chrome, Firefox, Safari und Opera
• Lizenz: MIT-Lizenz

LightCase

Lightcase ist ein schönes Lightbox-Plugin. Es gibt verschiedene Animationen, die die Benutzerinteraktion zum Leben erwecken, wie Überblenden, elastisches Zoomen und Scrollen. Darüber hinaus werden verschiedene Arten von Medien unterstützt, darunter Youtube-Einbettung, HTML-Videos, SWF und Eingabeformulare. Das Plugin behandelt auch Medien, auf die Fehler nicht gefunden werden können

• Abhängigkeit: jQuery
• Browser-Unterstützung: IE9 +, Chrome, Firefox, Safari und Opera
• Lizenz: GPL-Lizenz

Yalb

Yalb steht für Yet Another Lightbox - ist es aber nicht. Yalb enthält eine Handvoll APIs, einschließlich benutzerdefinierter Ereignisse, mit denen Sie Lightbox-Status ermitteln können, z. B. wann dies der Fall ist öffnen und wann ist es schließen. Yalb ist in zwei Versionen erhältlich: Vanilla JavaScript und jQuery Plugin.

• Abhängigkeit: Keiner
• Browser-Unterstützung: IE9 +, Chrome, Firefox, Safari und Opera
• Lizenz: MIT-Lizenz

Federleicht

Die 6kb Federleicht ist ein nacktes Plugin für versierte Entwickler und enthält nur das Nötigste. Wenn Sie beispielsweise eine Bild-Lightbox in einer Galerie gruppieren möchten, können Sie die Galerieerweiterung hinzufügen. Sie können auch eine eigene Erweiterung für dieses Plugin entwickeln, die zu Ihren Projektanforderungen passt.

• Abhängigkeit: jQuery
• Browser-Unterstützung: IE8 +, Chrome, Firefox, Safari und Opera
• Lizenz: MIT-Lizenz

Lichtschicht

LightLayer ist ein einfach zu verwendendes Lightbox-Plugin. Es verfügt über eine Handvoll Optionen, benutzerdefinierte JavaScript-Methoden und benutzerdefinierte Ereignisse. Das Plugin funktioniert mit Bildern, Videos, Karten und externen Inhalten. Was können wir mehr fragen?.

• Abhängigkeit: jQuery
• Browser-Unterstützung: IE9 +, Chrome, Firefox, Safari und Opera
• Lizenz: MIT-Lizenz

Lichtgallerie

Lichtgallerie, ein weiteres Leuchtkasten-Plugin mit vielen zusätzlichen Funktionen. Mit mehr als 20 Optionen können Sie die kleinsten Details der Lightbox anpassen.

• Abhängigkeit: jQuery
• Browser-Unterstützung: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android und Windows Phone
• Lizenz: MIT-Lizenz

FluidBox

Fluidbox ist ein Image-Lightbox-Plugin, das von Medium inspiriert ist. Es funktioniert mit Bildern unter verschiedenen Umständen, einschließlich Floating Image, Image with absolut Position, Bilder mit Umrandung und Auffüllung sowie Galerien. Schauen Sie sich an, wie es gebaut wurde. Wenn Sie ein WordPress-Plugin benötigen, gibt es eines.

• Abhängigkeit: jQuery
• Browser-Unterstützung: IE9 +, Chrome, Firefox, Safari, Opera
• Lizenz: MIT-Lizenz

StripJS

StripJS ist ein einzigartiges Leuchtkasten-Plugin. Anstatt das Bild zu überlagern, schiebt das Plugin die Bilder stattdessen von der Seite ein, sodass der gesamte Inhalt nicht blockiert wird. StripJS unterstützt sowohl Bilder als auch Videos.

• Abhängigkeit: jQuery
• Browser-Unterstützung: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ und Android 3+
• Lizenz: Creative Commons BY-NC-ND 3.0 Lizenz