Advertisement
  1. Code
  2. JavaScript

Die besten kostenlosen Open-Source JavaScript Fotogalerien

Scroll to top
Read Time: 6 min

German (Deutsch) translation by Mehmet Kocak (you can also view the original English article)

Bilder sind ein wichtiger Bestandteil des Website-Designs. Sie helfen uns, die Monotonie des Textes zu durchbrechen und unseren Besuchern einige Informationen visuell zu vermitteln. Während Bilder auf vielen Websites eher eine ergänzende Rolle spielen, sind sie auf anderen der Hauptinhalt. Das gilt zum Beispiel für Websites, die sich mit Fotografie oder der Buchung von Veranstaltungen befassen. In diesen Fall, ist eine Fotogalerie unerlässlich. 

Wenn Sie Ihren Besuchern Ihre Arbeit oder Ihre Produkte präsentieren, möchten Sie wahrscheinlich, dass sie Ihre Fotogalerie einfach und benutzerfreundlich durchsehen können. Zum Glück gibt es eine Menge erstklassiger kostenloser und quelloffener JavaScript-Fotogalerien, die Sie Ihrer Website hinzufügen können. Wenn Sie also eine Online Fotogalerie erstellen möchten, dann lesen Sie nur weiter.

Swiper

Die Zahlen mögen von Website zu Website variieren, aber Smartphones sorgen inzwischen für mehr Verkehr im Internet als Desktops. Daher sollten Sie dem Benutzererlebnis der mobilen Besucher Ihrer Website besondere Aufmerksamkeit schenken, wenn Sie Ihre einfache Fotogalerie gestalten.

Swiper Photo GallerySwiper Photo GallerySwiper Photo Gallery

Das Swiper Fotogalerie-Plugin ist eine gute Wahl für Leute, die eine Fotogalerie ausschließlich für mobile Geräte erstellen möchten. Es ist leichtgewichtig, modern und für Touch-Gesten optimiert. Sie können es sowohl für mobile Websites als auch für native oder hybride mobile Apps verwenden.

Es ist nicht auf externe Bibliotheken wie jQuery angewiesen, kann aber bei Bedarf auch gut mit ihnen zusammenarbeiten. Es gibt eine funktionsreiche API für Navigation, Paginierung und Parallax-Effekte. Sie erhalten auch volle Unterstützung für RTL-Layouts und mehrzeiligen Slides.

Die Qualität dieses Plugins lässt sich an der Tatsache ablesen, dass es der Standard-Slider für hybride App-Frameworks wie Framework7 und Ionic ist. Die Eigene Demoseite auf der Website zeigt alle Möglichkeiten von Swiper.

PhotoSwipe

Das PhotoSwipe Galerie-Plugin ist ein modulares und Framework-unabhängiges Bildergalerie-Plugin für Mobilgeräte und Desktop. Das Plugin ist in kleinere Module unterteilt, die unabhängig voneinander geladen werden können, um nur die von Ihnen gewünschten Funktionen einzubinden und die Dateigröße zu reduzieren.

Photo Swipe GalleryPhoto Swipe GalleryPhoto Swipe Gallery

Browser-Kompatibilität war ein Hauptaugenmerk des Plugins, so dass es auf einer Vielzahl von Geräten und Plattformen hervorragend funktioniert. Dazu gehören ältere Browser wie IE8 und höher, aber auch Browser auf Android, iOS und anderen Betriebssystemen.

Die Fotogalerie unterstützt alle grundlegenden Touch-Gesten wie Pinchen und Swipen. So können Sie zum Beispiel mit vertikalem Swipen eine Galerie schließen und mit horizontalem Swipen zwischen den Bildern navigieren. Sie können auch Ihr eigenes Verhalten für einfaches und doppeltes Antippen von Bildern hinzufügen.

Das Galerie-Plugin verfügt über zahlreiche Optimierungen, um ein großartiges Benutzererlebnis zu bieten und gleichzeitig, wo immer möglich, Ressourcen zu sparen.

