Lightbox für das Responsive-Theme. Gratis.

Exklusiv für das eComStyle.de Responsive Theme steht das Modul „Lightbox“ gratis zur Verfügung. Sie haben die Wahl aus 4 hochwertigen, performanceoptimierten Lightboxen und einer Mauslupe, um Ihre Artikelbilder ins rechte Licht zu rücken.

Standard: Lightbox mit Bootstrap:

Standardmäßig kommt das eComStyle.de Responsive Theme ganz ohne zusätzliche jquery-Lightbox aus.
Allein mit Bootstrap-Boardmitteln wurde eine umfangreiche Bildanzeige mit Zoomfunktion, basierend auf dem Bootstrap Modal-Popup und dem Bootstrap Carousel-Slider erstellt, die, ähnlich wie eine Lightbox, den Hintergrund abdunkelt und das Zoombild in einen eigenen Fenster in den Vordergrund rückt. In diesem Fenster bestehen intuitive, komfortable Navigationsmöglichkeiten durch die Artikelbilder.
Die integrierte Lösung erfordert keine zusätzlichen, externen Jquery-Bibliotheken oder CSS-Dateien, da alles Erforderliche vom Bootstrap-Framework bereitgestellt wird.

Alternativen im kostenlosen Modul:

Trotz der hervorragenden Standardlösung können Sie durch der Einsatz einer externen Jquery-Lightbox den Funktionsumfang sinnvoll erweitern und natürlich auch Ihren Shop individueller gestalten.

Mit dem exklusiven Modul „Lightbox“, welches dem eComStyle.de Responsive Theme kostenfrei beiliegt, stehen derzeit 4 verschiedene, zusätzliche Lightboxen sowie eine zusätzlich aktivierbare Mauslupe zur Wahl.
Nach dem Hochladen kann in den Moduleinstellungen eine Lightbox ausgewählt werden, die dann automatisch im Shop integriert wird. Wahlweise wird auch ein Back-to-Top-Button im Shop integriert.

Auch für TOXID- und CMS-Inhalte geeignet:

Die jeweilige Lightbox kann auf jeder Seite des Shops genutzt werden. Wird zusätzlicher Content mithilfe von TOXID integriert, werden auch dessen Bilder in der Lightbox angezeigt. Außerdem erfolgt eine automatischen Gruppierung aller Bilder einer Seite, d.h. dass zB. durch alle Bilder einer Artikel- oder Content-Seite bequem in der Lightbox navigiert werden kann, ohne die Lightbox zu schließen.

Lightbox2 – Das Original:

Das originale Lightbox-Script existiert bereits seit über 8 Jahren und wird noch immer regelmäßig gepflegt und stetig weiterentwickelt.
Es existiert eine große Community, die sich aktiv an der Entwicklung bei GitHub beteiligt. Die Bedienung ist für den Besucher intuitiv und selbsterklärend, neben den seitlichen Navigationspfeilen können auch die Pfeiltasten auf der Tastatur zum Bilderwechsel verwendet werden. Unter der Lightbox werden Bildname und Bildanzahl angezeigt.

Fancybox2 – Der Klassiker:

Hierbei handelt es sich vermutlich um die meistgenutzte Lightbox-Alternative mit umfangreichen Funktionsumfang. Viele Ein- und Ausblendeffekte, Autoplay, sowie Gestaltungsmöglichkeiten der Lightbox, zB. mit Tumbnails sind möglich.
Als auffälligstes Feature ist der integrierte Mousewheel-Support zu nennen. Dies ermöglicht einen besonders komfortablen Bilderwechsel mit dem Mausrad.
Auch die Fancybox2 wird aktiv auf GitHub entwickelt und erfreut sich einer großen Fangemeinde. In Kürze wird die Version 3 der Fancybox erscheinen, die dann auch Touch-Support beinhalten soll.

Nivo-Lightbox – Vom Hersteller des Nivo-Sliders:

