Produktbilder in einer Lightbox auf Shopseiten darstellen

admin · August 26, 2009, 16:07:50

Beispiel: http://www.shoppilot.de/cgi-bin/demoshops/ep_styleshop/iboshop.cgi?showd180!0,,mouse1
Eines der bekanntesten Lightbox Scripte ist von Lokesh Dhakar (http//www.huddletogether.com/projects/lightbox2/#overview)

Dieses habe ich für unsere Zwecke leicht modifiziert. Die Dateien findet man unten als zip, welches einfach im Shop-Projektordner zu entpacken ist.
Es wird davon ausgegangen, dass die HTML-Templates in einem Unterordner sind (also z.B. html_de).

Die Einbindung ist ganz einfach:
Im Headerbereich ist eine CSS-Datei und drei Javascriptdateien einzubinden.

Code [Auswählen]


<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/scriptaculous.js"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>

An der Stelle wo das Bild aufgerufen werden soll, schreibt man nur einen Link.

Code [Auswählen]


<a href="../__BILDZOOM__" rel="lightbox">
<img src="../images/other/zoom.gif" alt="Ansicht vergrößern" border="0" /></a>
</a>

Dann kann das BILDZOOM per Klick auf den verlinkten Bereich in der Lightbox dargestellt werden.

Es besteht auch die Möglichkeit mehrer Bilder darzustellen, die man dann in der Lightbox durchblättern kann:

Code [Auswählen]


<a href="../__BILDZOOM1__" rel="lightbox[roadtrip]">Bild #1</a>
<a href="../__BILDZOOM2__" rel="lightbox[roadtrip]">Bild #2</a>
<a href="../__BILDZOOM3__" rel="lightbox[roadtrip]">Bild #3</a>

dobra · August 26, 2009, 19:09:35

Hallo,

bei mir hat der IE beim Versuch, eine Detailseite mit Lightbox aufzurufen, die Meldung
"... Seite ... kann nicht aufgerufen werden - Vorgang abgebrochen"
ausgegeben.
Im FF keinerlei Fehlermeldungen - weder in der Konsole noch sonstwo

Nachdem ich den Fehler jetzt 2 Stunden vergeblich gesucht habe, hab ich - google ist mein Freund ;) - jetzt eine Lösung gefunden

Zitathier will ich nur eine Lösungsmöglichkeit geben
für ein Problem welche manche mit der Lightbox2
und dem InternetExplorer haben.

Der Fehler "Die Internetseite kann nicht geöffnet werden. Vorgang abgebrochen. " erscheint nicht wenn der folgende Teil nicht im <head> Bereich sondern vor </body> eingebunden wird:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

bei mir hat's genutzt :) - jetzt zeigt auch der "Unbrowser" die Lightbox ohne gemecker an

dobra · August 27, 2009, 07:20:14

Hallo,

noch ein Tipp:

die Lightbox funktioniert ja mit JS - wenn JS deaktiviert ist, wird das Bild in einem neuen Fenster angezeigt.
Eine Möglichkeit wäre, den Lightbox-Link nur Besuchern anzuzeigen, die JS aktiviert haben und Besuchern ohne JS ein alternatives css-Zoom

Beispie:

Code [Auswählen]

<script type="text/javascript">   <!-- Lightbox -->
	document.write( '<br><center><a href="../__BILDZOOM__" rel="lightbox[roadtrip]"><img style="border:none;" src="../images/other/zoom2.gif" alt="Ansicht vergrößern" border="0"></a></center>' )
</script>
<noscript>	   <!-- Das Zoom-Bild wird per CSS angezeigt -->	
<div class="zoomdiv">         
	   <center><a href="javascript:void(0)"> <img style="border:none;"src="../images/other/zoom2.gif" alt="Ansicht vergrößern" border="0">
			  <span>__show::zoomimage__</span>
	   </a></center>
</div>
</noscript>

Tipp 2:

Wenn man (z.B. auf Produktseiten) den Lighboclink im loopitem-Bereich verwendet und rel="lightbox[roadtrip]" schreibt, kann der Besucher in der Box weiterblättern.
Beispiel: http://www.shoppilot.at/demo-cgi-bin/demo-downloadshop/iboshop.cgi?show304420
(Hinweis = das ist eine unfertige Testseite ;))

