Cloud Zoom - wie Modul installieren?

[resend]

Wie kann ich folgendes Modul installieren?

Professor Cloud

Unter "Example HTML" steht ja eigentlich alles.

Kann es mir jemand "übersetzen"? Wäre super nett.

Bzw die einzelnen Schritte nochmal detailliert erklären, wo was rein muss?

[fixed]

Hallo,

ich hoffe ich bekomm es noch alles zusammen.

Meine Cloud-Zoom Anleitung:

1. Nachdem alle Daten heruntergeladen und entpackt wurden, die Datei "cloud-zoom.1.0.2.js" in das Verzeichnis xtFramework/libary/jquery kopieren.

Man kann auch die Datei cloud-zoom.1.0.2.min.js nutzen. Der einzige Unterschied ist, dass dort der Code in einer Zeile steht und bessere Performance bietet.

Die Datei: cloud-zoom.css in das selbe Verzeichnis kopieren.

2. Die Datei unter templates/"EUER-TEMPLATE"/javascript/js.php öffnen.

Folgende Zeile einfügen:

<script type="text/javascript" src="<?php echo _SYSTEM_BASE_URL . _SRV_WEB; ?>xtFramework/library/jquery/cloud-zoom.1.0.2.js"></script>

Hier wird einfach nur angegeben, wo das Script liegt und sorgt dafür, dass unser Script auch geladen wird. Falls ihr die cloud-zoom.1.0.2.min.js Datei nutzt, müsst ihr das natürlich anpassen. Nun öffnen wir die Datei:templates/"EUER-TEMPLATE"/css/css.php Dort geben wir an, wo unsere css-Datei liegt. Also den folgenden Code hinein:

<link rel="stylesheet" type="text/css" href="<?php echo _SYSTEM_BASE_URL . _SRV_WEB; ?>xtFramework/library/jquery/cloud-zoom.css" />[/code]




3. In der Datei product.html unseres Templates müssen wir noch definieren, welches Bild nun als Zoom-Bild angezeigt wird und über welches wir mit der Maus fahren.

Ich werde den von mir verwendeten Code posten und versuchen, es zu erklären:

[code] <div> <a href='{img img=$products_image type=m_popup path_only=true}' class = 'cloud-zoom' id='zoom1' rel="adjustX: 146, adjustY:0, zoomWidth: 483, zoomHeight:380"> {img img=$products_image type=m_info} </a> </div> [/code]

{img img=$products_image type=m_info} gibt an über welches Bild wir mit der Maus fahren. Hier ist "type=m_info" zu beachten. Das könnte bei anderen Shops abweichen, da ich alle Bildtypen unter Inhalte->Media->Bildtypen gelöscht habe und eigene definiert. (ob das so schlau war weiss ich auch nicht) <a href='{img img=$products_image type=m_popup path_only=true}' class = 'cloud-zoom' id='zoom1' rel="adjustX: 146, adjustY:0, zoomWidth: 483, zoomHeight:380"> muss dann wohl das bei dem Zoom angezeigte Bild sein. Hier wird nur der Pfad zum großen Bild angegeben, daher "path_only=true" Hier ist wieder zu beachten, dass "type=m_popup" bei euch abweichen könnte. [b]Die class und id sind unbedingt zu verwenden![/b] Das Stück: zoomWidth: 483, zoomHeight:380 gibt an, wie Groß der Rahmen ist, in welchem das beim Zoom angezeigte Bild angezeigt wird. Das Bild welches beim Zoom zu sehen ist, wird einfach in originaler Größe angezeigt. Ich habe "type=m_popup" als 1000 x 1000 definiert und "type=m_info" (also das kleine Bild) als 360 x 360. Wenn ihr ein neues Bild in den Shop ladet, wird es ja automatisch auf alle Größen geschnitten. Falls ihr schon vorhandene Bilder habt aber die Größe der Bildtypen im nachinein geändert, könnt ihr unter Inhalte -> Media -> Ordner eurer Bilder "Image Processing" drücken. adjustX: 146, adjustY:0 gibt an, um wieviele Pixel das beim Zoom gezeigte Bild (also im Grunde der Rahmen) vom kleineren Bild entfernt ist (das worüber wir mit der Maus fahren) wenn beides auf 0 steht, liegen die beiden Bilder direkt nebeneinander. Aber wie langweilig wäre denn das ganze mit nur einem einzigen Bild.. Cloud-Zoom ist in der Lage, eine Galerie aller vorhandenen Produktbilder anzuzeigen. Wenn ein Thumbnail geklickt wird, wechseln die Bilder. Ich poste wieder meinen Code:

[code] <div> <ul class="zoomgallery"> <li style="padding-top:10px;"><a href='{img img=$products_image type=m_popup path_only=true}' class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{img img=$products_image type=m_info path_only=true}' ">{img img=$products_image type=m_thumb}</a> </li> {if $more_images !=''} {foreach name=aussen item=img_data from=$more_images} <li style="padding-top:9px;"> <a href="{img img=$img_data.file type=m_popup path_only=true}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{img img=$img_data.file type=m_info path_only=true}' ">{img img=$img_data.file type=m_thumb}</a> </li> {/foreach} {/if} </ul> </div> [/code]

Hier gibt es im Grunde nicht viel zu erklären, anhand von "type" sieht man wieder welches Bild wo im Code verwendet wird.

m_thumb = Das kleinste Bild

m_info = Das Bild, über welches wir mit der Maus fahren können

m_popup = Das große Bild

Der Code zwischen {if $more_images !=''}{/if} wird nur dann verwendet, wenn mehr als 1 Produktbild existiert (wer hätte das gedacht..)

Falls ihr nur 1 Produktbild habt, wir auch nur der Thumbnail dieses Bildes gezeigt.

Hier bitte wieder auf die class achten!

-------------------------------------------------------------------------

Das funktioniert bei mir alles wunderbar, habe es jetzt aber nicht nocheinmal ausprobiert. Hoffe es klappt so und es nützt jemandem.

Viele Grüße

[Tigger28]

Hallo fixed,

vielen Dank das du Dir soviel Mühe gemacht hast, habe versucht es Schritt für Schritt nachzumachen nur bin ich mir Unsicher was Punkt 3 angeht.

Wo genau muss ich den Code in der product.html einfügen?

Habe schon verschiedene Dinge ausprobiert, leider ist es bei mir so das wenn ich auf ein Bild Klicke, dieses dann nur als Vollbild auf einer neuen Seite ausgegeben wird.

Grüße Mike

[fixed]

Hallo,

ich habe mal zum Test die originale products.html geöffnet und dort den von mir verwendeten code reinkopiert.

Also von Zeile 12 bis Zeile 16:

	{if $products_image!=''}

	<div id="productinfoimages">

		<a href="{img img=$products_image type=m_popup path_only=true}" class="thickbox" rel="prod_gallery">{img img=$products_image type=m_info alt=$products_name|escape:"html"}</a>

	</div>

	{/if}

ersetzt durch:

<div>

<a href='{img img=$products_image type=m_popup path_only=true}' class = 'cloud-zoom' id='zoom1' rel="adjustX: 146, adjustY:0, zoomWidth: 483, zoomHeight:380">

{img img=$products_image type=m_info}

</a>

</div>

<div>

<ul class="zoomgallery">

<li style="padding-top:10px;"><a href='{img img=$products_image type=m_popup path_only=true}' class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{img img=$products_image type=m_info path_only=true}' ">{img img=$products_image type=m_thumb}</a>

</li>		

{if $more_images !=''}

		{foreach name=aussen item=img_data from=$more_images}

		<li style="padding-top:10px;">

<a href="{img img=$img_data.file type=m_popup path_only=true}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{img img=$img_data.file type=m_info path_only=true}' ">{img img=$img_data.file type=m_thumb}</a>

		</li>

{/foreach}

	{/if}

</ul>

</div>

Das funktioniert bei mir wunderbar.

Aber wie ich schon in der Anleitung geschrieben habe, kann man im Adminbereich unter Inhalte -> Media -> Bildtypen die "type" Bezeichnung verändern. Vielleicht liegt dort der Fehler.

Schätze das war keine große Hilfe...

Grüße

[fixed]

Sobald das Javascript nicht mehr ausgeführt wird, erhalte ich den von dir beschriebenen Fehler. Also vielleicht auch nochmal überprüfen ob in der js.php alles stimmt.

Es sollte so aussehen:

<script type="text/javascript" src="<?php echo _SYSTEM_BASE_URL . _SRV_WEB; ?>xtFramework/library/jquery/jquery-1.7.min.js"></script>

<script type="text/javascript" src="<?php echo _SYSTEM_BASE_URL . _SRV_WEB; ?>xtFramework/library/jquery/thickbox-compressed.js"></script>

<script type="text/javascript" src="<?php echo _SYSTEM_BASE_URL . _SRV_WEB; ?>xtFramework/library/jquery/cloud-zoom.1.0.2.js"></script>

Ich nutze derzeit die jquery-1.7.min.js, das könnte bei dir abweichen.

Grüße

[Tigger28]

Super Cool Danke Dir jetzt geht es jquery-1.7.min.js musste ich durch jquery-1.2.6.min.js ersetzen :-)

[Tigger28]

Zuerst wird das Originalbild angezeigt, danach das Bild welches beim Überfahren des Originals erscheint, mir scheint so als ob danach auch noch irgendetwas unsichtbares angezeigt wird. Problem ist nämlich das z.b. die Artikelnummer die Lagerampel usw alles nach unten verrutscht ist und nun mein Bestellbutton nicht mehr sichtbar ist, da dieser wohl auch nach unten verrutscht ist?!?!

[Tigger28]

Wenn man im Firefox rechte Maus auf diese Fläche klickt und dann auf Inspect Element wird die komplette Unsichtbare Box angezeigt a#zoom1.cloud-zoom.

[Tigger28]

Wenn man im Firefox rechte Maus auf diese Fläche klickt und dann auf Inspect Element wird die komplette Unsichtbare Box angezeigt a#zoom1.cloud-zoom.

Edit: gelöst, habe "div" eine breite zugewiesen und nun wird es auch richtig angezeigt :-)

[slarty]

Thumbs up für diese Anleitung! Danke. Hab nur noch dem li-Element der $more_images ein float:left hinzugefügt, damit die Thumbs schön nebeineinander angezeigt werden und hab jetzt genau das, was ich wollte. Wow!