Magazin für digitale Arbeit & Kultur
Design

jQuery-basierte Plug-ins für Galerien und Slideshows

admin
#Webdesign

Webdesignern stehen zur optischen und inhaltlichen Verfeinerung ihrer Internetseiten Bildergalerien, Slider und Slideshows zur Verfügung. Diese sollen den Besucher dazu einladen, auf der Seite zu verweilen und sie durch Hin- und Herklicken zu erkunden.

Denn gerade Bildergalerien verführen den Betrachter oft dazu, mehr Zeit auf einer Website zu verbringen, als ursprünglich geplant und generieren den Betreiber somit die begehrten Klicks, mit denen sich die Online-Anzeigen zu einem höheren Preis verkaufen lassen.

Damit auch Ihr von den Vorteilen von Slidern und Co. profitieren könnt, stellen wir Euch vier ausgewählte jQuery-basierte-Plug-ins und ein Tutorial für Galerien und Slideshows vor:

 

Supersized von buildinternet.com

Supersized ist eine Fullscreen-Image Galerie, bzw. Slideshow, die mit gelungenen Übergängen zwischen den einzelnen Bildern brilliert. Das Tool passt einzelne Bilder so an, dass sie den gesamten Bildschirm ausfüllen, ohne dass das Seitenverhältnis der Fotos verloren geht:

 

Sliding Boxes and Captions von buildinternet.com

Das Prinzip der Sliding Boxes ist einfach: Es besteht aus einem Fenster, durch das verschiedene Elemente geschoben werden. Der Effekt ist beeindruckend und wertet die Website deutlich auf.

 

Galleria.io

Mit Galeleria.io lassen sich großformatige Bildergalerien erstellen. Darüber hinaus bietet das Tool eine direkte Verbindung zur Bildersuchmaschine von Flickr, von der aus Bilder hochgeladen werden können.

 

Easy Slider von cssglobe

Mit dem Easy Slider können Bilder unter anderem horizontal oder vertikal geslidet werden:

 

Tutorial: jQuery Image Show von queness.com

Zu guter Letzt stellen wir Euch noch folgendes Tutorial vor, das zeigt, wie man eine einfache Bilder-Slideshow mit einer semitransparenten Beschriftung erstellen kann:

Über den Autor
Kommentare

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>