Problem bei Kombination von CloudZoom und Thickbox

[Spritzpistole]

Hallo,

für die typischen Popup-Fenster nutzt modified eCommerce Shopsoftware ja Thickbox für deren Anzeige. Für die Anzeige der Produktbilder innerhalb der "product_info_v1.html" nutze ich seit geraumer Zeit erfolgreich CloudZoom.

Anscheinend beißen sich die beiden Popup-Varianten irgendwie, so wurde mir in einem Thema hier eröffnet und bestätigte sich bei einer Selbstkontrolle. Das Ergebnis sieht dann wie in der angehangenen Seite aus und lässt sich mit diesem Link exemplarisch nachvollziehen.

Der entscheidende Ausschnitt des Quelltextes der "product_info_v1.html", sieht so aus:

Code: PHP  [Auswählen]

<td width="360px">
        {if $PRODUCTS_IMAGE!=''}
                <div id="productinfoimages">
                  <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="cloud-zoom cloud-zoom-gallery" id="zoom1" rel="adjustX: 20, adjustY:-3, zoomWidth: 400, zoomHeight:350" style="position: relative; display: block;">
                  <img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" />
                  </a>
                  <div style="clear:both"></div>
                  <div style="border-bottom:3px solid #d0d2d2;"></div>
                  <div id="cloud-zoom-hint" style="font-size:10px;">Bewegen Sie die Maus über das Bild, um es zu vergrößern.</div>
                  {if $more_images|@count> 0}
                  <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}
               </div>
        {/if}
    </td>
    <td valign="top" rowspan="2">
      <div id="productinfoprice">

                        <div class="productprice"><strong>{$PRODUCTS_PRICE}</strong></div>
                        <div class="taxandshippinginfo" style="white-space:nowrap">{$PRODUCTS_TAX_INFO}{if $PRODUCTS_SHIPPING_LINK}{$PRODUCTS_SHIPPING_LINK}{/if}</div>
                        {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}<p />
                       <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_URL != ''}
                        <div class="hrlightgrey"></div><div style="padding-top:5px;">{$PRODUCTS_URL}</div>
                        {/if} <br />

        </div>
        <div style="clear:both;"></div>
    </td>
 

Vielleicht kann sich dessen ja mal jemand mit dem notwendigen technischen Sachverstand anschauen, mein persönlicher Horizont reicht dafür leider nicht aus. Ein Thema hierzu im Forum habe ich über die Suche mit den beiden Begriffen "CloudZoom" und "Thickbox" nicht auffinden können.

Über Hilfe wäre ich durchaus dankbar.

Gruß
Thomas

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



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

[h-h-h]

thickbox.css

Code: CSS  [Auswählen]

#TB_window {
        font: 12px Arial, Helvetica, sans-serif;
        font-weight: bold;
        position: fixed;
        background: #ffffff;
        z-index: 102;
        color:#333333;
        display:none;
        border: 4px solid #525252;
        text-align:left;
        top:50%;
        left:50%;
}

Aus z-index: 102; ein z-index:10200; machen und schon geht es(getestet).

Gruß

h-h-h

[Spritzpistole]

Hallo h-h-h,

ich sage vielmals Dank für die gewährte Hilfe!

Gruß
Thomas

[Tomcraft]

Ansonsten schau mal, was hier in Beitrag 1 tolles verlinkt ist:

[...]
[EDIT Tomcraft 08.05.2011: Danke an nicson für eine erweiterte Version, die auch mit der ThickBox funktioniert.]

Quelle: MODUL: Cloud Zoom als Alternative zu MagicZoom

Grüße

Torsten