Gleb1972 писал(а):Не скромный вопрос, как?OkayCMS писал(а):Это реализуется с помощью верстки. Вы можете подключить это к своему сайту.
Код: Выделить всё
<script src="design/{$settings->theme}/js/elevatezoom-master/jquery.elevatezoom.js" type="text/javascript"></script>
Код: Выделить всё
{* Большое фото товара *}
<img itemprop="image" class="fn-img" src="{$product->image->filename|resize:300:300}" alt="{$product->name|escape}" title="{$product->name|escape}"/>
Код: Выделить всё
{* Большое фото товара *}
<img id="zoom_03" src="{$product->image->filename|resize:300:300}" title="{$product->name|escape}" alt="{$product->product->name|escape}" data-zoom-image="{$product->image->filename|resize:800:600:w}" />
>
Код: Выделить всё
{* Дополнительные фото продукта *}
{if $product->images|count > 1}
<div class="row m-y-2 fn-slick-images okaycms">
{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
{foreach $product->images|cut as $i=>$image}
<div class="col-xs-4 col-lg-3">
<a class="fn-zoom okaycms btn-block border-a-1-info text-xs-center product-images" href="{$image->filename|resize:800:600:w}" rel="group">
<img src="{$image->filename|resize:87:72}" alt="{$product->name|escape}"/>
</a>
</div>
{/foreach}
</div>
{/if}
Код: Выделить всё
{* Дополнительные фото продукта *}
{if $product->images|count > 1}
<div id="gallery_01" class="row m-y-2 fn-slick-images okaycms">
{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
{foreach $product->images as $i=>$image}
<a href="#" class="elevateZoom" data-image="{$image->filename|resize:300:300}" data-zoom-image="{$image->filename|resize:800:600:w}">
<img id="zoom_03" src="{$image->filename|resize:95:95}" />
</a>
{/foreach}
</div>
{/if}
Код: Выделить всё
{literal}
<script>
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', zoomWindowOffetx: 10, zoomWindowOffety: -3, imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
</script>
{/literal}
Код: Выделить всё
/*set a border on the images to prevent shifting*/
#gallery_01 img{border:2px solid white;}
/*Change the colour*/
.active img{border:2px solid #333 !important;}
и в новой версии работает, изменение только в классах cssimperpools писал(а):На новой версии не работает.Есть решение под новую версию?
imperpools писал(а):Какие изменения?
imperpools писал(а):написал
Вернуться в «Предложения по улучшению OkayCMS»
Сейчас этот раздел просматривают: 44 гостя