Nachdem ich mich selbst fast 2 Tage damit herumgeärgert habe, hier eine kleine Anleitung, wie man die Produktbilder mit Lightbox anzeigen lassen kann.

1.) Die Lightbox Homepage besuchen, sich dort das entsprechende Package herunterladen und entpacken. Diese Installationshilfe bezieht sich auf v2.04 .


2.) Folgende Dateien herunterladen und Sicherungskopien anlegen:

_templates/orange/_front/shape_new.tpl
_templates/orange/_front/elements/product_gallery_default.box.tpl
_templates/orange/css/*gewählteTemplateFarbe*/layout.css


2.) Die lightbox.css etwas abändern. Und zwar:

Code:

#prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

ersetzen mit:

Code:

#prevLink:hover, #prevLink:visited:hover { background: url('images/prevlabel.gif') left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url('images/nextlabel.gif') right 15% no-repeat; }

3.) Den kompletten Inhalt der lightbox.css in die layout.css an deren Ende kopieren


4.) in shape_new.tpl

Code:

<SCRIPT TYPE="text/javascript" src="{$sUrl}js/prototype.js"></SCRIPT>       <SCRIPT TYPE="text/javascript" src="{$sUrl}js/scriptaculous.js?load=effects,builder"></SCRIPT>       <SCRIPT TYPE="text/javascript" src="{$sUrl}js/lightbox.js"></SCRIPT>

einfügen vor:

Code:

<!-- Ende JavaScript -->     </head>

5.) Die product_gallery_default.box.tpl sollte bisher so aussehen:

Code:

<img src="{$aImageBig.0.sPath}" style="{fwpImageSize sFile="$aImageBig.0.sPath" iWidth=300}" alt="" id="bigImage"/> <br/> {foreach from=$aImageSmall item=aImage key=iId}    <img src="{$aImage.sPath}" onclick="document.getElementById('bigImage').src='{$aImageBig.$iId.sPath}';" alt="" /> {/foreach}

Dies wird mit folgendem Code ersetzt:

Code:

{foreach from=$aImageBig item=aImage key=iId}    <a href="{$aImage.sPath}" rel="lightbox[product]"><img src="{$aImageSmall.$iId.sPath}" style="{fwpImageSize sFile="$aImageSmall.$iId.sPath" iWidth=300}" alt="" id="smallImage"/></a> {/foreach}

6.) nach /_templates/orange/css/*gewählteTemplateFarbe*/images kopieren:
nextlabel.gif
prevlabel.gif

7.) Folgende Dateien aus dem LightBox Paket Ordner images nach /images/ kopieren

bullet.gif
close.gif
closelabel.gif
loading.gif

8.) Die Bildlinks in lightbox.js für alle Bilddateien aus dem LightBox Paket anpassen (außer bullet.gif).

9.) Den Inhalt des Ordners js aus dem LightBox Paket nach /js/ kopieren

10.) Die geänderten Datein wieder an ihren Ursprungsort laden.

Viel Spass damit.
Wer noch Macken findet bitte Bescheid sagen.

Edit: product_gallery_default.box.tpl Code überarbeitet.
Edit: Punkt 8 hinzugefügt.

_________________
Heute stehen wir am Abgrund.
Morgen sind wir einen ganzen Schritt weiter.

Ich sag mal kurz und schmerzlos: "Vielen, vielen Dank!" Deine Anleitung hat mir einen Haufen Arbeit erspart.