Update Template für sx_fancy_cloud_zoom

1) sx_cloud_zoom deaktivieren/deinstallieren

2) sx_fancy_cloud_zoom installieren und aktivieren

3) in templates/xt_grid/pages/product/product.html Template-html der Produktbilder ändern

von

<div id="product-images">
    <div class="box">
        {if $products_image == 'product:noimage.gif'}
        <p class="product-image center"><img src="{$tpl_url_path}img/no_image.png" alt="{$products_name|escape:" html"}"
            /></p>
        {else}
        <p class="product-image"><a href="{img img=$products_image type=m_org path_only=true}" class="cloud-zoom"
                                    id="zoom" rel="adjustX: 28, adjustY:-10, zoomWidth: 350">{img img=$products_image
            type=m_info alt=$products_name|escape:"html" width=auto height=auto itemprop=image}</a></p>
        {/if}
    </div>
    <!-- .box -->
    {if $more_images !=''}
    <div class="more-images">
        <p class="more-images-item"><span><a href='{img img=$products_image type=m_org path_only=true}'
                                             class='cloud-zoom-gallery'
                                             rel="useZoom: 'zoom', smallImage: '{img img=$products_image type=m_info path_only=false}'"><img
                src="{img img=$products_image type=m_smallproduct alt=$products_name path_only=false}"
                alt="{$products_name|escape:" html"}" /></a></span></p>
        {foreach name=aussen item=img_data from=$more_images}
        <p class="more-images-item"><span><a href='{img img=$img_data.file type=m_org path_only=true}'
                                             class='cloud-zoom-gallery'
                                             rel="useZoom: 'zoom', smallImage: '{img img=$img_data.file type=m_info path_only=true}'"><img
                src="{img img=$img_data.file type=m_smallproduct path_only=true}"
                alt="{if $img_data.data.media_name == ''}{$products_name|escape:" html"}{else}{$img_data.data.media_name|escape:"html"}{/if}"
            /></a></span></p>
        {/foreach}
    </div>
    <!-- .more-images -->
    {/if}
</div><!-- #product-images -->

auf

<div id="product-images">
    <div class="box">
        {if $products_image == 'product:noimage.gif'}
        <p class="product-image center"><img src="{$tpl_url_path}img/no_image.png"
                                             alt="{$products_name|escape:'html'}"/></p>
        {else}
        <p class="product-image">
            {if $diplayFancyCloud}
            <a href="{img img=$products_image type=m_org path_only=true}" class="cloud-zoom fancy-click-trigger"
               id="zoom" rel="fancy-gallery" data-cloudzoom="adjustX: 28, adjustY:-10, zoomWidth: 350">
                {img img=$products_image type=m_info alt=$products_name|escape:"html" width=auto height=auto
                itemprop=image}
            </a>
            {else}
            {img img=$products_image type=m_info alt=$products_name|escape:"html" width=auto height=auto itemprop=image}
            {/if}
        </p>
        {/if}
    </div>
    <!-- .box -->
    {if $more_images !=''}
    <div class="more-images">
        <p class="more-images-item">
            <span>
                <a href='{img img=$products_image type=m_org path_only=true}' rel="fancy-gallery"
                   class='cloud-zoom-gallery'
                   data-cloudzoom="useZoom: 'zoom', smallImage: '{img img=$products_image type=m_info path_only=false}'">
                    <img src="{img img=$products_image type=m_smallproduct alt=$products_name path_only=false}"
                         alt="{$products_name|escape:'html'}"/>
                </a>
            </span>
        </p>
        {foreach name=aussen item=img_data from=$more_images}
        <p class="more-images-item">
            <span>
                <a href='{img img=$img_data.file type=m_org path_only=true}' rel="fancy-gallery"
                   class='cloud-zoom-gallery'
                   data-cloudzoom="useZoom: 'zoom', smallImage: '{img img=$img_data.file type=m_info path_only=true}'">
                    <img src="{img img=$img_data.file type=m_smallproduct path_only=true}"
                         alt="{if $img_data.data.media_name == ''}{$products_name|escape:'html'}{else}{$img_data.data.media_name|escape:'html'}{/if}"/>
                </a>
            </span>
        </p>
        {/foreach}
    </div>
    <!-- .more-images -->
    {/if}
</div><!-- #product-images -->

Suchen Sie: