Lightgallery mit dem Zurück-Button des Browsers schließen

29. Juli 2019

In einer unserer Typo3-Websites verwenden wir im B2B-Bereich die » Lightgallery zum bildschirmfüllenden Anzeigen von Produktbildern. Die Lightgallery wird planmäßig über ein Kreuz (X) geschlossen. Verwendet man statt dessen den Back-Button des Browsers, so gelangt man nicht auf die Seite, aus welcher man die Lightgallery geöffnet hat, sondern auf die vorhergehende Seite. Dieses Verhalten ist eigentlich völlig in Ordnung, denn das Öffnen der Lightgallery zeigt ja keine neue Seite an, sondern führt nur JQuery-Code (Javascript) innerhalb der aktuellen Seite aus. Für den Benutzer ist dies aber nicht offensichtlich, denn da die Lightgallery den gesamten Bildschirm ausfüllt, hat man den Eindruck, sich auf einer neuen Seite zu befinden - der Klick auf den Pfeil nach links, um zurück auf die "richtige" Seite zu kommen, ist also absolut nachvollziehbar.

In der Lightgallery gibt es dafür aber keine Option. Wir haben deshalb ein paar Ergänzungen in JQuery vorgenommen, um das gewünschte Verhalten zu erreichen. Mit diesen Funktionen kann man sicherlich auch ein anderes Lightbox-Plugin entsprechend ändern.

Unsere Überlegung war, den Browserverlauf so zu ändern, dass beim Öffnen der Lightgallery ein zusätzlicher Eintrag mit der aktuellen URL in die History geschrieben wird. Schließt der Benutzer die Lightgallery mit dem Back-Button, landet er also wie erwartet auf der Seite, von welcher aus die Lightgallery geöffnet wurde. Schließt der Benutzer die Lightgallery dagegen korrekt über den Close-Button (X), so muss der zusätzliche Eintrag wieder aus der History entfernt werden.

Die entsprechenden Funktionen zum Ändern des Browser-Verlaufs bietet HTML5. Im » Mozilla Developer Net sind sie ausführlich beschrieben.

Die folgenden beiden Code-Schnipsel sind Teil der $(document).ready(function(){}); von JQuery.

Die <img>-Elemente, über welche die Lightbox geöffnet wird, tragen bei Klick die aktuelle URL in die Windows History ein:

$(".lightbox").click(function() {
  var stateObj = { lg: "close" };
  var url = window.location.href;
  history.pushState(stateObj, "Products", url);
});

Klickt der Benutzer nun in der Lightgallery auf den Zurück-Button, so wird mit Hilfe folgender Erweiterung die Lightbox geschlossen:

window.onpopstate = function(event) {
  $(".lg-close").click ();
}

Gleichzeitig wird der nun nicht mehr benötigte Eintrag automatisch aus dem Browserverlauf entfernt. Anschließend ist die Situation also genau wie vor dem Öffnen der Lightgallery.

Um den überflüssigen Eintrag auch im Standard-Fall, nämlich dem Schließen der Lightbox via Close-Button, aus der History zu entfernen, haben wir den Code in lightgallery.js folgendermaßen erweitert:

Plugin.prototype.closeGallery = function() {

  var _this = this;
  var mousedown = false;
  this.$outer.find('.lg-close').on('click.lg', function() {
    _this.destroy();

    // für Back Button in Lightgallery
    if (history.state !== null) {
      if (history.state.lg === "close")
	history.back();
      }
    });

Dieser Eingriff in den Source-Code der Lightgallery ist natürlich etwas unschön. Wenn jemand eine bessere Lösung für die Entfernung des Eintrags aus dem Browserverlauf oder vielleicht auch für die gesamte Funktionalität "Schließen über den Zurück-Button" hat, wären wir sehr daran interessiert :-)

Kommentare (0)

Keine Kommentare gefunden!

Neuen Kommentar schreiben