Страница 1 из 1

Зум для фото товара

Добавлено: 13.02.2016, 14:46
Desmond
Полезная функция увеличение фото товара, с помощью которой покупатель может хорошо рассмотреть товар в деталях, например фактуру материала одежды или обуви.

Добавлено: 13.02.2016, 16:53
OkayCMS
Это реализуется с помощью верстки. Вы можете подключить это к своему сайту.

Добавлено: 03.03.2017, 12:51
Gleb1972
OkayCMS писал(а):Это реализуется с помощью верстки. Вы можете подключить это к своему сайту.
Не скромный вопрос, как?

Добавлено: 03.03.2017, 14:19
sergeevizh
Gleb1972 писал(а):
OkayCMS писал(а):Это реализуется с помощью верстки. Вы можете подключить это к своему сайту.
Не скромный вопрос, как?

решение зум с всплывающим fancy при клике на фото http://www.elevatewe...e-zoom/examples

1. Качаем elevatezoom отсюда: http://www.elevateweb.co.uk/download-file

2. Загружаем папку elevatezoom-master из архива в папку /js/ вашего шаблона

3. Подключаем в файле /design/ваша_тема/html/index.tpl перед </head> вставляем:

Код: Выделить всё

<script src="design/{$settings->theme}/js/elevatezoom-master/jquery.elevatezoom.js" type="text/javascript"></script>


4. В файле /design/ваша_тема/html/product.tpl меняем:

Код: Выделить всё

{* Большое фото товара *}
                  <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}


5. Открываем файл /design/ваша_тема/css/style.css и добавляем стили:

Код: Выделить всё

/*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;}


Рекомендую загружать квадратные фото для красивого отображения на сайте

Добавлено: 03.03.2017, 15:50
Gleb1972
sergeevizh, спасибо Вам огромное!!!

Добавлено: 11.09.2018, 09:58
Gleb1972
Доброго времени суток. Подскажите пожалуйста (если можно так же подробно, как выше) как подключить в версии 2.2.2. Заранее благодарен за ответ.

Добавлено: 12.09.2018, 04:34
виктор
Доброе утро , а в мобильной версии сайта работать адекватно будет? перешел с мобильного по ссылке , там все очень плохо.

Добавлено: 05.12.2018, 07:56
imperpools
На новой версии не работает.Есть решение под новую версию?

Добавлено: 05.12.2018, 11:12
sergeevizh
imperpools писал(а):На новой версии не работает.Есть решение под новую версию?
и в новой версии работает, изменение только в классах css

Добавлено: 05.12.2018, 11:51
imperpools
Какие изменения?

Добавлено: 05.12.2018, 12:00
sergeevizh
imperpools писал(а):Какие изменения?

Пишите в skype:sergeevizh помогу бесплатно

Добавлено: 05.12.2018, 12:11
imperpools
написал

Добавлено: 05.12.2018, 13:17
sergeevizh
imperpools писал(а):написал

помог