Lösung für jQzoom Bildtausch gesucht

[rayzob]

Habe im Shop den JQZoom verbaut, wie hier im Forum beschrieben. Läuft sehr gut und ich möchte ihn nicht missen. Leider bin ich auf eine Hürde gestoßen, auf die ich hier keine Antwort gefunden habe.

Bei mehr als einem Bild, möchte ich die zusätzlichen Bilder, die ja nur kleine Thumbs sind, gegen das Hauptinfobild tauschen, um mit dem jqzoom immer vom Hauptbild aus zu zoomen. Also erst aufs kleine Bild klicken, dann erscheint das im größeren Fenster wo Preis u.s.w. rechts daneben steht (Nicht im Popup)und dann kann ich wieder mit der Lupe darüber gehen um die Detailansicht zu haben oder drauf klicken um das Popup zu erhalten.

Hat das schon mal wer umgesetzt?  Ich bitte um Hilfe.

Dankeschön Ray



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

[rayzob]

Hier noch mal zum besseren Verständnis (oder auch nicht)

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

[rayzob]

Hmmm. Keine Vorschläge? Da es mir echt wichtig ist, das es funktioniert, habe ich gerade weiter selber nach der Lösung gesucht und bin vielleicht mit einem kleinen Script fündig geworden. Hier der Link:

http://www.web-toolbox.net/webtoolbox/bilder/image-swap.htm

Nun dachte ich in meinem leichtsinn das es leicht einzubauen ist, nur schon wenn ich folgendes:

Code: Javascript  [Auswählen]

<script type="text/javascript" language="JavaScript">
<!--
function swap(Bildname,BildURL)
{
document.images[Bildname].src = BildURL;
}
//-->
</script>

ganz oben in die product_info.html einfüge, wird mir die Seite nicht mehr angezeigt. Der Browser bleibt weiß. Kann mir wer helfen?

[rayzob]

Da 0 Beteiligung war auf den Beitrag und es aus meiner Sicht ein echter Mehrwert für den Shop ist, hab ich es nun selbst gelöst und bin stolz darauf. Grundlage ist das Magic Zoom Plus Script. Zwar nicht kostenfrei, aber richtig toll. Vor allem weil alle Zusatzbilder ordentlich verarbeitet werden.

[dukie]

Ich verbaue für meine Kunden wenn Sie so etwas wollen immer das hier: Cloud Zoom

[rayzob]

Ja, auch nicht schlecht. Kann sicher ähnliches. Danke auf jeden Fall für die Antwort aber nun hab ich es ja gelöst. =)

[Tomcraft]

Da 0 Beteiligung war auf den Beitrag und es aus meiner Sicht ein echter Mehrwert für den Shop ist, hab ich es nun selbst gelöst und bin stolz darauf. Grundlage ist das Magic Zoom Plus Script. Zwar nicht kostenfrei, aber richtig toll. Vor allem weil alle Zusatzbilder ordentlich verarbeitet werden.

Nennen magst du uns aber deine Lösung nicht?

Grüße

Torsten

[Hetfield]

Lösungen gibt es direkt bei MagicZoom.

Beispiele: http://www.magictoolbox.com/magiczoomplus/examples/
Integration: http://www.magictoolbox.com/magiczoomplus/integration/

MfG Hetfield

[Tomcraft]

Ahhh, Danke!

Grüße

Torsten

[rayzob]

1 zu 1 kann man es leider nicht übernehmen, deswegen hier mal die Änderung um es für modified eCommerce Shopsoftware zu rüsten.

1) die Datein "magiczoomplus.css" und "magiczoomplus.js" in das Verzeichnis "/templates/<dein-template>/javascript/" kopieren.

2) in der Datei "general.js.php" im selben Verzeichnis folgenden neuen Code am Ende einfügen

Code: PHP  [Auswählen]

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

3) in der Datei "product_info.html" folgende Änderung vornehmen:
suche und ersetze:

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>

mit

Code: PHP  [Auswählen]

<a href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="MagicZoomPlus" id="Zoomer" rel="zoom-width: 400px; zoom-height:391px; zoom-fade:true; smoothing-speed:20;"><img src="{$PRODUCTS_IMAGE|replace:"thumbnail_images":"info_images"}"/></a>

danach suche:

Code: PHP  [Auswählen]

{if $more_images|@count> 0}
<!-- More Pictures -->
<div class="morepics">
{foreach item=more_images_data from=$more_images}
<a class="thickbox" rel="{$PRODUCTS_ID}" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>
{/foreach}
</div>

und ersetze es mit:

Code: PHP  [Auswählen]

{if $more_images|@count> 0}
<div class="morepics">
<a href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" rel="zoom-id:Zoomer" rev="{$PRODUCTS_IMAGE}"><img src="{$PRODUCTS_IMAGE}"/></a>
<!-- More Pictures -->
{foreach item=more_images_data from=$more_images}

<a href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" rel="zoom-id:Zoomer" rev="{$more_images_data.PRODUCTS_IMAGE}"><img src="{$more_images_data.PRODUCTS_IMAGE}"/></a>
{/foreach}
</div>

Mit den Werten in der css kann man spielen. Der Vorteil ist einfach zu jqzoom, das es so ziemlich auf jedem Browser geht laut Hersteller. Ich bin sehr zufrieden und finde es ist gerade für Fashion ein Modul, das nicht fehlen darf. Bei einem Computer oder Handy zählt mehr was es kann und da ist die Artikelbeschreibung primär, aber bei Kleidung braucht man aussagekräftige Bilder um den Umsatz zu steigern. Frage mich immer wieder wie Shops verkaufen mit zwar coolen sau-teuren Marken im Angebot aber Bildern wo ich als Hersteller einen Hals bekommen würde wenn meine Ware so präsentiert wird und als Kunde nicht kaufen würde. Für uns also ein Muss und vielleicht konnte ich ja helfen.

[Tomcraft]

Daraus könntest du doch ein Modul für die Community erstellen und in der "Bastelecke" veröffentlichen.

Grüße

Torsten

[speedy]

MagicZoom ist jedoch leider nur bei nicht-kommerzieller Anwendung kostenlos und welcher Shop ist das bitte?

Eine Lösung bgzl. dem Durchschalten von Bildern suche ich hier: Bilder durchschalten mit jquery.innerfade.js

Evtl. wäre das mit "jquery.innerfade.js" ein anderer Ansatz.

[iet-searchbuy]

Hallo!

ich habe es wie von rayzob beschrieben geändert aber es findet einfach kein zoom statt?

Hat da jemand eine Idee?

Danke