MODUL: Cloud Zoom als Alternative zu MagicZoom

[speedy]

@Koshiro

[...]
das mit der Thickbox auf der Detailseite ist mir auch aufgefallen, das wenn man auf der Detailsseite ist, und als Beispiel auf Versandkosten klickt, dann hat man das Bild direkt in der Thickbox mit drin, und kann nicht mehr alles richtig lesen. Kann man dieses Problem irgendwie umgehen?
[...]

Ich habe bei der thickbox.css bei allen z-index Werten einfach 00 hinten angehängt.

[...]
also bei mir steht es eh in der Javascript Datei auf 999 und nicht auf 9999, aber Du sagst wenn ich es auf 99 änder dann ist es in dem Punkt schon mal weg, dann Teste ich das mal.
[...]

In der Javascript gibt es vier z-index 98,99,999 und 9999.

----

@DefCon2k

[...]
ja, kann man. Einfach im Javascript den z-index von "9999" auf "99" ändern.
[...]

In der Javascript cloud-zoom.1.0.2.min.js muss man aufpassen, das ist nicht grundlos so hoch, weil es mit den anderen z-index Werten abgestimmt ist.

[...]
das mit dem Produktbild ist mir auch aufgefallen, wenn in der product_info_v1.html die Größenangaben der Cloud-Zoom-Box größer als das eigentliche Bild sind, sieht es echt komisch aus. Das hatte ich aber in meiner erstenm Anleitung dazugeschrieben, dass ggf. die Bildergrößen im Backend anzupassen sind.
[...]

Den Hinweis hatte ich gar nicht gelesen
Müsste man mal sehen, was man da machen kann, geht so nicht.

[koshiro]

Hallo Speedy,
also meinst Du das es besser wäre wenn ich es so mache wie Du schreibst, bei der Thickbox.css hinter jedem z-index einfach 00 an dem Wert hinten dran hängen, anstatt in der Javascript Datei vom Modul den z-index Wert zu ändern.
Gruß
Micha

[speedy]

Ich habe es zumindest so gemacht, weil die Werte in der Javascript zueinander stimmig sein müssen.
Negatives ist mir noch nicht aufgefallen was die z-index angeht. So passte es dann bei mir.

Hier etwas zu den maximalen Werte von z-index http://softwareas.com/whats-the-maximum-z-index
Also das mit dem 00 stellt somit kein Problem dar.

[koshiro]

Ok dann werde ich das mal nachher so testen das ich an den Z-Index werten einfach hinten 00 dran hänge in der Thickbox.css und belasse in der Javascript datei die Werte so wie Sie Standard sind.
Gruß
Micha

[pc-deluxe]

Hallo Leute,

habe diese Funktion auch eingebaut in meinen Shop nur benutze ich dabei eine ganz andere Produktansicht. Mein Problem dabei ist nun das, wenn ich mehr als 2 Bilder bei weiteren Bildern haben möchte verschiebt er mir die ganze Seite im Anhang mal der Quelltext von der product_info_x_accordion_v1.html:

Code: PHP  [Auswählen]

