Lightbox mit PhotoSwipe

Letzte Änderung

Mit diesem Plugin wird die JavaScript-Bibliothek PhotoSwipe für die Anzeige verlinkter Bilder in Beiträgen oder Seiten integriert. Dabei werden alle Bilder berücksichtigt, unabhängig davon, ob sie aus in einer Gallerie enthalten sind oder als einzelne Bilder.

Installation

Manuell

Die manuelle Installation besteht aus drei Schritten:

  1. Download des Paketes von https://wordpress.org/plugins/lightbox-photoswipe/
  2. Entpacken des Inhaltes in das Verzeichnis wp-content/plugins der eigenen WordPress-Installation, so dass am Ende das Plugin unter wp-content/plugins/lightbox-photoswipe liegt.
  3. Aktivieren des Plugins im Backend.

Über das WordPress-Repository im Backend

Man kann das Plugin auch im Backend von WordPress in der Plugin-Verwaltung hinzufügen. Man findet es über die Suche nach dem Titel „Lightbox with PhotoSwipe“ im Online-Repository. Über Updates wird man von WordPress automatisch benachrichtigt.

Verwendung

Sobald das Plugin aktiviert wurde, werden alle verlinkten Bilder automatisch mit PhotoSwipe angezeigt. Man muss allerdings darauf achten, dass man auf das Bild selbst verlinkt und nicht auf die Anhangseite. Bei Bildergallerien muss man die Option link=file nutzen.

Deaktivieren des Plugins auf bestimmten Seiten/Beiträgen

Manche anderen plugins verwenden ebenfalls PhotoSwipe und verursachen möglicherweise einen Konflikt – etwa die Produktseiten von WooCommerce.

Man kann entweder die betroffenen Seiten/Beiträge in den Einstellung angeben oder den Filter lbwps_enabled verwenden. Dieser Filter bekommt die ID der aktuellen Seite/Beitrags und ob die aktuelle Seite/Beitrag momentan aktiv ist (true oder false). Wenn der Filter  true zurückgibt, wird die Lightbox verwendet, wenn false zurückgegeben wird, wird die Lightbox deaktiviert – d.h. es werden keinerlei Scripts und Stylesheets in der aktuellen Seite/Beitrag eingebunden.

Beispiel:

// Lightbox with PhotoSwipe auf WooCommerce-Produktseiten deaktivieren

function my_lbwps_enabled($id, $enabled)
{
    if (function_exists('is_product')) {
        if (is_product()) return false;
    }

    return $enabled;
}

add_filter('lbwps_enabled', 'my_lbwps_enabled', 10, 2);

Erweitern des Lightbox-Markup

Wenn man das existierende Markup von PhotoSwipe ändern möchte, kann man dazu den Filter lbwps_markup() verwenden. Dieser Filter erhält als Parameter das existierende Markup und gibt die modifizierte Version zurück.

Beispiel (CSS sollte nie Inline sein, das wurde nur gemacht, um ein funktionierendes Beispiel zu erhalten):

// Zusätzliches Element im Kopf einfügen 

function my_lbwps_markup($markup)
{
    $markup = str_replace(
        ' <div class="pswp__top-bar">',
        ' <div class="pswp__top-bar"> <div style="position:absolute; width:100%; text-align:center; line-height:44px; font-size:13px; color:#fff; opacity: 0.75;">Our content </div>',
        $markup
    );
    return $markup;
}

add_filter('lbwps_markup', 'my_lbwps_markup', 10, 1);

Hinzufügen weiterer Sprachen

Aktuell werden die Sprachen Deutsch, Englisch und Italienisch unterstützt.

Möchte man weitere Sprachen hinzufügen, kann man „Loco Translate“ verwenden. Die Sprachdateien liegen im Verzeichnis languages, wobei für English keine eigene Datei benötigt wird.

Wenn Ihre Übersetzung im nächsten Update enthalten sein soll, senden Sie mir einfach die entsprechenden po/mo-Dateien zu.