Entwicklung & Design

Schick, schnell, responsive: jQuery-Galerien mit S-Gallery

Screenshot: S-Gallery Übersicht

Du suchst eine elegante Galerie-Lösung, die schick aussieht, schnell läuft und auch noch responsive ist? Dann könnte S-Gallery genau das Richtige für dich sein. Wir verraten dir, was das jQuery-Plugin zu bieten hat.

S-Gallery ist ein jQuery-Plugin, um schicke und responsive Galerien umsetzen zu können. Zur Handhabung: Ihr beginnt mit der Galerie-Übersicht, auf der alle Bilder in einer Fotowand ausgegeben werden. Nach einem Klick auf eins der Bilder landet ihr in der Detailansicht des jeweiligen Fotos. Von dort aus könnt ihr aber weiterhin innerhalb der Galerie navigieren. Unterstützt werden folgende Eingabegeräte: die Pfeiltasten deiner Tastatur oder die Swipe-Gesten auf deinem Touch-Gerät. Fans von bildschirmfüllenden Slideshows können bei Bedarf zwischen Normal- und Vollbild-Ansicht hin- und herschalten.

Screenshot: S-Gallery Detailansicht

Die Detailansicht der S-Gallery. (Screenshot: sarasoueidan.com)

S-Gallery einsetzen

Um das Plugin zu betreiben, benötigt ihr neben jQuery natürlich das Plugin selbst – das sich unter der Bezeichnung script.js versteckt – und das vordefinierte Stylesheet zu S-Gallery. Mit Hammer.js wird eine bessere Touch-Unterstützung erreicht und Screenfull.js ist für die Realisierung der Vollbild-Funktion essentiell.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="path-to-your-js-scripts/plugins.js"></script>
<script src="path-to-your-js-scripts/scripts.js"></script>

Das Plugin benötigt zwei „Unordered-Lists“ die jeweils die kleinen und großen Bilder sowie deren Bildunterschriften beinhalten. Ein div-Container enthält die jeweiligen Kontrollelemente der S-Gallery.

<div id="gallery-container">
<ul class="items--small">
<li class="item"><a href="#"><img src="images/small-1.png" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small-2.png" alt="" /></a></li>
<!--.....-->
</ul>
<ul class="items--big">
<li class="item--big">
<a href="#">
<figure>
<img src="images/big-1.jpg" alt="" />
<figcaption class="img-caption">
Caption
</figcaption>
</figure>
</a>
</li>
<li class="item--big">
<a href="#">
<figure>
<img src="images/big-2.jpg" alt="" />
<figcaption class="img-caption">
Caption
</figcaption>
</figure>
</a>
</li>
<!--...-->
</ul>
<div class="controls">
<span class="control icon-arrow-left" data-direction="previous"></span>
<span class="control icon-arrow-right" data-direction="next"></span>
<span class="grid icon-grid"></span>
<span class="fs-toggle icon-fullscreen"></span>
</div>
</div>

Um S-Gallery zu initialisieren, genügt der Aufruf von .sGallery. Standardmäßig ist die Vollbild-Funktionalität aktiviert – sie kann aber mit fullScreenEnable:true deaktiviert werden.

$(document).ready(function(){
$('#gallery-container').sGallery({
fullScreenEnabled: true //default is false
});
});

Fazit: Schicke Lösung für kleine Galerien

S-Gallery eignet sich gut für eine schicke und leicht zu bedienende Präsentation von Fotos. Das Plugin ist responsive, unterstützt Touch-Eingaben und ist gut zu bedienen.

Für eine große Anzahl von Bildern oder für sehr große Formate sollte das Skript in seiner Grundform jedoch nicht verwendet werden. Bedingt durch das Markup werden die großen Bilder geladen, auch wenn sie nicht konkret angeklickt wurden. Es werden also immer alle zwei Versionen des gleichen Bildes geladen. Dafür bietet dieses Markup mehr Spielraum für eigene Adaptionen. Insgesamt macht S-Gallery einen optisch angenehmen Eindruck und bietet einen guten Ansatz für kleine Galerien.

Auf GitHub findest du S-Gallery als Skript und als WordPress-Plugin zum Download. Einen ersten Eindruck kannst du dir mit der Live-Demo von S-Gallery verschaffen.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
Celine
Celine

Leider funktoniert das WP-PlugIn nicht unter 3.7.1 :(

Folgende Fehlermeldung wird ausgegeben:

Warning: array_merge() [function.array-merge]: Argument #2 is not an array in /wp-content/plugins/phc-s-gallery-responsive/inc/shortcode.php on line 11

Warning: extract() [function.extract]: First argument should be an array in /wp-content/plugins/phc-s-gallery-responsive/inc/shortcode.php on line 13

Antworten
Thomas Winter
Thomas Winter

Vielen Dank für diesen Artikel. jQuery wird jeden Tag ein größerer Bestandteil meiner Website.

Antworten
Weissnix
Weissnix

Achtung, die Gallery ist nicht im IE8 lauffähig

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.