Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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

3 Reaktionen
Weissnix

Achtung, die Gallery ist nicht im IE8 lauffähig

Antworten
Thomas Winter

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

Antworten
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

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