Thema: Tutorial/Anleitung: Lightbox in Virtuemart

Hallo zusammen

Wieder einmal habe ich nach einer Lösung gesucht und vorerst keinen aktiven Thread gefunden. Also hierzu ein kleines Tutorial zum verwenden der Lightbox unter Virtuemart.

Was brauchen wir:
Lightbox von Huddletogether.com http://www.huddletogether.com/projects/lightbox2/
Virtuemart http://www.virtuemart.net/
Und unglaublicherweise auch Joomla

Ladet euch die Lightbox runter, und kopiert die Ordner

Code:

/images/
/css/
/js/

in euer Template-Verzeichnis hoch. Zur Sicherheit, dass auch alle Bilder angezeigt werden ladet die Bilder aus /images/ in euer /images/ Verzeichnis aus dem JoomlaRoot. Wieso? Weil einige Bilder über das JS und nicht über das CSS zugewiesen werden.

Als nächstes passen wir unser index.php File aus unserem Template an.

Dazu suchen wir folgende Zeile:

Code:

</head>

und fügen folgendes ein:

Code:

<link rel="stylesheet" href="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/lightbox.css"; ?>" type="text/css" media="screen" />
<script type="text/javascript" language="javascript"  src="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/js/prototype.js"; ?>"></script>
<script type="text/javascript" language="javascript"  src="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/js/scriptaculous.js?load=effects"; ?>"></script>
<script type="text/javascript" language="javascript"  src="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/js/lightbox.js"; ?>"></script>

Jetzt ist die Lightbox auf eurer Seite integriert.

Es könnten jetzt Probleme auftreten, dass andere Module nicht mehr funktionieren. Bei mir war das mit AJAX Header Rotator (Joomlaworks.gr) und HeaderImage (Michael Pillwax). Diese musste ich danach leider deaktivieren. Habe zwar versucht MooTools zu integrieren und das so zum laufen zu bringen, aber es klappte nicht. Wer Lösungsvorschläge hat nur her damit!

Als nächstes passen wir folgende Datei an /administrator/components/com_virtuemart/html/templates/browse/browse_x.php (x steht für die ausgewählte ansicht.
Bei Ansicht 1, habt ihr ein riesen JavaScript, bei den andern Ansichten nur ein {TAG}. Diesen komplett entfernen und folgendes einfügen:

Code:

<a rel="lightbox" href="{image_url}product/{product_full_image}">
          <img src="{product_thumb_image}" {image_height} {image_width} border="0" alt="{product_name}" /></a>

Viola! Jetzt funktioniert die Lightbox in der Übersichtskategorie!

Jetzt müssen wir nur noch die /administrator/components/com_virtuemart/html/templates/classes/htmlTools.class.php anpassen.
Bis ganz nach unten scrollen oder sucht nach:

Code:

function vmPopupLink

Darunter findet Ihr eine Zeile mit

Code:

$jslink =

Was nun hinter dem = in "" steht könnt ihr entfernen und mit

Code:

<a href=\"$link\" title=\"$title\" rel=\"lightbox\">$text</a>

ersetzen.

Jetzt sollte das ganze klappen.

Es kann sein, dass das ganze etwas abweicht, weil ich nicht mehr alle Originalfiles angeschaut habe. Aber wer ein klein wenig mit VM und PHP klar kommt, der bringt das hin
Ansonsten einfach mal Fragen!

Konnte ich euch helfen? Dann drückt den "Danke" Button


PS: Ihr könnt nun auch bei anderen Sachen die Lightbox verwenden...

Beispiel:

Code:

<a href="http://www.joomlaportal.de/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

ganz einfach, deine bilder werden nicht gefunden.
versuche rauszufinden mir welchem pfad die bilder aufgerufen werden und dann kopier sie dahin.

ja du musst auf der artikelseite die klasse wieder entfernen.

hmm schwierig. ich habe es nie mit mehreren bildern ausprobiert.

wüsste jetzt auch gerade nicht, wie man das realisieren könnte.
wenn ich mal dazu komme, schau ich es mir an.

sorry, dass ich jetzt so grad nicht weiter helfen kann.