Während der Nivo-Slider aufgrund seiner vielen schönen Effekte, der leichten Integrationsmöglichkeit und seiner geringen Dateigröße, schon beinahe zum Standard-Bilderslider im Web geworden ist, ist die Nivo-Lightbox noch relativ unbekannt. Aber auch bei der Nivo-Lightbox handelt es sich um eine hervorragende, leichtgewichtige Lightbox, die einfach integriert werden und intuitiv mit der Pfeilnavigation oder der Tastatur bedient werden kann.
Auch bei dieser Lightbox-Alternative kann die Entwicklung auf GitHub verfolgt werden. Die Nivo-Lightbox ist noch sehr neu (Version 1 wurde Ende 2013 veröffentlicht). Zweifellos handelt es hierbei um ein sehr interessantes Projekt, das schon jetzt bestens funktioniert und sicher in den nächsten Monaten noch weiter optimiert und mit neuen Features ausgestattet werden wird.

Magnific Popup:

Ebenfalls eine hervorragende Alternative ist diese beliebte Lightbox aufgrund der extrem geringen Größe und der Optimierung für responsives Webdesign, insb. auch für kleine Displaygrößen wie zB. Smartphones. Auf kleinen Displays wird die gesamte Displaybreite für die Bilddarstellung genutzt. Die Lightbox wurde strikt performanceoptimiert und verwendet zB. schnelle CSS3 Transitions zum ein- und ausblenden und Progressive Loading (Bilder werden von oben nach unten geladen und bereits angezeigt, bevor sie vollständig geladen sind). Insgesamt vermittelt diese Lightbox die (gefühlt) beste Performance.
Wie die anderen vorgestellen Lightboxen wird auch diese bei GitHub entwickelt und erfreut sich einer großen Fangemeinde, die sich aktiv an der Entwicklung beteiligt.

 

 

elevateZoom (Mauslupe):

Beim elevateZoom handelt es sich um eine Mauslupe, wie sie jeder aus dem OXID Standardtheme Azure kennt. Beim Überfahren eines Artikelbildes wird der jeweilige Ausschnitt in der Lupe vergrößert dargestellt. Die Größe richtet sich nach dem verfügbaren „Masterbild“. Mit einen Mausklick an beliebiger Stelle im Bild kann die Lightbox geöffnet werden.
Der elevateZoom ist unabhängig vom gewählten Lightboxtyp zusätzlich aktivierbar.

Moduleinstellungen:

Im den Moduleinstellungen besteht die Option, die automatische CSS-Integration zu deaktivieren. Sie können dann die benötigten CSS selbst in Ihr Shoptheme integrieren und sparen damit das Laden einer extra CSS-Datei für die Lightbox. Diese einfache Optimierung wird i.d.R. mit einen Extra-Punkt Pagespeed belohnt.

Ein Back-to-Top-Button mit Smooth-Scroll-to-Top ist in den Moduleinstellungen aktivierbar. Falls gewünscht, wird dieser auf kleinen Displays nicht eingeblendet, um keinen Platz zu verschwenden.
Es besteht außerdem die Möglichkeit, die Lightbox nur im TOXID-Bereich zu aktivieren. Dies ist sinnvoll in OXID eShop mit TOXID-Integration, in denen der Standard-Bilderzoom bei den Produkten beibehalten werden soll, für TOXID jedoch noch eine Lightbox benötigt wird.
Als letzte Moduleinstellung ist die Zoom-Linse elevateZoom aktivierbar,

Modul beziehen:

Dieses Modul liegt exklusiv dem eComStyle.de Responsive Theme kostenlos bei.

Lightbox für Azure und sonstige Themes:

Für Azure und alle auf Azure basierenden Themes stehen die Module Lightbox2OXID und Fancybox2OXID zur Verfügung Bei Fragen zu den Modulen und zur Installation können Sie gerne unser neues Supportforum nutzen: Supportforum

Bearbeiten