MODUL: Cloud Zoom als Alternative zu MagicZoom

[DefCon2k]

Hallöchen,

hier mal meine erstem Ergebnisse für die Einbindung der Cloud-Zoom Bildervorschau. Ich finde sie persönlich besser, da das Script kostenfrei ist.

Getestet habe ich in folgenden Browsern: IE6-8, FF, Opera, Chrome und Safari, es hat überall funktioniert.

Die Anordnung der weiteren Vorschaubilder habe ich ebenfalls angepasst (ist auch so in der Doku mit drinne), das sollte aber jeder nach seinem Geschmack entscheiden. Des weiteren habe ich noch ein wenig Text hinzugefügt (siehe Screenshots).
Eine Live- Demo gibt es momentan noch keine, da ich derzeit lokal mit XAMPP arbeite.

Bitte denkt daran: Backup vor dem Einbinden!

Wäre cool, wenn der ein oder andere von euch es mal testen könnte.

Gruß Tobias

  [ Für Gäste sind keine Dateianhänge sichtbar ] [ Für Gäste sind keine Dateianhänge sichtbar ]

[EDIT web28 29.08.2010: Download aktualisiert auf Version 1.2]
[EDIT Tomcraft 08.05.2011: Danke an nicson für eine erweiterte Version, die auch mit der ThickBox funktioniert.]
[EDIT Tomcraft 07.01.2012: Danke an sgieselmann für eine alternative erweiterte Version, die auch mit der ThickBox funktioniert.]

Linkback: https://www.modified-shop.org/forum/index.php?topic=7650.0

[Tomcraft]

Prima! Vielen Dank!

Na dann teste mal fleißig und gebt uns Rückmeldung!

Grüße

Torsten

[armandogarcia]

Geilomat! Genau das hat mir noch gefehlt !

DU BIST MEIN HELD!!!  



Läuft perfekt, genau dass was ich gesucht habe, war mit jqzoom schon zufrieden, aber cloudzoom ist noch viel besser, dank der Funktion mit den more_images, Anleitung ist auch gut, hab's in ca. 5 - 10 minuten korrekt installiert.

DICKES DANKE!!!

Gruß

Armando

[DefCon2k]

Hi Armando,

Danke für die Blumen

Gruß Tobias

[armandogarcia]

nur eine kleine Sache, wo gibt man die Parameter genau an, ich hab z. B. ZoomWidth 400 und ZoomHeight 350

hab das auch in

cloud-zoom.1.0.2.js und cloud-zoom.1.0.2.min.js eingegeben nur es funktioniert nicht

das waren meine jqzoom Einstellungen

Code: Javascript  [Auswählen]

        var options = {
        zoomWidth: 400,
        zoomHeight: 350,
        xOffset: 30,
        yOffset: 0,

        hideEffect: 'fadeout',
        fadeoutSpeed: 'medium',

        zoomType: 'reverse'
        }
        $('.jqzoom').jqzoom(options);
 

vielleicht kannst du mir auf die Sprünge helfen

[DefCon2k]

Hi,

die werden in der product_info_v1.html angegeben.

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="cloud-zoom cloud-zoom-gallery" id="zoom1" rel="adjustX: 10, adjustY:-4, zoomWidth: 300, zoomHeight:300" style=" position: relative; display: block;"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" /></a>
 

Die Parameter gibst du im "rel" Part ein.
Die genauen Parameter findest du unter:

http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm

unter "JavaScript Setup Parameters"

In deinem Fall die Werte für zoomWidth und zoomHeight anpassen.
Einfach mal ein wenig ausprobieren!

Gruß Tobi

[armandogarcia]

hab da gar nicht genau hingesehen, Danke, klappt jetzt wunderbar

[DefCon2k]

Da fällt mir gerade doch noch etwas auf:

wenn du im Adminbereich "product_info_tabs_v1.html" oder die "product_info_x_accordion_v1.html" auswählst, fällt er wieder auf die Thickbox zurück. Das heißt, die gleichen Änderungen wie in der "product_info_v1.html" müssen auch hier vorgenommen werden.

Ich werde das noch in der Anleitung nach pflegen, aber der zu ändernde Code ist der gleiche wie in der Anleitung.

Gruß Tobi

[speedy]

Habe mir die Lösung bislang nur vom Quelltext angesehen. Vielen Dank dafür.

Ich würde jedoch nicht einfach in CSS das #wrap ersetzen.
Man sollte eher ggf. die Javascript-Dateien überarbeiten, als eine Basis-ID in CSS zu entfernen.
Wrap wird z.B. auch noch in der offline.html verwendet, was es ja dann nicht mehr gäbe.
Klar kann man die offline.html auch noch korrigieren, doch sollte man schon kompatibel zum Standard bleiben.

[DefCon2k]

Hi Speedy,

genau aus dem Grund war ich mir nicht schlüssig, wo man was ändern sollte.
Und dass auch die offline.html die ID #wrap enthält, hatte ich nicht gesehen.
Also, prinzipiell ist die Änderung des Javascripts und die Anpassung der zugehörigen CSS kein Hexenwerk, es müsste halt nur mit jeder neuen Version von CloudZoom wieder manuell angepasst werden!
Und es würde natürlich die Einbindung um  zwei Schritte verkürzen!

Also, wenn ihr wollt, kann ich das Modul dementsprechend gerne nochmal akutalisieren.

Was anderes noch: soll ich die Anleitung noch um die Aktualisierung der "product_info_tabs_v1.html" und der "product_info_x_accordion_v1.html" erweitern? Macht das Sinn?

Gruß Tobi

[unicato]

Hi DefCon2k,

[...]
Also, wenn ihr wollt, kann ich das Modul dementsprechend gerne nochmal akutalisieren.

Was anderes noch: soll ich die Anleitung noch um die Aktualisierung der "product_info_tabs_v1.html" und der "product_info_x_accordion_v1.html" erweitern? Macht das Sinn?

Gruß Tobi

Ich als Newbie bin dafür, wenn Du mich fragst

[DefCon2k]

Servus,

mein Problem hierbei ist, das ich momentan nur einen lokal laufenden Testshop mit zwei Testartikeln habe. Ich weiß nicht wirklich, ob es unbedingt notwendig ist, da soweit ich weiß, in den Tabs z.B. Cross Selling Artikel usw. angezeigt werden.
Und wenn jemand seine Vorschaubilder weiterhin in den Tabs haben möchte, ist die Anpassung eine andere.
Prinzipiell ist die  Änderung kein Hexenwerk, es ist eher eine Frage des "wie will ich es haben" oder des "wie wirkt es optisch für den Kunden am besten".

Wenn du für dich Verwendung dafür hast bzw. es haben möchtest, kann ich dir die Änderungen natürlich erklären, ob es aber allgemein mit in die Anleitung rein soll, da hadere ich noch mit mir selbst....

Gruß Tobi

[web28]

[...]
Und dass auch die offline.html die ID #wrap enthält, hatte ich nicht gesehen.
Also, prinzipiell ist die Änderung des Javascripts und die Anpassung der zugehörigen CSS kein Hexenwerk, es müsste halt nur mit jeder neuen Version von CloudZoom wieder manuell angepasst werden!
[...]

Hallo Tobi,

das mit der #wrap ID ist natürlich äußerst unglücklich. Hier hat sich der CloudZoom Ersteller leider nicht an sein eigenes Konzept gehalten. Eigentlich müsste das #cloud-zoom-wrap heißen.

Ich wäre also unbedingt dafür, das Modul dementsprechend anzupassen. Natürlich mit einem Hinweis, was in den Cloudzoom Dateien geändert wurde. Dann sollte es auch mit neuen CloudZoom Versionen keine Probleme geben.

Gruss Web28

[DefCon2k]

Servus,

okay, überredet

Ich werde es anpassen und neu hochladen.

Diejenigen, die es bisher schon eingebaut haben, müssen es dann wohl oder übel nochmal abändern, sorry hierfür.

Gruß Tobi

[DefCon2k]

Servus,

so, habe wunschgemäß die Javascript- Dateien angepasst, und die Anleitung modifiziert.

Für alle, die dieses Modul bereits eingebunden haben, habe ich eine "Undo- Anleitung" beigefügt (siehe undo.txt in der ZIP-Datei).
Diese dort beschriebenen Änderungen sollten von allen, die dieses Modul noch nicht eingebunden haben (es aber noch einbinden wollen   ) bitte ignoriert werden.

Desweiteren habe ich in der changes.txt die in den beiden Javascript- Dateien vorgenommenen Änderungen dokumentiert. Deshalb sollten nur die mitgelieferten Dateien verwendet werden, da bei Verwendung der Originalen diese das Layout "zerschießen".

So, und nun: frohes Wolken-Zoomen  

Gruß Tobi

[EDIT web28: Download in Beitrag 1 aktualisiert]