Tipp 3:

Wenn Ihr experimentieren wollt: versucht es NICHT mit animierten gif's!
ich hab's getan weil ich ja immer alles testen muss ;)
Ergebnis = man kommt in eine Endlosschleife aus der man sich nur "befreien" kann, indem man SP killt (= Datenverlust)

schoenebeine.ch · September 05, 2009, 08:36:22

Guten Morgen beisammen

Als ich gesehen habe dass das Lightscript beschrieben worden ist musste ich mich gleich darum kümmern. Habe schon vor längerer Zeit damit rum gespielt und versucht einzubauen.

Nun sollte das ja kein Problem sein, da man es auf den ShopPilot zugeschnitten hat. Das Script läuft soweit auch einwandfrei (Kästchen geht auf und der Hintergrund wird abgedunkelt), mit der einzigen unschönen Sache, dass mir kein Bild angezeigt wird, nur ein rotex X.

Das Problem liegt sicherlich am "___BILDZOOM__", dass bei mir auf ein Verzeichnis zeigt, wo all die grossen Bilder abgelegt sind.
Siehe anschliessend meinen Eintrag in der HTML Seite:

<a href="../images/1000x1000/__BILDZOOM__" rel="lightbox">
<img src="../images/other/zoom.png" alt="Ansicht vergrößern" width="25" height="25" border="0" />  Zoom</a>

Ich möchte ja nicht einen Link einbauen zu dem Bild, je nachdem welches Produkt im Shop angezeigt wird, will ich von dem eine Grossansicht öffnen.
Irgend wie erschliesst mir nicht, wie das Bild im Shop (das klein dargestellt wird) über den Link "Zoom" geöffnet werden kann?!?! Also genau das Bild wo der Zoom Link steht soll in grosser Ansicht aufgehen.

Fehlt mir noch ein Java Eintrag oder ein CSS Regel?

Habe gesehen das im Demoshop folgender Eintrag ist, den ich nicht habe:



Aber genau da wird ein fixer Link auf ein Bild gemacht das gross angezeigt werden soll, was ich ja nicht will, ich möchte nicht für 300 Artikel fixe Links einbauen.

Wisst Ihr was ich meine :-|

Gruss
Dani

dobra · September 05, 2009, 09:00:53

Hallo Dani,

ZitatWisst Ihr was ich meine :-|

ne - sorry, hab das jetzt 3x gelesen, aber nicht wirklich kapiert, was Du eigentlich machen willst ;)

Hier <a href="../images/1000x1000/__BILDZOOM__" rel="lightbox"> muss der Pfad zu dem Bild eingetragen werden, das Du anzeigen willst
wenn Du - wie Du schreibst - die Bilder schon in BILDZOOM liegen hast, darfst Du NICHT nochmal "images/1000x1000/" dzuschreiben, da ja sonst
<a href="../images/1000x1000/images/1000x1000/xx.jpg" ...
ausgegeben würde

Aber ohne konkrete Angaben ist das nur eine Vermutung...

schoenebeine.ch · September 05, 2009, 09:16:53

Entschuldige dobra das dies so kompliziert geschrieben ist :-)

Wie gesagt, dass Hauptproblem ist das mir kein Bild angezeigt wird, nur ein rotes X.

Meine grossen Bilder (die ja mit dem Lightscript angezeigt werden sollen, mit dunklem Hintergrund), die sind alle im Verzeichnis "../images/1000x1000/" abgelegt.
Das __BILDZOOM__ setzten ich ja dahinter, damit Bild "../images/1000x1000/xxx.jpg" geöffnet wird. Das __BILDZOOM__ wird durch "xxx.jpg" ersetzt und damit __BIDZOOM__ weiss wo die grossen Bilder sind, habe ich den Pfad: <a href="../images/1000x1000/__BILDZOOM__" rel="lightbox"> angegeben.

Oder ist das falsch?
Du schreibst ich hätte 2 mal "images/1000x1000/" geschrieben!

Dani

