В шаблоне Товар найдите:
<!-- Большое изображение -->
<div class="image">
<div id="wrap" style="top:0px;position:relative;background: #fff;margin: 0 auto;text-align: center;">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image">
</a>
{% ENDIF %}
</div>
</div>
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
{% FOR goods_images %}
{% IF goods_images.first %}
<div class="clearfix"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %} id="views_block">
<span class="view_scroll_spacer"><a class="hidden" href="javascript:{}" id="view_scroll_left" title="Предыдущая" style="cursor: default; display: none; opacity: 0;">Предыдущая</a></span>
<div id="thumbs_list">
<ul id="thumbs_list_frame" style="width: 100000px;">
{% ENDIF %}
<li>
<a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' ">
<img src="{goods_images.ICON}" alt="{goods_images.NAME}" />
</a>
</li>
{% IF goods_images.last %}
</ul>
</div>
<a href="javascript:{}" id="view_scroll_right" title="Следующая" style="cursor: pointer; opacity: 1; display: block;">Следующая</a>
</div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
замените на:
<!-- Большое изображение -->
<div class="image">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image">
</a>
{% ENDIF %}
</div>
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
{% FOR goods_images %}
{% IF goods_images.first %}
<div class="clearfix"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %} id="views_block">
<span class="view_scroll_spacer"><a class="hidden" href="javascript:{}" id="view_scroll_left" title="Предыдущая" style="cursor: default; display: none; opacity: 0;">Предыдущая</a></span>
<div id="thumbs_list">
<ul id="thumbs_list_frame" style="width: 100000px;">
{% ENDIF %}
<li>
<a href="{goods_images.LARGE}" title="{goods_images.NAME}" rel="{goods_images.MEDIUM}">
<img src="{goods_images.ICON}" alt="{goods_images.NAME}" />
</a>
</li>
{% IF goods_images.last %}
</ul>
</div>
<a href="javascript:{}" id="view_scroll_right" title="Следующая" style="cursor: pointer; opacity: 1; display: block;">Следующая</a>
</div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
В конец main.js вставьте:
$(function() {
// при клике на маленькие изображения инициализируем действие вызова галереи fancybox
$("#left-column .image a").fancybox();
// Изменение главного изображения товара при нажатии на миниатюру
$('#thumbs_list li a').click(function() {
var medium = $(this).attr('rel'),
large = $(this).attr('href'),
image = $('#left-column .image img');
image.attr('src', medium).closest('a').attr('href', large);
return(false);
});
});