Galerien in jQuery Mobile mit dem Photoswipe Plugin

Fotos und andere grafische Elemente sind für die meisten Websites unverzichtbar. Erste Ansätze zum Einbinden von Grafiken wurden bereits in den Beiträgen zu Listen und Popups vermittelt. Wenn allerdings eine größere Anzahl von Fotos präsentiert werden soll, dann ist eine Galerie die optimale Variante. Mit den Hausmitteln von jQuery Mobile allein lässt sich eine Galerie nicht erstellen, doch es gibt ein Script, dass die nötigen Funktionen liefert: PhotoSwipe.

Voraussetzungen zum Einbau von PhtoSwipe

Wenn man PhotoSwipe in eine jQuery Mobile Website einbauen will, dann kann man sich an der im Download Paket von PhotoSwipe enthaltenen Datei 04-jquery-mobile.html orientieren.

CSS

Zusätzlich zur Datei jquery.mobile-1.2.0.css von jQuery Mobile müssen die Dateien jquery-mobile.css und photoswipe.css aus dem PhotoSwipe Paket eingebunden werden. Achtung: die Namensgebung jquery-mobile.css ist etwas irreführend, denn es handelt sich ja nicht um die komplette Datei für jQuery Mobile. Außerdem muss noch beachtet werden, dass 4 Grafiken, die in der CSS Datei photoswipe.css angesprochenen werden, mit kopiert werden. Sie müssen sich im gleichen Verzeichnis befinden, wie die CSS-Datei.

JavaScript

Es sind zwei zusätzliche JavaScriptdateien einzubinden: klass.min.js und code.photoswipe.jquery-3.0.5.min.js. Zu beiden Dateien gibt es auch Varianten, die noch nicht minimiert wurden. Außerdem muss noch das folgende Script in die Seite eingebaut werden:

<script type="text/javascript">
  /*
   * IMPORTANT!!!
   * REMEMBER TO ADD  rel="external"  to your anchor tags. 
   * If you don't this will mess with how jQuery Mobile works
   */
  (function(window, $, PhotoSwipe){
    $(document).ready(function(){
      $('div.gallery-page')
        .live('pageshow', function(e){
          var 
            currentPage = $(e.target),
            options = {},
            photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
          return true;
        })
        .live('pagehide', function(e){
          var 
            currentPage = $(e.target),
            photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
          if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
            PhotoSwipe.detatch(photoSwipeInstance);
          }
          return true;
        });
    });
  }(window, window.jQuery, window.Code.PhotoSwipe));
</script>

Da ist zu beachten, dass die im Script verwendeten Klassen gallery-page und gallery auch im HTML-Code der eigentlichen Galerie verwendet werden.

HTML-Code der Galerie

Die eigentliche Galerie wird als virtuelle Seite angelegt, hat also data-role="page". Wie jede Seite muss auch die Galerieseite eine eindeutige ID haben. Durch class="gallery-page" wird die Seite durch das Script (siehe oben) als Galerieseite erkannt. Auch data-role="header" und data-role="footer" können verwendet werden. Die Bilder werden in data-role="content" in einer Liste abgelegt, die class="gallery" haben muss, um durch das Script (siehe oben) als galerie erkannt zu werden. Der vollständige HTML-Code der Galerieseite sieht dann so aus:

<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">
  <div data-role="header">
    <h1>Erste Galerie</h1>
  </div>
  <div data-role="content">  
    <ul class="gallery">
      <li><a href="URL des Bildes in Vollbildansicht" rel="external"><img src="URL des Bildes in Galerieansicht" title="Titeltext" alt="Alternativtext"></a></li>
      ...
      <li><a href="URL des Bildes in Vollbildansicht" rel="external"><img src="URL des Bildes in Galerieansicht" title="Titeltext" alt="Alternativtext"></a></li>
    </ul>
  </div>
  <div data-role="footer">
    <div data-role="navbar">
      <ul>
        <li><a href="http://skywalk-webdesign.de" rel="external">Skywalk Webdesign</a></li>
        <li><a href="http://bpgs.de" rel="external">BPGS.DE</a></li>
      </ul>
    </div><!-- Ende navbar -->
  </div>
</div><!-- Ende page Gallery1-->

Unabdingbar für die korrekte Anzeige einer PhotoSwipe Galerie in einer jQuery Mobile Seite ist die Verlinkung der Garfiken für die Vollbildanzeige mit rel="external".

Die zweite Galerie in der Demo-Seite zeigt, dass auch in der Galerieseite Kopf- und Fussbereich mit data-position="fixed" fixiert werden können.

Demo Photoswipe ansehen

Die PhotoSwipe Galerie ordnet die Bilder automatisch so an, das jeweils drei nebeneinander gezeigt werden. Wenn man dies ändern will, muss man tiefere Eingriffe im JavaScript-Code vornehmen.

Vorteilhaft für das Erscheinungsbild der Galerie sind gleich große Bilder, vor allem die Höhe ist entscheidend. Falls es nicht möglich ist, gleiche hohe Bilder zu verwenden, sollten die Bilder so angeordnet werden, dass jeweils das dritte Bild, also das am Ende der Reihe, die größte Höhe hat.