Die Photoswipe Bildergalerie (mit Touchscreen Swipe-Effekt) nutzen

Photoswipe ist eine moderne JavaScript-Bildergalerie, die besonders für mobile Geräte mit Touchscreens optimiert ist. Denn auf Touchscreen-Geräten wie Tablet PCs und Smartphones können die Bilder mit dem beliebten Swipe-Effekt nacheinander „weitergeblättert“ werden. Alternativ (und auch auf Desktop-Monitoren nutzbar) gibt es eine Diashow-Funktion und einen Vor- und Zurück-Button. Auch die Navigation über die Pfeiltasten der Tastatur ist möglich. Ich habe Photoswipe selbst ausprobiert und zeige im folgenden Artikel, wie du die praktische Bildergalerie auf deiner Webseite einbinden kannst.

Photoswipe Bildergalerie Tutorial
Die Photoswipe Bildergalerie mit Vor- Zurück-, Play- und Galerie-Schließen Button.

1. Photoswipe downloaden und Galeriebilder vorbereiten

Auf der Webseite photoswipe.com von Codecomputerlove kannst du dir den Code für die kostenlose Galerie (MIT-license) herunterladen. Auf der Webseite findest du auch verschiedene Live-Demos von Photoswipe.

Im Ordner „examples“ findest du verschiedene Beispiele der Galerie, z.B. default, jQuery oder jQuery-mobile. In der readme-Textdatei unter „Getting Started“ kannst du genau nachlesen, welches Beispiel als Vorlage für deine Verwendung am besten geeignet ist. Ich habe mich für das jQuery-Beispiel entschieden, um die Galerie z.B. auch im Internet Explorer nutzen zu können.

Die Galeriebilder werden in zwei Varianten benötigt. Einmal in der vollen Größe und ein zweites mal als Thumbnails (Größe 150x150px). Die Thumbnails speicherst du dir in einem Ordner namens „thumb“ und die großen Bilder in einem Ordner namens „full“ ab.

2. Die JavaScript-Dateien einbinden

Jetzt musst du alle benötigten Scripte für Photoswipe innerhalb des head-tags (bei WordPress in header.php Datei) einbinden.

Du benötigst die Dateien klass.min.js und code.photoswipe.jquery-2.0.3.min.js (beide findest du in Download-Ordner von Photoswipe). Am besten speicherst du diese Dateien in einem eigenen Ordner namens „js“ ab.

Innerhalb des head-tags fügst du jetzt folgenden Code ein:

<script type="text/javascript" src="deinPfad/js/klass.min.js"></script>
<script type="text/javascript" src="deinPfad/js/code.photoswipe.jquery-2.0.3.min.js"></script>

„deinPfad“ ersetzt du dabei jeweils mit dem Pfad zu deinem Dateien-Ordner. Wenn du WordPress verwendest kannst du am besten < ?php echo get_template_directory_uri(); ?> einsetzen, also:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/klass.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/code.photoswipe.jquery-2.0.3.min.js"></script>

Jetzt musst du darunter noch folgenden Code integrieren, um das Script für deine Bildergalerie nutzen zu können:

<script type="text/javascript">
//jQuery version
$(document).ready(function(){

	var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: true});

});
</script>

Weitere Konfiguartions-Möglichkeiten wie z.B. fadeinSpeed, autostartSlideshow oder allowUserZoom findest du in der Dokumentation auf der Photoswipe-Seite.

Falls du jQuery nicht bereits aufrufst, kannst du die Google Library API nutzen und jQuery von dort aufrufen (jQuery muss aber unbedingt vor den Scripts für Photoswipe geladen werden):

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js?ver=1.6.2'></script>

3. CSS einbinden

Im nächsten Schritt musst du noch die benötigte CSS-Datei photoswipe.css (im Photoswipe Download-Ordner vorbereitet) für Photoswipe innerhalb des head-tags einbinden (am besten direkt unterhalb deines Hauptstylesheets).

<link href="deinPfad/photoswipe.css" type="text/css" rel="stylesheet" />

Um alle für Photoswipe benötigten Images in einem „images“-Ordner aufgeräumt unterbringen zu können, musst du in der photoswipe.css Datei noch bei allen background-Images den Ordner images/ hinzufügen, also z.B.:

background: url(images/loader.gif) no-repeat center center;

Für das Styling der Galerie in der Standard-Ansicht musst du außerdem noch die folgenden Styles hinzufügen:

/* Gallery styling */
.gallery { list-style: none; padding: 0; margin: 0; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery li { list-style: none !important; float: left; width: 33.33333333%; }
.gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
.gallery li img { display: block; width: 100%; height: auto; }

Diese zusätzlichen Styles kannst du z.B. ganz unten in der photoswipe.css Datei ergänzen oder auch direkt in dein Haupt-Stylesheet einbinden.

4. Alle benötigten Images einbinden

Als letzten Schritt für die Integration von Photoswipe musst du jetzt nur noch alle benötigten Images in deinen „images“-Ordner einfügen. Du benötigst die im Photoswipe-Ordner zur Verfügung gestellten Images loader.gif, icons.png und icons@2x.png sowie deine in Schritt 1 vorbereiteten Bilderordner „full“ und „thumb“.

5. Der HTML-Code für die Galerie

Jetzt kannst du, z.B. in einem Artikel deines Blogs den HTML-Code für eine Bildergalerie einfügen. Hast du deine Bilder in der Reihenfolge 001.jpg, 002.jpg, 003.jpg usw. benannt (die Bilder in der vollen Größe werden übrigens gleich benannt wie die Thumbnails) lautet der HTML-Code:

<ul id="Gallery">
	<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
	<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
	<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
	<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
	<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
	<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>

Über das alt-Attribut kannst du außerdem noch Titel für deine Bilder in der Galerie bestimmen. Wenn du deine Galerie jetzt im Desktop-Browser anschaust, öffnet sich die Photoswipe-Galerie beim Anklicken eines der Thumbnail-Vorschaubilder.

Photoswipe Bildergalerie Tutorial
Die Photoswipe-Bildergalerie in einem WordPress-Artikel integriert (Desktop-Broswer Ansicht).

Photoswipe Bildergalerie Tutorial
Photoswipe ist responsive, so dass die Galeriebilder auch für ein kleines Smartphone-Screen angepasst sind.

Auf einem Touchscreen kannst du die Galeriebilder jetzt bequem mit Hilfe der Swipe-Funktion anschauen.

Photoswipe Bildergalerie Tutorial
Die Swipe-Funktion für Touchscreens.

Hast du Fragen, Optimierungsvorschläge oder Probleme bei der Integration von Photoswipe? Über dein Feedback freue ich mich sehr!

34 Kommentare

  1. Darf ich fragen, aus welchem Grund die Einbindung über jQuery so umständlich gehandhabt wird? Das window- und PhotoSwipe-Objekt müssen doch nicht übergeben werden. Die Dokumentation von PhotoSwipe geht hier zumindest den eher üblichen Weg.
    Ich würde außerdem dazu raten, dass die PhotoSwipe-Galerie nur bei Touch-Geräten verwendet wird und bei normalen Endgeräten die klassische Lightbox zur Anwendung kommt. Da PhotoSwipe die Bilder auf die Größe des Browserfensters streckt, sieht das bei größeren Bildschirmen nicht mehr schön aus und wirkt eher verwaschen.
    Das könnte man dann wie folgt lösen:


    $(document).ready(function(){
    if (isEventSupported == true) {
    $("#Gallery a").photoSwipe();
    } else {
    $("#Gallery a").meineLightbox();
    }
    });

    var isEventSupported = (function(){
    var TAGNAMES = {
    'select':'input','change':'input',
    'submit':'form','reset':'form',
    'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName) {
    var el = document.createElement(TAGNAMES[eventName] || 'div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
    el.setAttribute(eventName, 'return;');
    isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
    }
    return isEventSupported;
    })();

  2. Oh, Fehler ;)
    Richtig heißt es:

    if (isEventSupported('touchstart') == true) {

    Zusammen also:


    $(document).ready(function(){
    if (isEventSupported('touchstart') == true) {
    $("#Gallery a").photoSwipe();
    } else {
    $("#Gallery a").meineLightbox();
    }
    });

    var isEventSupported = (function(){
    var TAGNAMES = {
    'select':'input','change':'input',
    'submit':'form','reset':'form',
    'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName) {
    var el = document.createElement(TAGNAMES[eventName] || 'div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
    el.setAttribute(eventName, 'return;');
    isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
    }
    return isEventSupported;
    })();

    • Hallo Michael,

      vielen Dank für deinen Hinweis. Den Code hatte ich aus der jQuery Beispiel-Datei von Photoswipe übernommen. Ich habe in aber gerade noch einmal angepasst und den Code aus der Beschreibung direkt auf der Photoswipe-Seite übernommen.

      Die Option, die Photoswipe-Galerie ausschließlich auf mobilen Geräten zu nutzen, ist natürlich sehr interessant. Denn wenn die Bilder nicht in einem großen Format zur Verfügung stehen, werden die Bilder leider unscharf angezeigt (da Bildschirm füllend). Allerdings gefällt mir die Optik der Galerie eigentlich auch im Desktop-Browser sehr gut und es ist eventuell nicht so benutzerfreundlich, zwei ganz unterschiedliche Ansichten für die gleiche Bildergalerie einzusetzen.

      Viele Grüße,
      Ellen

    • Hallo Michael,

      kannst du dich evtl. bei mir melden, wie du den Code genau einbauen willst? Das wäre nett. Habe leider hier keine Kontaktdaten von dir gefunden.

      Danke! Ralf

  3. Hallo Ellen,

    ich denke, dass es nicht unbedingt ein Problem mit der Benutzerfreundlichkeit geben dürfte, da sich mobile Webseiten schon deutlich von herkömmlichen Versionen unterscheiden. Das ist aber mit Sicherheit auch Auslegungssache und kann von Kunde zu Kunde oder Projekt zu Projekt unterschiedlich sein.

    Eine gute Alternative wäre z.B., wenn die Lightbox das gleiche Design wie PhotoSwipe verwenden würde. Dann werden die Bilder nicht größer dargestellt, als sie eigentlich sind und das Design ist dabei trotzdem identisch.

    Weißt du zufällig, ob es ein jQuery-Plugin gibt, welches nur die Wischtechnik bereit stellt. Ich würde dieses „Bilder-Wischen“ auch gerne im Inhaltsbereich, also nicht nur Fullscreen, verwenden.
    Diese Touch-Events scheinen aber doch recht aufwändig zu sein, da man immer die Positionen des Fingers und des Bildes abfragen muss.

  4. Christian Kovacic 26. August 2011

    Hi,

    ich habe Photoswipe (nach Anregung durch einen anderen Artikel) mal als Proof-Of-Concept in eine mobile Seite eingebaut.

    Das Problem an dieser wundervollen Sache -> Der Ajax-Request findet auf eine vorgegebene Galerie statt, wo die Daten statisch vorhanden sind, bzw. mehr oder weniger statisch.

    Bei mir schaut dies so aus:

    Sub-Galerien werden geladen in dem ich folgende Struktur angelegt habe:

    meine/verzeichnis/struktur/galerie1/gallery.php
    meine/verzeichnis/struktur/galerie2/symbolischer Link auf gallery.php
    etc.

    gallery.php ladet meine Fotos dynamisch aus einer Datenbank, wobei ich die REQUEST_URI bzw. einen Teil davon (galerie1, galerie2) als Identifizierung nutze.

    Das funktioniert auch wunderbar, jedoch ist die zurückgegebene Datenmenge recht umfangreich, so kann eine Galerie durchaus knapp 400 Fotos enthalten. Sollte an sich kein Problem sein, man kann ja eine „Paging“-Funktion einbauen. Das ist aber leider nicht möglich bzw. ich verstehe es nicht, wie ich aus dem statischen Rückgabeset das Photoswipe erwartet dynamisch Bilder (inkl. Thumbnails) nachladen kann.

    Ich hoffe, das wir irgendwie verständlich ^^

    LG

    Christian

  5. Hallo Ellen,

    vielen Dank für die ausführlichen Anweisungen. Das ist echt eine klasse Bildergalerie. Was ich allerdings an Photoswipe nicht wirklich benutzerfreundlich finde ist, dass nirgends ein Hinweis darauf ist, dass

    1. überhaupt „geswiped“ werden kann
    2. die Arrowkeys benutzt werden können
    3. dass man mit „ESC“ wieder zurück kommt

    hast Du da eine Idee?

    Viele Grüße

    David

  6. Hi Ellen,

    tolles Tutorial! Vielen Dank für den Top Blog Eintrag. Macht Spass die Schritte zu folgen.

    Kleine Anmerkung. In Schritt 5 muss es

    sein, sonst greifen die neue stylesheets nicht.

    Weiter so. Ich freu mich auf neue Blogbeiträge!

    Grüße,
    Chris

  7. Toll wäre es wirklich, wenn jemand den ganzen Code schreiben könnte, den Michael oben beschrieben hat.

    Ich habe festgestellt, dass es sinnvoll wäre, einfach für IE8 und IE7 die Lightbox o.ä. zu nehmen. Der IE9 kann es. Also man muss nicht unbedingt alle Desktop-PCs ausschliessen. Einfach die Bilder größer hochladen und sinnvoll komprimieren, dann können auch große Galerien gut aussehen.
    Für Redaxo habe ich grad auch ein Modul erstellt. Mit o.g. Einschränkung wäre es das beste Modul.

    • Hallo Ralf,

      ich habe den Code doch bereits weiter oben beschrieben. Mit jQuery kannst du dann zusätzlich noch den Browser und die Browser-Version abfragen.
      Einen für deine Anforderungen individuellen Code kann ich dir leider nicht geben, da ich 1. nicht alle Hintergründe kenne und 2. nicht kostenlos arbeite.
      Ich empfehle dir sonst die jQuery-Dokumentation und insbesondere die Abfrage der Browser-Version:
      http://api.jquery.com/jQuery.browser

  8. Du solltest das auch nicht kostenlos machen. Aber egal.

    So gehts einfacher:

    if ( $.browser.msie<=8 )
    (
    jQuery(document).ready(function(){
    jQuery("#Gallery a").lightbox();}
    ));

    else {

    (function(window, $, PhotoSwipe){

    $(document).ready(function(){

    var options = {};
    $("#Gallery a").photoSwipe(options);

    });

    }(window, window.jQuery, window.Code.PhotoSwipe));
    }

    • Hallo Ralf,

      das war keinesfalls böse gemeint. Ich drücke mich nur gerne unmissverständlich aus und da ich fast täglich E-Mail-Anfragen für kostenlosen Support bekomme, wollte ich das nur so früh wie möglich klar stellen.
      Wenn dein Code so funktioniert, dann passt es doch gut.

      Ich werde diese Galerie wohl nur unter bestimmten Vorgaben verwenden und beschränke mich auf kleinere Auflösungen (ab ca. 768px Breite) und Touch-Geräte.

      Sehr interessant fände ich ein Plugin, welcher den Swipe ohne eine solche Layoutvorgabe zur Verfügung stellt, damit auch beliebige andere Elemente in einer Seite so „geswiped“ werden können.
      Ein klassisches Beispiel sind hier Container in einer Seite, welche mit overflow: scroll definiert sind. Seit iOS 4 kann man diese zwar mit zwei Fingern verwenden, aber das weiß leider kaum ein Nutzer, weil auch keine Scrollbalken angezeigt werden.

  9. Ich finde schade, dass es bis heute keine Möglichkeit gibt, Bilder mit WordPress so simpel und schön wie hier http://1x.com/ zu präsentieren. Da bräuchte man sich nicht ständig einen „Artikel“ aus den Fingern zu saugen und könnte einfach ein einzelnes Bild zeigen, das die Besucher dann auch noch kommentieren könnten.

  10. Hallo,

    erstmal vielen dank für das gute Tutorial.

    Ich frage mich allerdings, ob ich der einzige bin, der Probleme hat photoswipe in iOS zum Laufen zu bekommen. Ich bin kein Experte, aber irgendwas scheint faul zu sein: Auf meinem iphone kann ich weder meine eigene Galerie noch das Beispiel auf http://www.photoswipe.com vernünftig öffnen. Es scheint als werden die Scripte nicht geladen.

    Kann man dieses Problem umgehen?

    Viele Grüße!

  11. Blöde Frage: Wie kann ich den Button „Back“ in „Zurück“ wandeln?!? (jquery mobile) hab die css dateien durchstöbert, find aber leider nix…. :(

    danke für den hinweis!! lg

  12. Richie Pichler 24. November 2011

    Hi! Hat jemand eine Ahnung, wie ich einzelne Bilder
    der Galerie beim durchsehen ‚liken‘ bzw. an meine Facebook-
    Pinnwand posten kann?!?

    Im Moment kann ich nur eine ganze html mit http://www.facebook.com/sharer.php?u=http://…. posten, hab aber keine Ahnung, wie ich das gerade gesehene Bild sharen kann.

    Danke für eure Hilfe!

    • Diese Funktion ist scheinbar nicht vorgesehen und damit müsste man Photoswipe entsprechend erweitern oder auf ein Update hoffen.
      Es ändert sich noch nicht mal die URL und somit kann man auch nicht auf ein bestimmtes Bild in der Galerie verlinken. Das wäre aber für deine Anforderung notwendig.

      Viele Grüße

  13. Richie Pichler 25. November 2011

    Danke, Michael! Bräuchte die Funktion dringend für eine App,
    vielleicht kann mir hier jemand weiterhelfen, bzw. will zusammenarbeiten,
    bitte kurzes Mail, danke!

    lg Richie

  14. Hallo Ellen, hallo alle.

    Gibt es eine Möglichkeit die Anzahl der Bilder pro Reihe in der Gallery zu erhöhen? Die thumbs in der Vorschau auf einem iPad sind riesig und ich hätte gerne 5 oder 6 Bilder in einer Reihe.

    Vielen Dank.
    Thorsten

  15. hallo,
    gibt es die möglichkeit, über diese galerie die bilder lokal zu speichern?
    normalerweise (iphone) drücke ich auf das bild und bekomme die option,
    das bild zu speichern.
    warum hier nicht?
    sascha

  16. Hallo Ellen!
    Hätt da mal ne frage, ist es möglich WordPress zusagen, dass der swipe effekt nur bei mobil geräten kommen soll und andernfalls einfach eine normale lightbox erscheint?

    Gruß und Danke :)

  17. Hallo Leute,

    Kann man so eine Galerie bei eBay einbauen ohne die Richtlinien für JavaScript zu missachten?

    Ps.: getElementById zB, ist verboten und führt zur Löschung des Angebots/Accounts.

    MfG

  18. Tach zusammen,

    die Anleitung ist super, hat mir sehr geholfen. Ich habe folgende Problemstellung: auf einer Seite gibt es mehrere Imagesets, die auf der Webseite auch weiterhin getrennt angezeigt werden sollen. Nun würde ich jedoch gerne, sobald man in den „Galerie-Modus“ wechselt, die Bilder mischen bzw. alle Imagesets in einer Galerie verfügbar machen.

    Gut möglich, dass ich da vor lauter Bäumen den Wald nicht sehe, vielleicht weiß jemand Hilfe oder hat ne Säge. :-)

    Danke!

    Gruß,
    Michael

  19. Hej,
    ok – ist ein älterer beitrag, doch interessiert mich hier schon, warum keiner nach den ladezeiten fragt und wie viel bilder und ab wann sie geladen werden, welches doch für mobile geräte bei den heutigen tarifen wichtig ist, oder? sollte da nicht immer nur ein bild geladen werden und auf anfrage erst das nächste, bzw. immer nur eins im voraus?
    das ist – wie ich finde – ein sehr wichtiger aspekt für eine bildgallery auf mobilen endgeräten, bzw. auf geräten die zB. eine trafik -tarif meist haben. also ohne wehre eine gallery mit 20 bilder ein killer für so eine gallery.
    das sollte man nicht außer acht lassen, so wie responsive und fallback dinge..
    LG Mog

  20. Hallo Ellen,

    Vielen Dank für Deine einfache und tolle Beschreibung zur Nutzung von PhotoSwipe. Ich find´ das richtig gut und würde das gerne in meine htmp-Homepage einbinden. Leider bin ich an einer Stelle hängen geblieben.

    Die beiden Javascript-Dateien
    – klass.min.js
    – code.photoswipe.jquery-2.0.3.min.js
    für den Head-Tag konnte ich leider nicht finden.
    Da sind jetzt viel mehr Dateien auf der PhotoSwipe-Seite.
    Welche davon muss ich denn nehmen?

    Bin leider nicht so fit in Javascript-Programmierung und komm´ an dieser Stelle nicht weiter.

    Weitere Frage:
    Den Verweis auf die Jquery-Google-API schreib´ ich im Header direkt über den Javascript-Aufrufen, oder?

    Freue mich sehr über eine kurze Hilfe.

    Vielen Dank & viele Grüße,
    Holger

  21. Das ist tatsächlich mal ein tolles Lightbox-Plugin. Der Link zu den Demos geht leider nicht mehr, aber über die Webseite findet man sie ja dann. Danke für den Tipp!

  22. Hallo Ellen.

    Hast Du Erfahrungen mit der aktuellen Photoswipe-Version unter WordPress 4.4?

    Dank für den Artikel zur Photoswipe Bildergalerie, die Dateien in deinem Artikel sind leider veraltet.
    Der Datenaufbau von Photoswipe passt nicht zu der Artikelbeschreibung.

    Wie in deinem Tutorial beschrieben, habe ich versucht die entsprechenden Javascripte und CSS Dateien in der header.php zu integrieren, Images in den beiden Größen „thumb“ und „full“ anzulegen und
    CSS Anpassungen ausgeführt, aber das Script läuft nicht in WordPress 4.4.

    Bin leider nicht so fit in Javascript-Programmierung und komme an dieser Stelle nicht weiter.

    Freue mich sehr über eine aktuelle Hilfe.
    Sandra

Hinterlasse eine Antwort

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