Magic Zoom und/oder jQZoom für modified eCommerce Shopsoftware

[speedy]

Das ist ja eine klasse Geschichte.
Habs noch nicht selbst versucht, aber wenn das wirklich so schön mit der Thickbox harmoniert, wäre das dann nicht etwas für modified eCommerce Shopsoftware ?
Wäre ja wieder ein Highlight...

Die Kritik mit den ganzen CSS-Dateien im Javascript-Verzeichnis des Templates könnte man wirklich annehmen.
Am Besten alles in ein Verzeichnis "css" verschieben.

[Tomcraft]

Schick, das schaue ich mir auch nochmal genauer an!

Grüße

Torsten

[DokuMan]

"jQZoom" ist unter der GPL lizenziert im Gegensatz zu "Magic Toolbox" (kostenpflichtig)

[Tomcraft]

DokuMan,

worauf bezieht sich dein Beitrag?

Grüße

Torsten

[vinznvegas]

Danke für die Anleitung, hat super geklappt!

[Tomcraft]

Naja, jetzt nicht so das Hexenwerk.

jQZoom runterladen und entpacken.

css/jqzoom.css öffnen und

Code: CSS  [Auswählen]

   background-image: url(../images/zoomloader.gif);

ändern in

Code: CSS  [Auswählen]

   background-image: url(../img/zoomloader.gif);

Das Bild images/zoomloader.gif nach templates/xtc5/img/ hochladen, css/jqzoom.css und js/jqzoom.pack.1.0.1.js nach templates/xtc5/javascript/ (das css hat da zwar eigentlich nichts verloren, aber es scheint bei modified eCommerce Shopsoftware so üblich zu sein, dass da keine wirklich Ordnung drin ist, siehe Thickbox).
templates/xtc5/javascript/general.js.php öffnen und am Ende einfügen:

Code: XML  [Auswählen]

<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jqzoom.css" type="text/css" media="screen" />
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

templates/xtc5/javascript/thickbox.js öffnen und nach

Code: Javascript  [Auswählen]

        imgLoader.src = tb_pathToImage;

einfügen:

Code: Javascript  [Auswählen]

        var options = {
                xOffset: 20,
                yOffset: 0,
                zoomType: 'reverse'
        }
        $('.jqzoom').jqzoom(options);

Das Produkttemplate (normalerweise templates/xtc5/module/product_info/product_info_v1.html) öffnen und alle

Code: XML  [Auswählen]

class="thickbox"

durch

Code: XML  [Auswählen]

class="thickbox jqzoom"

ersetzen.

Mit den Optionen für jQZoom kann man natürlich spielen wie man lustig ist.

Fertig.

Mensch Matt... bei den Stiften gibt es im Zoom ja richtig was zu entdecken!

Wirklich hübsch gemacht!

Grüße

Torsten

[guensi]

Hab das mal testweise ausprobiert, echt schicke Sache.

Einbau problemlos, das Teil funktioniert einwandfrei.

Aber - Mouseover ist die Lupe, Mausklick öffnet weiterhin das (als Grundlage der Lupe dienende) Detailbild in der Thickbox. An sich nicht schlecht, denn das Detailbild ist ne ruhigere Sache als die wandernde Lupe.

Aber so kein echter Mehrwert, sondern nur ein redundantes Gimmick. Optimal wäre das nun, wenn die Lupe Details zum Vorschein brächte, die über die Darstellung des Detailbildes hinaus gehen.

Dazu bräuchte man entweder ein eigenes Detailbild für die Lupe, oder vielleicht noch eleganter, gleich ein größeres Detailbild, dessen Darstellung in der Thickbox kleiner skaliert wird.

Die Lupe müsste dann die Auflösung des Originalbildes darstellen. Das wäre dann nochmal ein zusätzlicher optischer Genuß.

[Tomcraft]

Ich bin auch hin und her gerissen, aber die Einwände von guensi stimmen schon.

