MODUL: Cloud Zoom als Alternative zu MagicZoom

[DefCon2k]

Servus,

ein bekanntes Problem; Ändere mal in der "thickbox.css" unter "TB_window" den Wert des "z-index" auf "10000" (standard ist "102").
Dann sollte die ThickBox mit den Zahlungsbedingungen wieder ganz im Vordergrund liegen!

Gruß nach Alzey (meinem Arbeitsort)
Tobi

[Jiraporn]

Hallo Tobi,
vielen Dank für deine schnelle Antwort, der Fehler ist nun weg und ich bin wieder glücklich!

Wie klein doch die Welt immer wieder ist, schöne Grüße zurück!
Jirporn

[EarthPlague]

Hallo,

ich habe CloudZoom in meinem Shop installiert funktioniert auch wunderbar, es sei denn ich logge mich ein, dann funktioniert das Modul nicht mehr!

Kann sich vielleicht jemand erklären warum?

Besten Dank!

[EarthPlague]

Das Rätsel hat sich gelöst indem ich einfach in die "product_info_v1.html" folgende Zeilen eingefügt habe:

Code: PHP  [Auswählen]

<link href="../javascript/cloud-zoom.css" rel="stylesheet" type="text/css" />

<script type="text/JavaScript" src="../javascript/cloud-zoom.1.0.2.min.js"></script>
 

Besten Dank,
Benny

[Tomcraft]

Der Code gehört eigentlich in die "/templates/<dein-template>/javascript/general.js.php" rein.

Grüße

Torsten

[Laines72]

Hay

Wo stelle ich den eigentlich die Größe des Zoom Fensters selber ein.
Ich meine nicht das, wo über das Bild fährt, sondern wo dann nebenan angezeigt wird ?

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

[Tomcraft]

Die Größe lässt sich nicht so ohne weitere anpassen. Das von dir gezeigte Bild sagt mir, dass deine Bilder nicht in ausreichender Qualität vorliegen, da macht der CloudZoom eigentlich keinen Sinn.

Teste mal mit einem extrem hochauflösenden Bild, dann siehst du den Unterschied.

Grüße

Torsten

[DefCon2k]

Servus,

@Torsten

Nicht ganz, in der product_info_v1.html kann die Größe angegeben werden (Voraussetzung: das Originalbild ist in geeigneter Größe vorhanden, so gesehen hast du Recht)

@ Laines72

Schau dir mal die product_info_v1.html an, dort wird die Klasse aufgerufen, da kannst du auch die Werte "zoomWidth und zoomHeight" angeben, die vergrößern dein Zoom-Fenster (Vorraussetzung: siehe Hinweis an Torsten).

Im Standard sind die Werte auf 300 x 300 Pixel eingestellt:

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>

Aber Achtung: sollte das Bild kleiner sein, als der hier definierte Rahmen, wird es wiederholt dargestellt!

Gruß Tobi

[Laines72]

Das mit der Bildqualität lassen wir mal aussen vor, das weiß ich schon ich dachte daran, dass der Ausschnitt, mit dem ich ÜBER das Bild fahre so bleibt aber der Bereich der im Bild Rot markiert ist, größere Ausmaße hat.

[sweethoney.123]

Hallo,

ich habe Cloud Zoom in meinem Test Shop installiert und bei mir funktioniert leider nicht. Ich weiss es nicht warum. Die Punkte habe ich genau beachtet. Test Shop

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

[DefCon2k]

Servus,

so wie es aussieht, ist dir doch ein Punkt der Anleitung flöten gegangen.
In Deinem Testshop wird noch die thickbox aufgerufen.

Suche mal in der "product_info_v1.html"
nach folgender Zeile:

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>
 

und ersetze sie durch folgende Zeile:

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: 350, zoomHeight:350" style="position: relative; display: block;"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" /></a>
 

Mit den Werten zoomWidth und zoomHeight kannst du, sobald es funktioniert, die Größe des Fensters steuern.

Probier das mal und gib Feedback.

Gruß Tobi

[sweethoney.123]

Hallo, danke für die schnelle Antwort,aber das habe ich schon gemacht und auch überprüft,aber functioniert noch immer nich.
"product_info_v1.html" :

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

[DefCon2k]

Servus,

doch, es funktioniert (habe eben in deinem Shop nachgeschaut, siehe Screenshot oder hier: Artikel im Shop

Eventuell solltest du mal Deinen Browsercache löschen?!

Wie gesagt, ich sehe es!
Gruß Tobi

P.S.: Es geht natürlich nur da, wo Du beim Anlegen des Artikels auch "product_info_v1" ausgewählt hast, bei "product_info_tabs" geht's natürlich noch nicht, da ist noch die "thickbox" aktiv.

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

[sweethoney.123]

"product_info_v1.html"

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="product_info"}
{$FORM_ACTION}
<h1>{$PRODUCTS_NAME}</h1>