LightGallery

Das LightGallery Plugin ist ein leichtgewichtiges, JavaScript-basiertes Foto- und Video-Lightbox Galerie Plugin. Es hat auch keine Abhängigkeiten von Drittanbietern, die seine Dateigröße aufblähen.

Die Galerie ist vollständig responsiv und für Touch-Geräte optimiert. Sie bietet Unterstützung für Gesten wie Pinch zum Zoomen und Swipe für die Navigation. Die Integration mit der Browserverlaufs-API ermöglicht es Ihnen, in der Fotogalerie Deep-Linking anzubieten. Sie können auch andere Elemente wie Videos von YouTube und Vimeo sowie iFrames in Ihre Galerie einbinden.

Sie verfügt über hardwarebeschleunigte CSS3-Übergänge und Unterstützung für die Vollbildansicht. Es gibt Optionen zur Integration von Social Media Sharing in die Galerie. Auf der Website gibt es zahlreiche Musterbeispiele, die Ihnen alle Funktionen zeigen.

Galerie (blueimp)

Die blueimp Gallery ist eine All-in-One-Lösung für die Erstellung einer berührungsempfindlichen und vollständig responsiven Bildergalerie. Sie verfügt über ein Karussell und einer integrierten Lightbox. Sie können damit auch eine Videogalerie zusätzlich zu normalen Bildergalerien erstellen.

Es stehen Ihnen viele Optionen zur Verfügung, um das Aussehen und Verhalten der Galerie anzupassen. Sie können den verschiedenen Elementen Ihre eigenen Klassen hinzufügen, um ihnen ein einzigartiges Styling zu verleihen. Es gibt Callbacks für verschiedene Ereignisse wie das Öffnen und Schließen des Karussells. Sie können auch Ihren eigenen Code auf der Grundlage von Ereignissen wie dem Wechsel der Folie oder dem Laden der Folie ausführen.

Lesen Sie die ausführliche Dokumentation, um zu erfahren, wie Sie alle Funktionen des Galerie-Plugins voll ausschöpfen können.

Galleria

Die Galleria Fotogalerie ist eine der funktionsreichsten kostenlosen Fotogalerien auf unserer Liste. Sie verfügt nicht nur über alle Funktionen, die Sie von einer Bildergalerie erwarten, wie z.B. Reaktionsfähigkeit und breite Browserunterstützung, sondern bietet auch zusätzliche Funktionen wie mehrere Themes, die je nach Ihren Bedürfnissen ein anderes Layout bieten.

Zurzeit sind sechs Themes im Plugin verfügbar, die auf der Seite Themes aufgeführt sind. Sie haben alle ihre eigenen, separaten JavaScript- und CSS-Dateien, die Sie laden müssen. Dies trägt dazu bei, die Kernbibliothek kleiner zu halten. Eine Sache, die Ihnen an der Bibliothek vielleicht nicht gefällt, ist, dass sie jQuery benötigt. Das ist jedoch nicht weiter schlimm, wenn Sie jQuery bereits auf Ihrer Website verwenden.

In der umfangreichen Dokumentation ist alles, was Sie mit der Bibliothek tun können, detailliert aufgeführt. Sie deckt alle Aspekte der Themes ab, ebenso wie die Integration mit WordPress. Sie können Galleria auch erweitern, um Ihre eigenen Funktionen zu implementieren. Es stehen zahlreiche Initialisierungsoptionen und Methoden zur Verfügung, die Ihnen die volle Kontrolle über das Verhalten der Galerie geben.

React Image Gallery

Das React Image Gallery Plugin ist ein spezielles Fotogalerie-Plugin für das React Framework. Es verfügt über alle wichtigen Funktionen wie mobile Swipe-Gesten, Thumbnail-Navigation, Fullscreen-Unterstützung und die Fähigkeit, RTL-Layouts zu verarbeiten.

React Image GalleryReact Image GalleryReact Image Gallery

Sie können das Verhalten des Sliders mit einer Reihe von Funktionen steuern, um die Slides abzuspielen oder anzuhalten. Sie können auch direkt zu einer bestimmten Slide springen oder einen Index der aktuellen Slide abrufen. Es gibt eine Menge Hilfsmitteln, mit denen Sie die Galerie vollständig anpassen können.

Schauen Sie sich die Demoseite an und sehen Sie, wie das Plugin mit Änderungen der Browserbreite sowie mit Eigenschaftswerten wie dem Ein- oder Ausblenden von Miniaturansichten oder der Navigation umgeht.

V-Viewer

Das V-Viewer Plugin ist eine Bildbetrachtungskomponente für das Vue Framework. Es basiert auf einer ähnlich benannten JavaScript Fotogalerie-Bibliothek namens viewer.js.

Neben den üblichen Funktionen zum Vor- und Zurückspringen innerhalb der Galerie bietet die Komponente zusätzliche Funktionen wie das Drehen und Skalieren von Bildern, nachdem sie geladen wurden. Die Viewer-Instanz kann sowohl statische als auch dynamische Galerien verarbeiten. So können Sie ein Karussell erstellen, in dem Sie Bilder auf der Grundlage anderer Ereignisse hinzufügen oder entfernen können.

Es gibt zwei Modi für die Darstellung der Komponente: einen modalen Modus und einen Inline-Modus. Der modale Modus bietet zusätzliche Funktionen wie eine vollwertige tastaturbasierte Navigation und die Möglichkeit, die Bildergalerie mit einem Klick auf eine Schaltfläche zu öffnen. Auf diese Weise können Sie das Rendern von Bildern auf der Hauptseite vermeiden, wenn Sie möchten.

Die Demoseite auf der Website der Komponente zeigt all diese Möglichkeiten in Aktion. Sie können sie durch Anklicken der Kontrollkästchen aktivieren oder deaktivieren.

React Photo Gallery

Die React Photo Gallery Komponente ermöglicht es Ihnen, Ihrem React Projekt eine responsive, zugängliche und anpassbare Galerie hinzuzufügen. Alle Bilder in Ihrer Galerie werden in einem hübschen Masonry- oder Justified-Grid angeordnet. Die Grid-Elemente oder Bilder können auch in Zeilen oder Spalten angeordnet werden.

Ein Unterschied zwischen anderen Fotogalerie-Plugins, die wir in diesem Beitrag aufgelistet haben, und der React Photo Gallery besteht darin, dass sie keine eingebaute Lightbox-Integration oder eine Möglichkeit zum Navigieren durch die Bilder mit Hilfe eines Karussells bieten. Sie können jedoch andere kostenlose Komponenten wie React Images verwenden, um diese Funktionalität zu integrieren.

React Photo Gallery componentReact Photo Gallery componentReact Photo Gallery component

Sie können mit dem obigen Beispiel spielen, um zu sehen, wie sich die Galerie bei der Integration von Komponenten Dritter verhält. Es gibt andere Beispiele auf der Website, die einige andere Funktionen beinhalten.

Abschließende Überlegungen

In diesem Beitrag haben wir einige der beliebtesten kostenlosen Open-Source JavaScript Fotogalerie-Bibliotheken und -Plugins vorgestellt, die Sie sofort in Ihren Projekten einsetzen können. Einige von ihnen, wie Swiper, wurden mit Blick auf bestimmte Plattformen wie mobile Geräte entwickelt, während andere, wie Galleria, eher für allgemeine Zwecke geeignet sind. Hoffentlich ist eine der hier aufgeführten Bibliotheken genau das, was Sie für Ihr Projekt benötigen.

Sie können auch nach anderen kostenlosen Open-Source Galerie-Bibliotheken auf GitHub suchen, wenn keine der hier aufgelisteten Möglichkeiten Ihren Bedürfnissen entspricht.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.