Drücke die Tasten ◄ ► für weitere Artikel  

5 kostenlose jQuery-Bildergalerien für Responsive Webdesign

Für die weit verbreitete jQuery-JavaScript-Bibliothek gibt es eine Menge an Plugins, die Basisfunktionalitäten um hilfreiche Website-Features wie z.B. Bildergalerien für Responsive Webdesign erweitern. Wir stellen euch 5 frei verfügbare jQuery-Plugins für das komfortable Einbinden von für mehrere Viewports optimierte Fotosammlungen kurz vor.

5 kostenlose jQuery-Bildergalerien für Responsive Webdesign
jQuery-Plugin für responsive Bildergalerien: ResponsiveSlides.js

jQuery-Plugins für responsive Slideshows und Foto-Viewer

Bildergalerien sollten neben visuellen Effekten für z.B. Bildübergänge auch Funktionalitäten beinhalten, indem Slideshows oder Thumbnail-Viewer sich an die Displaygrößen unterschiedlicher Endgeräte anpassen. Für diesen Zweck gibt es einige gute jQuery-Plugins, die sich ohne großen Aufwand konfigurieren und in die eigene responsive Website einbinden lassen. 5 davon hier im Überblick:

1 Elastislide

Elastislide von Tympanus.net ist ein Bilderkarussel als jQuery-Plugin, das seine Größe und sein Verhalten in einem Container mit fließender Breite an jede Displaygröße anpasst. Elastislide bietet 10 Default-Optionen für die Konfiguration der Bildanzeige und nutzt zusätzlich das jQuery Touchwipe Plugin für Wipe-Events auf iPhone, iPad und iPod Touch.

jQuery-Plugin für responsive Bildergalerien: Elastislide

2 jQuery Responsive Thumbnail Gallery

jQuery Responsive Thumbnail Gallery von John Polacek ist ein jQuery-Plugin für Bildergalerien mit Vorschau, die sich ebenfalls an ihren Container anpassen. Über 8 Default-Parameter können z.B. Pfade zu unterschiedlich großen Biddateien, Breakpoints oder die anzuzeigende Bildanzahl eingestellt werden.

jQuery-Plugin für responsive Bildergalerien: Responsive Thumbnail Gallery

3 Glisse.js

Glisse.js von Victor Coulon ist ein einfacher aber funktionsreicher Foto-Viewer mit CSS3. Features von Glisse.js sind Navigation über Tastatur, CSS3-Keyframe-Animation, 7 verschiedene Transition-Effekte, Viewportskalierung und Vollbild-Unterstützung. Fallback-Lösungen für ältere Browser, die CSS3 noch nicht unterstützen, sind in Arbeit.

jQuery-Plugin für responsive Bildergalerien: Glisse.js

4 FlexSlider

FlexSlider von WooThemes ist ein responsives jQuery-Slideshow-Plugin mit einfachem FlexSlider-Markup und einigen Konfigurationsmöglichkeiten. An Funktionen bietet FlexSlider z.B. horizontale/vertikale Slide- und Fade-Animationen, hardwareunterstützte Swipe-Events für Touch-Geräte und anpassbare Navigationsoptionen.

jQuery-Plugin für responsive Bildergalerien: FlexSlider

5 Blueberry

Blueberry von Mark Tyrrell ist eine experimentelle Open-Source Slideshow als jQuery-Plugin, die speziell für die Arbeit mit Fluid- oder Responsive Weblayouts entwickelt wurde. Blueberry ist zurzeit in Version 0.4 noch im Beta-Stadium.

jQuery-Plugin für responsive Bildergalerien: Blueberry

Weitere kostenlose jQuery-Plugins für Bildergalerien für Websites mit Responsive Webdesign sind z.B. ResponsiveSlides.js oder wmuSlider.

Kennt ihr noch andere gute jQuery-Plugins für responsive Slideshows und Bild-Viewer?

 

Weiterführende Links:

74 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
5 Antworten
  1. von 15 kostenlose jQuery- und CSS3-Tutorials… am 15.04.2012 (12:11Uhr)

    [...] 5 kostenlose jQuery-Bildergalerien für Responsive Webdesign [...]

  2. von Muhammed am 16.04.2012 (21:42Uhr)

    Ich habe hier noch einen weiteren Tipp: Responsive CSS3 Slider und kommt ohne Javascript aus - von Ian Hansson. Funktioniert auf allen modernen Browsern. http://csscience.com/responsiveslidercss3/

  3. von Sean Peterson am 19.04.2012 (11:53Uhr)

    Hallo,

    Sie können vielleicht auch unsere website besuchen: http://www.loxiastudio.com/en

    Da finden sie 15 kostenlose Flash/jQuery foto animationen, die einfach zu ihre website Hinzufügen sind.

    Wenn Sie die Animation erstellt haben, müssen Sie nur den Code kopieren und in Ihre Seite einfüge.

    Falls Sie irgendwelche Fragen haben gibt es zahlreiche Tutorials und gute Erklärungen.

    Lassen Sie uns wissen was Sie denken!

  4. von Responsive Webdesign: flexibles CSS-Fram… am 21.05.2012 (15:58Uhr)

    [...] für Responsive Webdesign (t3n) 50 kostenlose Einsteigertools für Responsive Web Design (t3n) 5 kostenlose jQuery-Bildergalerien für Responsive Webdesign (t3n) Weitere Artikel zu Responsive Webdesign, Frameworks und CSS Kommentare: 1 Tweets: 13 [...]

  5. von Nützliche Links zum Thema jQuery «… am 22.06.2012 (15:21Uhr)

    [...] 5 kostenlose jQuery-Bildergalerien für Responsive Webdesign [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
SVGMagic: Automatischer SVG-Fallback für deine Webseite
SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ... » weiterlesen

jQuery: 13 Plugins für euer nächstes Webprojekt
jQuery: 13 Plugins für euer nächstes Webprojekt

Webentwicklung ohne JavaScript, im Besonderen jQuery, ist heute fast nicht mehr vorstellbar. Deswegen zeigen wir euch 13 jQuery-Plugins, die ihr vielleicht noch nicht kennt, aber unbedingt... » weiterlesen

Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos
Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

Mit der Serie „Responsive Webdesign“ wollen wir euch die Entwicklung flexibler Projekte erleichtern. In Teil 3 zeigen wir Möglichkeiten auf, Galerien, Videos, Bilder und Slider für die... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen