Contao Bundle: Dalley IT - PhotoSwipe

von Oliver Dalley (Kommentare: 1)

Contao Erweiterung zur Integration von Photoswipe innerhalb der Contao Galerie

Das Bundle erweitert das Contao Inhaltselement Galerie um eine Templateauswahl für eine Photoswipe-Galerie. Hierfür wird zusätzlich ein Inhaltstyp 'Dait Photoswipe' eingebunden, welcher eine einfache Steuerung einiger Optionen der Javascript Bibliothek 'Photoswipe' ermöglicht.

Installation

Die einfachste Methode das Bundle zu installieren ist die Verwendung des Contao Managers.

Sollte der Contao Manager nicht installiert, oder das Bundle hierüber noch nicht verfügbar sein, kann alternativ auch eine Installation via Composer erfolgen:
composer require dalley-it/contao-photoswipe

Schnellstart

  • Contao Inhaltselement 'Galerie' in einem beliebigen Artikel anlegen.
  • Template 'gallery_photoswipe' in der Galerie auswählen.
  • Option 'Großansicht/Neues Fenster' wählen.
  • j_colorbox und moo_mediabox im Seitenlayout ggfs. deaktivieren.

Verwendung/Optionen

Nach erfolgter Installation des Bundles befindet sich ein neuer Menüpunkt 'Dait Photoswipe' innerhalb des Bereiches 'INHALTE' des Contao backends.

Hierüber kann eine neue Photoswipe Galerie angelegt werden, um darin Einstellungen für die Steuerung und das Verhalten von PhotoSwipe vorzunehmen.

Innerhalb der Photoswipe Galerie können diverse Optionen für die Galerie eingestellt werden:

Optionen:
  • Name der Galerie: Der Name wird innerhalb der Contao Galerie zur Auswahl angezeigt.
  • Transparenz: Einstellung der Opacity der sich modal öffnenden Galeriebilder (Großansicht).
  • Pinch Funktion: Schließen der Galerie durch Zusammenziehen zweier Finger (mobil).
  • Schließen durch vertikales Wischen: Schließen der Galerie durch vertikales Scrollen (mobil).
  • Mit Pfeiltasten weiterblättern: Navigieren durch die Galerie mit der Tastatur aktivieren.
  • Elemente verstecken: Ausblenden der Steuerungselemente bei Inaktivität der Maus.
  • Schließen durch Scrollen: Schließen der Galerie mit dem Mausrad.
  • Schließen mit ESC: Schließen der Galerie mit der ESC-Taste.
Zuordnen:

Sobald eine Photoswipe Galerie erstellt wurde, kann diese im Contao Inhaltselement 'Galerie' zugeordnet werden. Damit die Galeriebilder als modale Großansicht geöffnet werden können, muss zuerst die Option 'Großansicht/Neues Fenster' innerhalb der Contao Galerie ausgewählt werden:

Achtung: j_colorbox bzw. moo_mediabox müssen im betreffenden Layout der Seite deaktiviert sein. Andernfalls werden diese vor der Photoswipe Galerie geladen und als modales Fenster angezeigt! Sobald keines der beiden Lightboxen aktiv ist, wird eine Warnung im Backend der Contao-Galerie angezeigt. Da Photoswipe die Großansicht der Bilder übernimmt, kann der Hinweis ignoriert werden.

Damit Photoswipe aktiv ist, muss im Folgenden das Galerietemplate 'gallery_photoswipe' ausgewählt werden:

Zuletzt kann eine zuvor erstellte Photoswipe Galerie ausgewählt werden. Jede erstellte Photoswipe Gallerie steht für ein 'Optionenpaket', welches hier zugeordnet werden kann. Es werden die Defaulteinstellungen von Photoswipe verwendet, falls keine Photoswipe Galerie zugeordnet wird.

Lizenzbestimmung

The bundle dalley-it/contao-photoswipe is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

Copyright © Dalley IT 2018 | www.dalley-it.com

 

Zurück

Einen Kommentar schreiben

Kommentar von Maximilian Schmidt |

Lieber Herr Oliver Dalley,

vielen Dank für dieses Tutorial, zu dieser Gallerie Erweiterung.
Vielleicht könnten Sie mir aufzeigen wo mein Problem liegen könnte.
Ich habe diese Erweiterung nun auf 2 unabhängigen Servern mit dem neusten Contao installiert und alle Punkte beachtet. Leider wird da aber keine Javascript Gallerie geladen , bei Klick auf eines der Bilder. Das einzelne Bild wird lediglich nativ geöffnet. Mittlerweile glaube ich alle Kombinationen an JS Templates im Seitenlayout durchprobiert zu haben aber ich komme nicht drauf, was mein Fehler ist.
Können Sie mir bitte sagen welche von den Contao JS Templates benötigt werden, damit diese Gallerie läd? Folgende stehen mir zur Verfügung:

jQuery-Templates:
j_accordion
j_colorbox
j_lightbox4ward (global)
j_mediaelement (Open Sauce)
j_modernizr (Open Sauce)
j_tablesort

MooTools-Templates:
Alle auswählen
moo_accordion
moo_modernizr (Open Sauce)
moo_mediabox (Open Sauce)
moo_accordion_closed (global)
moo_chosen
moo_tablesort

JavaScript-Templates:
Alle auswählen
js_slider
js_autofocus
js_highlight
js_mediaelement (Open Sauce)
js_modernizr (Open Sauce)

Vielen Dank!

Antwort von Oliver Dalley

Lieber Maximilian Schmidt,

Innerhalb der Galerie (Inhaltelement Galerie) unbedingt das Galerietemplate 'gallery_photoswipe' auswählen:

Ist zusätzlich die Option 'Großansicht' ausgewählt, sollte bereits alles funktionieren.

Weitere Templates werden für die Großansicht nicht benötigt. Im Gegenteitl -> j_colorbox und moo_mediabox sollten im Layout deaktiviert sein, damit es keine Überschneidung gibt.

Hoffe, ich konnte helfen.

Bitte rechnen Sie 3 plus 6.