{*BEGIN TABS*}
<div id="accordion_product_info">

        {if $PRODUCTS_DESCRIPTION !=''}<h3><a href="#">{#description#}</a></h3><div>{$PRODUCTS_DESCRIPTION}</div>{/if}
        {if $more_images|@count> 0}<h3><a href="#">{#more_images#}</a></h3>
       <div>
                <div id="accordion_more_images">
                        <!-- More Pictures -->
                <div class="morepics">
            <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1',smallImage:'{$PRODUCTS_IMAGE}'"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" /></a>
        {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":"popup_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>
        </div>
        {/foreach}
        <div style="clear:both;"></div>
        </div>
        </div>
        {/if}
        {if $MODULE_products_media != ''}<h3><a href="#">{#products_media#}</a></h3><div>{$MODULE_products_media}</div>{/if}
        {if $MODULE_products_reviews != ''}<h3><a href="#">{#products_reviews#}</a></h3><div>{$MODULE_products_reviews}</div>{/if}
        {if $MODULE_cross_selling != '' || $MODULE_reverse_cross_selling != ''}<h3><a href="#">{#cross_selling#}</a></h3><div>{if $MODULE_reverse_cross_selling != ''}{$MODULE_reverse_cross_selling}{/if}</div>{/if}
        {if $MODULE_also_purchased != ''}<h3><a href="#">{#also_purchased#}</a></h3><div>{$MODULE_also_purchased}</div>{/if}

</div>
{*END TABS*}

{if $PRODUCTS_ADDED != ''}<p class="productinfoproductadded">{$PRODUCTS_ADDED}</p>{/if}
{$PRODUCT_NAVIGATOR}
 

könnt ihr einen Fehler entdecken?!

Gruß
Dirk

[pc-deluxe]

so ist es richtig, das foreach war falsch gesetzt^^

Code: PHP  [Auswählen]

{*BEGIN TABS*} <div id="accordion_product_info">
{if $PRODUCTS_DESCRIPTION !=''}<h3><a href="#">{#description#}</a></h3><div>{$PRODUCTS_DESCRIPTION}</div>{/if}
{if $more_images|@count> 0}<h3><a href="#">{#more_images#}</a></h3>
<div>
<div id="accordion_more_images">
<!-- More Pictures -->
<div class="morepics">
<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"class="cloud-zoom-gallery" rel="useZoom: 'zoom1',smallImage:'{$PRODUCTS_IMAGE}'"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" /></a>
{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":"popup_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>
{/foreach}
</div>
<div style="clear:both;"></div>
</div>
</div>
{/if}
{if $MODULE_products_media != ''}<h3><a href="#">{#products_media#}</a></h3><div>{$MODULE_products_media}</div>{/if}
{if $MODULE_products_reviews != ''}<h3><a href="#">{#products_reviews#}</a></h3><div>{$MODULE_products_reviews}</div>{/if}
{if $MODULE_cross_selling != '' || $MODULE_reverse_cross_selling != ''}<h3><a href="#">{#cross_selling#}</a></h3><div>{if $MODULE_reverse_cross_selling != ''}{$MODULE_reverse_cross_selling}{/if}</div>{/if}
{if $MODULE_also_purchased != ''}<h3><a href="#">{#also_purchased#}</a></h3><div>{$MODULE_also_purchased}</div>{/if}
</div> {*END TABS*}
{if $PRODUCTS_ADDED != ''}<p class="productinfoproductadded">{$PRODUCTS_ADDED}</p>{/if} {$PRODUCT_NAVIGATOR}

[speedy]

Versuchs mal damit, ist aber ungetestet !
Auf jeden Fall kannst du nicht einfach 1:1 den Code aus dem Bereich mit den Tabs nach oben kopieren:

Code: PHP  [Auswählen]

{*BEGIN TABS*}
<div id="accordion_product_info">

    {if $PRODUCTS_DESCRIPTION !=''}<h3><a href="#">{#description#}</a></h3><div>{$PRODUCTS_DESCRIPTION}</div>{/if}
   <div id="cloud-zoom-hint"><br />Bewegen Sie die Maus über das Bild<br />um es zu vergrößern.<br /><br /></div>
    {if $more_images|@count> 0}
    Weitere Produktbilder
    <div class="morepics">
    <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_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":"popup_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>
    {/foreach}
    </div>
    <div style="clear:both;"></div>
    {/if}
    {if $MODULE_products_media != ''}<h3><a href="#">{#products_media#}</a></h3><div>{$MODULE_products_media}</div>{/if}
   {if $MODULE_products_reviews != ''}<h3><a href="#">{#products_reviews#}</a></h3><div>{$MODULE_products_reviews}</div>{/if}
   {if $MODULE_cross_selling != '' || $MODULE_reverse_cross_selling != ''}<h3><a href="#">{#cross_selling#}</a></h3><div>{if $MODULE_reverse_cross_selling != ''}{$MODULE_reverse_cross_selling}{/if}</div>{/if}
   {if $MODULE_also_purchased != ''}<h3><a href="#">{#also_purchased#}</a></h3><div>{$MODULE_also_purchased}</div>{/if}

</div>
{*END TABS*}

{if $PRODUCTS_ADDED != ''}<p class="productinfoproductadded">{$PRODUCTS_ADDED}</p>{/if}
{$PRODUCT_NAVIGATOR}
 

EDIT: ok, hatte wohl den Thread den ganzen Tag auf und keinen Refresh gemacht

[speedy]

Hat schon jemand Cloud Zoom zusammen mit der Thickbox am laufen ?

[pc-deluxe]

Hallo, wozu ist denn die Thickbox? Hab schon viel davon gehört, kann aber damit nix anfangen...

[speedy]

Thickbox ist das Standard-Teil in modified eCommerce Shopsoftware, bei Klick auf ein Bild erscheint die Vergrößerung.
Ich würde gerne Cloud Zoom zusammen mit der Thickbox laufen lassen, für Leute die sich evtl. an der ausschnittweisen Vergrößerung stören und es im "Vollbild" möchten.

Ich habe noch eine "Fehlfunktion" gefunden.
Es geht um die "weiteren Bilder" - klickt man eines davon an, dann wird das Hauptbild ersetzt, doch man hat dann keine Möglichkeit mehr das Hauptbild anzusehen. Es müssten sich also die Bilder tauschen, sodass das Hauptbild, dann unter den weiteren Bilder zu finden wäre.

[tittytwister]

hallo leute,

ich habe von DefKon2WK die Zip Datei heruntergeladen und habe Probleme die CSS Datei auf dem FTP Server zu finden... ich setze die Extension in Typo3 ein... kann mir jemand rat geben damit ich auch diese Galerie habe ?

Danke

[jabo]

Hallo,

ich habe heute das Modul Cloud Zoom nach der Anleitung installiert.
Wenn ich product_info_v1.html benutze, läuft das Modul.

Wenn ich sinngemäß die Änderungen in der Datei "product_info_tabs_v1.html" vornehme, sehe ich zwar die Tabs, doch die kleinen Vorschaubilder sind in "Details" und wenn ich auf ""Mehr Bilder" klicke, lande ich auf der Startseite.

Ich habe in der Datei "product_info_tabs_v1.html" folgendes geändert:

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>
 

ersetzt durch:

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>
 

Diesen Block:

Code: PHP  [Auswählen]

{if $more_images|@count> 0}<div id="tab_more_images">
        <!-- 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>
        <div style="clear:both;"></div>
        </div>
 

habe ich ersetzt durch:

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>
<div style="clear:both;"></div>
{/if}
 

Kann mir jemand bitte sagen, wo ich den Fehler gemacht habe ?

Gruß

Jan

[franky_n]

Hallo jabo,

versuch es mal so (ungetestet), Du hattest in Deiner Version ein div rausgenommen...

Code: PHP  [Auswählen]

{if $more_images|@count> 0}
  <div id="tab_more_images">
    <!-- 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>
    <div style="clear:both;"></div>
  </div>
{/if}

Viele Grüße

Franky

[Oktay]

Danke für das Modul. Ist Klasse. Muss nur noch raus finden wie ich näher also detailierter ranzoomen kann. Auf jeden Fall Danke. Es wird langsam Zeit für eine Spende für dieses klasse Forum.

[koshiro]

Näher ran zoomen kann man nur wenn man Hochauflösende Fotos hat, da kann man bei dem Modul selber nichts verstellen.
Gruß
Micha