<div id="productinfowrap">
<table><tr><td style="padding-right:20px;">
        {if $PRODUCTS_IMAGE!=''}

                <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>
 </div>
    </div>
    </div>
 <div id="cloud-zoom-hint"><br /><div align="left">Bewegen Sie die Maus &uumlber das Bild<br />um es zu vergr&ouml&szligern.</div><br /><br /></div>
{if $more_images|@count> 0}
Weitere Produktbilder
<div class="morepics">
<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"original_images"}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1',smallImage:'{$PRODUCTS_IMAGE}'"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" /></a>
<!-- More Pictures -->
{foreach item=more_images_data from=$more_images}
<a class="cloud-zoom-gallery" rel="useZoom: 'zoom1',smallImage:'{$more_images_data.PRODUCTS_IMAGE}'" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"original_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="" /></a>
{/foreach}
</div>
<div style="clear:both;"></div>
<div>
{/if}
        {/if}</td><td>
        <div id="productinfoprice">

                        <p class="productprice"><strong>{$PRODUCTS_PRICE}</strong></p>
                        <p class="taxandshippinginfo" style="white-space:nowrap">{$PRODUCTS_TAX_INFO}{if $PRODUCTS_SHIPPING_LINK}{$PRODUCTS_SHIPPING_LINK}{/if}</p>
                        {if $SHIPPING_NAME}<p class="shippingtime"><strong>{#text_shippingtime#}</strong>{if $SHIPPING_IMAGE}<img src="{$SHIPPING_IMAGE}" alt="{$SHIPPING_NAME}" />{/if} {$SHIPPING_NAME}</p>
                        {/if}
                        {if $PRODUCTS_VPE}
                        <div class="hrlightgrey"></div>{$PRODUCTS_VPE}{/if}
                        {if $MODULE_graduated_price !=''}<div class="hrlightgrey"></div>{$MODULE_graduated_price}{/if}
                        {if $PRODUCTS_DISCOUNT!=''}<div class="hrlightgrey"></div>{$PRODUCTS_DISCOUNT}{/if}
                        {if $PRODUCTS_FSK18=='true'}<div class="hrlightgrey"></div><img src="{$tpl_path}img/fsk18.gif" alt="" style="cursor:default" />{/if}
                        {if $PRODUCTS_MODEL!=''}<div class="hrlightgrey"></div>
                        <strong>{#model#}</strong> {$PRODUCTS_MODEL}{/if}
                        {if $PRODUCTS_URL != ''}
                        <div class="hrlightgrey"></div><div style="padding-top:5px;">{$PRODUCTS_URL}</div>
                        {/if} <br />
                        <div style="margin-top:10px"></div>
                        {$PRODUCTS_PRINT}</div>

        </div>
        <div style="clear:both;"></div>
    </td></tr></table>
        {if $MODULE_product_options !=''}
        <div class="productoptions">{$MODULE_product_options}</div>{/if}
<!-- BOF - Tomcraft - 2009-11-28 - Included xs:booster //-->
        {if $XTB_REDIRECT_USER_TO=='product'}<div style='width:400px;padding:10px;color:white;background-color:green;'><strong>Sie haben die eBay Auktion gewonnen!</strong><br/>Bitte wählen Sie nun noch die gewünschten Produkteigenschaften und legen Sie den Artikel danach in den Warenkorb, um mit der Zahlung fortzufahren und das Produkt versandfertig zu machen!</div>{/if}
<!-- EOF - Tomcraft - 2009-11-28 - Included xs:booster //-->
        <div class="addtobasket">
        <table border="0" cellspacing="0" cellpadding="2">
                <tr>
                <td style="width:100%; padding-right:5px;">{$ADD_QTY}</td>
                <td>{$ADD_CART_BUTTON}</td>
                </tr>
        </table>
        </div>
        {if $PRODUCTS_DESCRIPTION !=''}<div>{$PRODUCTS_DESCRIPTION}</div>{/if}
</div>

{$FORM_END}
{if $MODULE_products_media != ''}{$MODULE_products_media}{/if}
{if $MODULE_products_reviews != ''}{$MODULE_products_reviews}{/if}
{if $MODULE_cross_selling != ''}{$MODULE_cross_selling}{/if}
{if $MODULE_reverse_cross_selling != ''}{$MODULE_reverse_cross_selling}{/if}
{if $MODULE_also_purchased != ''}{$MODULE_also_purchased}{/if}
{if $PRODUCTS_ADDED != ''}<p class="productinfoproductadded">{$PRODUCTS_ADDED}</p>{/if}
{$PRODUCT_NAVIGATOR}
 

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

[DefCon2k]

Servus,

logg dich mal aus und schau dann mal, ob es dann funktioniert.
Du bist nämlich als Admin angemeldet, das gleiche Problem gab's hier schon einmal, siehe hier und der folgende Beitrag von Tomcraft.

Sofern es im ausgeloggtem Zustand funktioniert, heißt das, dass Du Punkt drei und eventuell Punkt vier der Anleitung vergessen hast.

Gruß Tobi