Lightbox für Magento

Es gibt ja einige Lightbox-Derivate, die das Öffnen von Links in so genannten Overlay-Fenstern ermöglichen. 

• Die Original-Lightbox. Diese kann man auch in Magento problemlos einbinden. Möglicher Nachteil: Sie unterstützt nur Bilder.
• Dann gibt es das Modul Easy Lightbox, das man bei MagentoConnect herunterladen kann. Dies ist deutlich schneller einzubinden, es funktioniert zuverlässig und ist konfigurierbar. Also eigentlich ideal.
• Es gibt aber auch Fälle, in denen man mehr als Bilder verlinken will - zum Beispiel Flash-Filme oder ganze Seiten, z.B. als iFrame. Hierfür empfehle ich LightWindow. Der große Vorteil gegenüber anderen Skripten: Es basiert auf Prototype und script.aculo.us, welche von Magento sowieso eingesetzt werden. Gegenüber anderen Skripten, die meist auf jQuery aufsetzen, hat man hier einen klaren Vorteil (wenn man nicht sowieso jQuery zusätzlich einsetzt).

Da die Einbindung von LightWindow ein paar Tücken hat, gibt es hier eine Kurzanleitung:

• Herunterladen der Dateien unter http://www.p51labs.com/lightwindow/#download
• Entpacken der Dateien:
  • lightwindow.js unter js/ im Template-Verzeichnis (Skin-Bereich)
  • lightwindow.css unter css/
  • alle Grafiken unter images/
• Da JavaScript Links mit kompletter Pfadangabe zum Anzeigen der Grafiken benötigt (zum Beispiel für die "loading"-Grafik), muss dieser noch in die JavaScript-Datei eingebracht werden. Eine mögliche Lösung:
  • Setzen einer Konstante in der Template-Datei page/html/head.phtml oder im Bereich "Diverse Skripte & Skriptverknüpfungen" in der Konfiguration:

<script type="text/javascript">
//<![CDATA[
    var SKIN_URL = '<?php echo $this->getSkinUrl() ?>';
//]]>
</script>

• • Ersetzen aller Vorkommnisse von "images/" in der lightwindow.js durch folgenden Part:

'+SKIN_URL+'images/

• Einbinden der Dateien per layout/page.xml (oder eigene XML-Datei)

<action method="addItem"><type>skin_js</type><name>js/lightwindow.js</name><params/></action>
<action method="addCss"><stylesheet>css/lightwindow.css</stylesheet></action>

• Anschließend kann man alle Funktionen von LightWindow nutzen. Und das sind einige...