Shopsystem ShopPilot
ShopPilot => Aktuelle FAQ - H?ufige Fragen => Thema gestartet von: admin am August 26, 2009, 16:07:50
-
Beispiel: http://www.shoppilot.de/cgi-bin/demoshops/ep_styleshop/iboshop.cgi?showd180!0,,mouse1 (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.
<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.
<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:
<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>
-
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
hier 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
-
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:
<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 (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)
-
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:
<!--
<div id="zoomdiv">
<a href="javascript:void(0)">
<img src="../images/other/zoom.gif" alt="Ansicht vergrößern" border="0" />
<span><img src="../images/zoom/omouse.jpg" alt="" border="0" /></span></a>
</div>
-->
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
-
Hallo Dani,
Wisst 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...
-
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
-
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
-
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
-
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
-
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
-
Hallo Dani,
hier mal eine Kurzanleitung zum Anlegen ben.def. Felder
Im WC (Workcenter) klickst Du auf "Projekt -> Benutzerdefinierte Datenfelder -> Artikel"
(http://www.woll-insel.at/Bilder/SP-Forum/bendefFeld/bendefFeldanlegen1.png)
Es öffnet sich ein neues Dialogfenster
(http://www.woll-insel.at/Bilder/SP-Forum/bendefFeld/bendefFeldanlegen2.png)
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
(http://www.woll-insel.at/Bilder/SP-Forum/bendefFeld/bendefFeldanlegen3.jpg)
nachdem Du LiveView nochmal gestartet hast, kannst Du den Identifier __BILDZOOM__ verwenden
-
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
-
Aber 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
-
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
-
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
-
Hallo Dani,
das passt schon so mit den Links
Du schreibst das
<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>an die Stelle wo der Link angezeigt werden soll.
Klickt man auf einen der Links (egal welchen) kann man dann alle Bilder in der Lightbox weiterblättern.
Guck mal da (http://www.shoppilot.at/demo-cgi-bin/demo-downloadshop/iboshop.cgi?show304420) (ist zwar hier die Produktseite - funktioniert aber genauso)
auf irgendein "zoom"-Icon klicken und dann kannst Du mit "weiter" oder "zurück" alle Bilder in der Box anschauen.
P.S.: diese Links sind einfaches HTML die Du wie jeden anderen Link an beliebiger Stelle in der Vorlage einbauen kannst
(müssen auch nicht alle beisammen stehen - s. dem Einbau im loopitem-Bereich)
statt dem Textlink "Bild #1" kannst Du auch beliebige Icons oder Thumbnails verwenden
P.PS.: Dein erstes Bild ist dann ../__BILDZOOM__ wenn Du dann noch BILDZOOM1, BILDZOOM2 und BILDZOOM3 angelegt hast
-
Vielleicht zur besseren Verständlichkeit, hier der HTML Code aus meiner Seite:
<a href="../__BILDZOOM__" rel="lightbox[roadtrip]"><img src="../images/other/zoom.png" alt="Ansicht vergrößern" width="25" height="25" border="0" /> Zoom</a>
Wenn ich nun alle Links unten einbaue, dann habe ich ja "Bild #1, Bild#2 usw." angezeigt auf der Seite, dass ist es ja aber nicht, es soll nur 1 Zoom Link angezeigt werden.
Dani
-
Dann musst Du die anderen ausblenden
<a href="../__BILDZOOM__" rel="lightbox[roadtrip]"><img src="../images/other/zoom.png" alt="Ansicht vergrößern" width="25" height="25" border="0" /> Zoom</a>
<div style="display: none;"><a href="../__BILDZOOM1__" rel="lightbox[roadtrip]"> </a><a href="../__BILDZOOM2__" rel="lightbox[roadtrip]"> </a><a href="../__BILDZOOM3__" rel="lightbox[roadtrip]"> </a></div>
ander Möglichkeit wäre z.B.:
Ansichten: 1 2 3 4
(das 1 2 usw event. durch kleine Vorschaubilder ersetzen)
-
Habe das ganze nun wie folgt eingebaut:
<a href="../__BILDZOOM__" rel="lightbox[roadtrip]"><img src="../images/other/zoom.png" alt="Ansicht vergrößern" width="25" height="25" border="0" /> Zoom</a>
<div style="display: none;">
<a href="../__BILDZOOM1__" rel="lightbox[roadtrip]"> </a>
<a href="../__BILDZOOM2__" rel="lightbox[roadtrip]"> </a>
<a href="../__BILDZOOM3__" rel="lightbox[roadtrip]"> </a></div></div>
Es ist nun tatsächlich nur noch ein Link vorhanden, funktioniert immer noch, aber die Grafiken weiter und zurück werden nicht angezeigt. Somit wird mir nur ein Bild angezeigt, obwohl ganz unten im Bild steht "1 Bild von 4".
Dani
-
Es geht, es geht!!!!!!!!!!!!!
Hatte bei der "lightbox.css" noch einen falschen Pfad drinnen bei diesen vor und zurück Grafiken!
Ich hoffe jetzt tut alles wie es sollte.
Besten Dank dobra, einmal mehr!!! :-D
Grüessli
Dani
-
Hallo,
erstmal vielen Dank für die Lightbox, sie ist uns sehr nützlich.
Leider funktionniert sie mit Mozilla Firefox nicht, obwohl mit Internet Explorer alles super läuft.
Wenn man auf dem Bild klickt, bekommt man das Bild in einem neuen Fenster...
Ich habe die Einstellungen von meinem Browser geprüft: Pop-Up Fenster sind aktiviert, sowie JS-Skript und JS.
Habt ihr eine Idee, warum es nicht funktionniert?
Vielen Dank im Voraus!
-
Hallo,
das hat nichts mit IE oder FF zu tun. Es liegt daran, dass Sie die Scripte nicht richt richtig eingebunden haben, bzw. auf lokale Dateien verweisen.
Da steht z.B.
<script type="text/javascript" src="file:///X:/vac-shop/vac-shop.com%20aktuell/js/lightbox.js"></script>
Da muss eineURL hin, die auf die lighbox.js auf Ihrem Server verweist.
Gruß hop