Aktuelle Seite:

baten.de > Holger Baten > bITlog > bITlog Artikel

bITlog News

Contao: Lightbox / Mediabox / Bildergalerie automatisch beim Seitenaufruf öffnen

24.09.2012 16:30 von Holger Baten

Eine kleine Anleitung, um eine Lightbox Bildergalerie nach dem Öffnen einer Contao-Seite direkt und automatisch zu öffnen...

 

Die Herausforderung

Wir wollten gerne auf einer Web-Seite, die mit dem CMS Contao betrieben wird, verschiedene Teaser-Bilder zeigen, hinter denen jeweils beim Anklicken eine eigene Galerie (mit Lightbox Effekt) aufgeht. Dabei sahen wir zwei Probleme:

  1. Die Einbindung vieler Lightbox-Galerien auf einer Seite bedeutet, dass beim Laden der Seite bereits auch alle Bilder geladen werden, damit der Bildwechsel ohne Nachladen schnell abläuft. Folge: Viel Traffic durch viele Bilder, von denen ggf. nur ein Bruchteil wirklich angeschaut wird. Außerdem tut es den Ladezeiten der Seite nicht besonders gut.
  2. Wir hatten einen zusätzlichen Bildeffekt für die Teaser-Bilder geplant (Hover-Effekt). Die Funktionsweise passte nicht zum dahinterliegenden Lightbox-Aufruf. Bevor wir uns hier etwas zurechtfummeln und Problem 1 dabei noch nichtmal lösen, musste eine andere Lösung her.

 

Plan B

Die Alternative waren einfacher Teaser-Bilder auf der Startseite und dann jeweils ein Verweis/Sprung auf je eine eigene Unterseite mit den einzelnen, dann getrennten Galerien. Dieser Plan B hat zwar auch noch weitere Vorteile, entspricht aber nicht ganz dem, was wir und der Kunde uns vorgestellt hatten. Minimalanforderung an Plan B deshalb: Die jeweiligen Galerien auf den Unterseiten sollten sich automatisch öffnen. Kein Problem: Google hat die Lösung...

 

Die Lösung (?)

Mit Hilfe von Google lernten wir, dass viele Lightbox-Nutzer unsere Anforderung teilen. Vereinzelt wurden auch Lösungen angeboten, nach denen im wesentlichen via JavaScript direkt die Methoden der Lightbox aufgerufen wurden. z.B. diese hier:

https://www.contao-community.de/showthread.php?9928-Lightbox-bei-Seitenaufruf

oder:

http://www.html.de/javascript-ajax-und-dhtml/32440-lightbox-beim-oeffnen-der-seite-starten-das-bild-soll-nicht-auf-der-startseite-sein.html?ModPagespeed=noscript

 

Problem dabei: Es gibt viele Implementierungsstände, einige Clone, viele halbwissende aber nicht gerade schreibfaule Experten und am Ende hatten wir keine Lust, den Quellcode der Contao-Plugins zu durchforsten, um den Aufruf, dann auch noch mit den richtigen Bildern nachbauen.

 

Unsere Lösung

Eigentlich wollten wir nur automatisch das machen, was auch der Benutzer machen kann: Auf eines der Bilder klicken, damit die Lightbox aufgeht. Bingo: Warum simulieren wir nicht einfach den Klick auf das entsprechende Element der Seite? Das haben wir wie folgt gelöst:

a) Unter Themes eine Kopie des Seitenlayouts anlegen und dieses dann speziell für die Seiten nutzen, auf denen der Effekt gefragt ist.

b) Im Layout den folgenden JavaScript code einbinden:

<script type="text/javascript">
function simulateClick() {
// Suche alle Typ-A Elemente, also Anker bzw. Verweise
var elem = document.body.getElementsByTagName('a');
var retnode = [];
var myclass = new RegExp("lightbox");
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
// Suche aus den Typ-A-Elementen diejenigen heraus mit der Klasse lightbox
if (myclass.test(classes)) retnode.push(elem[i]);
}
// Von den gefundenen klicke das erste Bild
retnode[0].click();
}
</script>

 

c) Die Funktion "simulateClick()" wird ebenfalls im Layout in den Experten Einstellungen unter "Body onload" eingetragen. Die Funktion wird dann bei jedem Seitenaufruf direkt ausgeführt und sucht sich das erste Anker-Element von allen Anker-Elementen der Klasse "lightbox". Dies verhindert, dass anderen, ggf. auf der Seite befindlichen Verweisen gefolgt wird (z.B. Links der Navigation).

 

d) Im Standard haben die Verweise auf die Bilder einer Lightbox keine Klassenangabe. Um diese zu ergänzen, erstellt man unter Templates eine Kopie von gallery_default.xhtml und fügt dort in dieser Zeile die Klassendefinition ein:

<a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>" class="lightbox"><img src="<?php echo $col->src; ?> [...]

Fertig!

Zurück

Einen Kommentar schreiben

Blog Archiv

Stöbern Sie im Blog Archiv nach alten und neuen Einträgen.