dobra · September 05, 2009, 09:24:25

also jetzt nochmal langsam - um die Tageszeit funktionieren meine grauen Zellen noch nicht so schnell ;)

ist das BILDZOOM ein Typ "Datei Bild " oder ein "Text Zahl" Feld?
(das siehst Du, wenn Du im WC den ben.def Feld - Dialog aufrufst)

und WAS steht da drin (bei Artikel)?
wenn es ein Typ "image" Feld ist, steht da schon der Pfad (also das "images/1000x1000/xx.jpg") dabei

gib mal zur Kontrolle einfach __BILDZOOM__ an beliebiger Stelle in der Vorlage aus und schau, was da angezeigt wird

schoenebeine.ch · September 05, 2009, 09:35:41

Ich denke das Problem ist eher auf meiner Seite :-(

__BILDZOOM__ ist doch ein "Identifier"! Alle Identifier beginnen und enden mit __xx__
D.h. (so verstehe ich das), __BILDZOOM__ ist ein Platzhalter (oder Variable) für etwas das folgt, also in diesem Fall Bild xx.jpg oder Bild xxx.jpg oder Bild xxxx.jpg.
Habe ich das mit dem __BILDZOOM__ nicht kapiert?

Sorry, was ist WC (Warenkorb)?

Bei mir in der HTML Vorlage wird folgende Angabe gemacht bevor der ZOOM Link kommt:
__produkt__
__image__

<a href="__BILDZOOM__" rel="lightbox">
<img src="../images/other/zoom.png" alt="Ansicht vergrößern" width="25" height="25" border="0" />  Zoom</a>

Dani

dobra · September 05, 2009, 09:42:46

WC = Workcenter

hmmmmmmmmmmmmmm - kann es sein, dass Du garkein benutzer definiertes Feld BILDZOOM angelegt hast :o

OK, __irgendwas__ ist ein Platzhalter, ja
aber ein Platzhalter kann ja nur das ausgeben, was auch irgendwo definiert ist ;)

also nochmal von Anfang:
1) Du legst ein ben.def. Artikelfeld BILDZOOM (Typ "Datei Bild") an
2) DB neu anlegen damit das Feld auch verfügbar ist
3) Du wählst bei den Artikeln in diesem Feld Dein Bild aus
4) LiveView starten - JETZT ist es auch mit __BILDZOOM__ aufrufbar
5) mit <a href="../__BILDZOOM__" rel="lightbox"> sollte es dann auch korrekt angezeigt werden, da der Pfad ja schon in BILDZOOM hinterlegt ist

Achtung: das ../ vor __BILDZOOM__ nicht vergessen

schoenebeine.ch · September 05, 2009, 09:48:13

Da muss es sein dobra

Ich habe so etwas für das _BILDZOOM__ noch nie gemacht :-( Deshalb ist __BILDZOOM__ im Moment einfach leerer Text!
Kam noch nie in die Situation das machen zu müssen.

Ich werde dies gleich mal machen, muss aber vorher für ca. 1.5 Std.

Melde mich aber ganz sicher wieder wie es weiterging.

Ich bin Dir SOOOO dankbar für Deine Hilfe! ! ! !

Merci und bis später.
Dani

dobra · September 05, 2009, 10:23:35

Hallo Dani,

hier mal eine Kurzanleitung zum Anlegen ben.def. Felder

Im WC (Workcenter) klickst Du auf "Projekt -> Benutzerdefinierte Datenfelder -> Artikel"

Es öffnet sich ein neues Dialogfenster

hier trägst Du in rechten Teil den Namen den Du haben willst ein (in unserem Beispiel "BILDZOOM")
unterhalb hast Du die Dropdownliste, welchen Typ das neue Feld haben soll
(hier jetzt "Datei Bild" anklicken - ist hier nichts ausgewählt, wird das Feld mit Typ "Text Zahl" angelegt)
Du kannst dann auch noch den Haken setzen für "auch für Varianten anlegen" wenn Du ein Feld auch für Varianten brauchst
(Hinweis: im Zweifelsfall auch für Vari anlegen - das kann man leider dann im Nachhinein nicht mehr ändern)
jetzt auf den Button "<- Hinzugügen/ändern" = das Feld steht jetzt im linken Teil und dann auf "fertig" klicken

Nach anlegen oder ändern eines neuen Feldes muss die DB (lokal und online) neu angelegt werden.

Dann LiveView neu starten und bei den Artikeln das gewünschte Bild auswählen und auf "übernehmen" klicken

nachdem Du LiveView nochmal gestartet hast, kannst Du den Identifier __BILDZOOM__ verwenden

schoenebeine.ch · September 05, 2009, 12:30:55

Du bist die Beste! ! !

Vielen vielen Dank für die ausführliche Beschreibung!
Habe dies alles gemacht und nun funktioniert es auch mit dem Aufruf, sprich es wird ein Bild gefunden.

Aber muss ich jetzt jedes einzelne Bild unter "Benutzderdef. und BILDZOOM" dem entsprechenden Artikel zuweisen?
Wäre ziemlich arbeit ;-)