Wird erstmal nicht in modified eCommerce Shopsoftware übernommen. Kann sich ja dank der super Anleitung jeder binnen Minuten selber einbauen.

Grüße

Torsten

[Matt]

Ich teile eure Meinung, dass das nur ein Gimmick ist.

Das mit den unterschiedlichen Bildern ist BTW nur möglich, wenn man eines der beiden Plugins umschreibt, denn beide bedienen sich aus dem href des umgebenden a-Tags.

[Johnnycash]

Jup... hat super geklapt mit der Anleitung  

Hihi... dann hab ich das auch schonmal drin für meinen neuen Shop

 

Greetz
Johnny

[BJunior]

Naja, jetzt nicht so das Hexenwerk.

jQZoom runterladen und entpacken.

css/jqzoom.css öffnen und

Code: CSS  [Auswählen]

   background-image: url(../images/zoomloader.gif);

ändern ind

Code: CSS  [Auswählen]

   background-image: url(../img/zoomloader.gif);

Das Bild images/zoomloader.gif nach templates/xtc5/img/ hochladen, css/jqzoom.css und js/jqzoom.pack.1.0.1.js nach templates/xtc5/javascript/ (das css hat da zwar eigentlich nichts verloren, aber es scheint bei modified eCommerce Shopsoftware so üblich zu sein, dass da keine wirklich Ordnung drin ist, siehe Thickbox).
templates/xtc5/javascript/general.js.php öffnen und am Ende einfügen:

Code: XML  [Auswählen]

<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jqzoom.css" type="text/css" media="screen" />
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

templates/xtc5/javascript/thickbox.js öffnen und nach

Code: Javascript  [Auswählen]

        imgLoader.src = tb_pathToImage;

einfügen:

Code: Javascript  [Auswählen]

        var options = {
                xOffset: 20,
                yOffset: 0,
                zoomType: 'reverse'
        }
        $('.jqzoom').jqzoom(options);

Das Produkttemplate (normalerweise templates/xtc5/module/product_info/product_info_v1.html) öffnen und alle

Code: XML  [Auswählen]

class="thickbox"

durch

Code: XML  [Auswählen]

class="thickbox jqzoom"

ersetzen.

Mit den Optionen für jQZoom kann man natürlich spielen wie man lustig ist.

Fertig.

Hallo,

Ich habe obige Anleitung ausgeführt.
Bei mir läuft das ganze leider nicht.
Wurde es bei V1.03 getestet?

In meiner Download zip Datei gibt es noch die Datei jquery-1.2.3.min.js
Was ist mit dieser zu machen?

Muß der Demo Ordner auch noch aufgespielt werden?
Wenn ja wohin?

Bezieht das Zoom Tool die Bilder aus der Datenbank?

Gruß

BJunior

[gelbor1]

habe es mit xtc 1.03 getestet lüppt wunderbar alles. Einfach mal den cache leeren dann klappt's.

[BJunior]

Hallo,

cache ist geleert.
Es ist aber immer noch das normale Bild mit dem Schalter "Bild vergrößern" da.

Gruß

BJunior

[Matt]

Firebug nehmen und nach Fehlern suchen musst du leider selber, meine Glaskugel hat grad Probleme mit der Stromversorgung.

[BJunior]

Hallo,

muß ausser obiger Anleitung noch etwas anderes geändert werden?

Auf der seite des Programmierers steht noch folgendes:

Add first the last jQuery release, then the jQZoom script(don't forget this),the correct order is important.Look at the installation code below.

Code: XML  [Auswählen]

<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
 

Add jqzoom.css to your header.

Code: XML  [Auswählen]

<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
 

Das Letzte muß in die header.php?
Wohin gehören die ersten beiden Zeilen?

Firebug ist mir leider etwas zu hoch.
Testet dass Programm Internetseiten nach Fehlern?

Ich habe leider vom programmieren keinen blassen Schimmer.

Gruß

BJunior