Ich arbeite ja seit einiger Zeit an einem Onlineshop-Projekt, welches VirtueMart unter Joomla! benutzt.
Hier gibt es das tolle Feature, dass Produktbilder in der Vergrößerungsansicht statt in einem Pop-Up in einer so genannten Lightbox geöffnet werden. Das ist im Grunde auch eine Art Pop-Up, jedoch nicht in einem neuen Browserfenster, sondern direkt im gleichen Fenster, wo der Rest der Webseite in den Hintergrund (und meisten abgegraut) rückt. Praxisbeispiel siehe Abbildungen unten ;-)

Nun ist es so, dass unter (scheinbar) normalen Umständen die Produktabbildungen im Shopsystem Virtuemart in zwei Lightboxes, die übereinander liegen, geöffnet werden. Der Grund hierfür ist simpel: zum einen bietet das (Standard-?) Plugin „YOOeffects“ eine Lightbox für Bildverknüpfungen an, und das Joomla!-Modul VirtueMart eben auch. Wenn in beiden die Lightbox aktiviert ist, werden eben auch beide geöffnet.

Lightbox von VirtueMart

Die VirtueMart Lightbox heisst eigentlich „Slimbox„. Diese Information is wichtig, wenn ihr danach im Quellcode suchen wollt – ich habe mir einen Wolf nach dem entsprechenden Scriptaufruf gesucht, bevor ich das wusste. Die Slimbox kann man ein-/abschalten in den Einstellungen unter „Administration / Konfiguration“ -> „Seite“, dort unter „Layout“ im Punkt „Wählen Sie das Thema/Stil für den Shop“ diesen kleinen „Konfuguration“-Link klicken.

VirtueMart Slimbox deaktivieren Schritt 1

Hier kann man dann unter „Open Product Images in a LightBox?“ eifnach „No“ auswählen. Dies hatte bei mir aber zur Folge, dass die Produktabbildungen gar nicht mehr in einer Lightbox, sondern in einem Browser-Pop-Up geöffnet wurden.

VirtueMart Slimbox deaktivieren Schritt 2

Also: Kommando zurück und die andere Lightbox deaktivieren.

Lightbox von Joomla! / YOOeffects

Im Joomla!-Menü unter „Erweiterungen“ die „Plugins“ aufrufen und dort auf YOOeffects klicken, um in die Einstellungen für das Plugin zu gelangen. Das Plugin kann sich auf der zweiten Seite befinden, das Joomla! standardmässig nur 20 Einträge pro Seite anzeigt, hier also ggf. weiter blättern.

Hier kann man in den Plugin-Einstellungen bei „Lightbox“ einfach „Nein“ auswählen und schon ist das Problem gelöst! :-)

YOOeffects Lightbox deaktivieren

Die Produktabbildungen werden übrigens nur dann in der Slimbox geöffnet, wenn im jeweiligen Produkt keine URL angeben ist. Denn dies ist die URL, mit der das Bild im Frontend verlinkt werden soll (URL leer bedeutet also, „Großes Bild aufrufen“). Die Lightboxen funktionieren auch normalerweise nur dann, wenn der Link direkt auf eine Bilddatei verläuft und im <a href=“…“>-HTML-Tag der Schnipsel rel=“lightbox“ mitgeschleppt wird, was das Plugin aber bei korrekter Installation per JavaScript von selbst erledigt.

VirtueMart Produktdetail-URL entfernen, um Großbildansicht (in Lightbox oder Browser-pop-Up) zu aktivieren.

Button-Grafiken der VirtueMart Slimbox hinzufügen

Jetzt fehlten aber bei der VirtueMart-Slimbox – zumindest bei mir – noch die Buttons (vorheriges Bild, nächstes Bild, Schliessen). Nachdem ich im HTML-Quellcode den Scriptaufruf gefunden hatte, wusste ich auch, in welchem Pfad ich danach suchen sollte: In /components/com_virtuemart/js/slimbox/css findet sich die CSS-Datei, die steuert wie die Slimbox aussehen soll. Hier erfährt man auch, ob die Buttons aufgerufen werden, in welchem Pfad die liegen sollen und wie deren Dateiname ist.

Pfad

Ganz einfach. Ein Blick in das CSS verrät alles.

#lbPrevLink:hover {
	background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

Die Dateien liegen also im gleichen Verzeichnis, wie das CSS für die Slimbox.

Dateinamen

Die Dateien heissen

  • blank.gif
  • closelabel.gif
  • loading.gif
  • nextlabel.gif
  • prevlabel.gif

Aufruf der Button-Dateien

Kann man ganz einfach checken. Im Slimbox-CSS sollten folgende Zeilen (an unterschiedlichen Stellen) enthalten sein:

.lbLoading {
	background: #fff url(loading.gif) no-repeat center;
}
#lbPrevLink:hover {
	background: transparent url(prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink:hover {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}
#lbCloseLink {
	background: transparent url(closelabel.gif) no-repeat center;
}

Bei dem Close-Link standen bei mir noch mehr Werte, die dessen Erscheinungsbild definieren – aber die sin an dieser Stelle ja nicht so wichtig. Wenn die Dateien von einem anderen Ort abrufen werden sollen, kann das hier in der url()-Variablen angegeben werden.

Ich habe mir die entsprechenden Grafiken besorgt und ins Verzeichnis hochgeladen. Neu einem Chache-bereinigtem Neuladen der Produktdetailseite (Strg+F5 statt nur F5 – denn das CSS muss ja auch neu geladen werden) wurden die Buttons dann auch angezeigt.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.