Liebe Grüsse
Dani

dobra · September 05, 2009, 12:57:19

ZitatAber muss ich jetzt jedes einzelne Bild unter "Benutzderdef. und BILDZOOM" dem entsprechenden Artikel zuweisen?

naja - irgendwie müssen die Bilder ja dem Artikel zugewiesen werden ;)
wie soll die Lightbox sonst wissen welches Bild gerade angezeigt werden soll.

zeigst Du diese "großen Bilder" jetzt auch irgendwie an?
Wenn es z.B. die Detailbilder sind - also unter Detail -> Abbildung eingetragen - oder Du hast die Bilder mit der Bildverarbeitung erstellt und sie haben den Namen der Artikelnummer kannst Du das auch global mit ssp machen.
... keine Angst, ich schreib Dir den Code wenn es so ist ;)
aber dazu brauche ich genaue Angaben.

Wenn das aber "neue" = noch nicht bei den Artikeln irgendwo eingetragen Bilder sind, dann bleibt Dir nichts anderes übrig, als sie einzeln im BILDZOOM-Feld einzutragen oder zu importieren

schoenebeine.ch · September 05, 2009, 13:13:14

Wirklich nett von Dir!

Aber werde jetzt betr. der Detail Bilder selbst noch etwas pröbeln mit der .csv Datei, denke da drüber müsste es gehen.

Die Bilder werden jetzt vom richtigen Ort genommen und genau in dieser Grösse angezeigt, dass funktioniert einwandfrei.
Die Bilder haben den Namen der Artikelbezeichnung, aber wie gesagt, werde es zuerst mal über .csv versuchen bevor ich mich (mir Dir) an ssp wagen würden.

Vorerst mal ganz vielen herzlichen Dank für Deine Unterstützung!!!
Gib für mich halt doch immer wieder neues zu entdecken.

Hab ein ganz schönes Wochenende und auf ein andermal wieder.

Liebe Grüsse
Dani

schoenebeine.ch · September 06, 2009, 11:21:39

Hallo dobra

Jetzt funktioniert das ganze tipp top und ich muss die Bilder nicht mal über .csv einbinden, sondern kann dies über die "Bildverarbeitung..." im WC steuern.

Nun habe ich aber noch ein letztes Problem. Ich habe bis BILDZOOM3 neue Benutzerfelder eingerichtet, d.h. unter "Benutzerdef." habe ich 4 Bilder die angeschaut werden können.
Aber wie kann ich nun blättern, wo genau muss ich den Code unten einbauen damit im Lightscript die Buttons weiter und zurück erscheinen und die Bilder natürlich auch angezeigt werden? :-(

<a href="../__BILDZOOM1__" rel="lightbox[roadtrip]">Bild #1</a>
<a href="../__BILDZOOM2__" rel="lightbox[roadtrip]">Bild #2</a>
<a href="../__BILDZOOM3__" rel="lightbox[roadtrip]">Bild #3</a>

Eigentlich wäre das Script ja einfach einzubauen, aber damit die funtionalität im Shop gewärleistet ist muss man gewisse Shopeigene Wege einhalten, die mir teilweise einfach nicht bekannt sind.

Gruss
Dani