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

Правила раздела: faq.php?mode=okay

Desmond
Аватара
Desmond
Репутация: 0
Сообщения: 5
Зарегистрирован: 13.02.2016
С нами: 2 года 8 месяцев

Сообщение #1 Desmond » 13.02.2016, 14:46

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

OkayCMS M
Администратор
Аватара
OkayCMS M
Администратор
Репутация: 73
Сообщения: 794
Зарегистрирован: 12.11.2015
С нами: 2 года 11 месяцев
Сайт Skype

Сообщение #2 OkayCMS » 13.02.2016, 16:53

Это реализуется с помощью верстки. Вы можете подключить это к своему сайту.

Gleb1972
Gleb1972
Репутация: 3
Сообщения: 33
Зарегистрирован: 02.02.2017
С нами: 1 год 8 месяцев

Сообщение #3 Gleb1972 » 03.03.2017, 12:51

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

sergeevizh
sergeevizh
Репутация: 9
Сообщения: 103
Зарегистрирован: 16.10.2016
С нами: 2 года

Сообщение #4 sergeevizh » 03.03.2017, 14:19

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


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

Gleb1972
Gleb1972
Репутация: 3
Сообщения: 33
Зарегистрирован: 02.02.2017
С нами: 1 год 8 месяцев

Сообщение #5 Gleb1972 » 03.03.2017, 15:50

sergeevizh, спасибо Вам огромное!!!

Gleb1972
Gleb1972
Репутация: 3
Сообщения: 33
Зарегистрирован: 02.02.2017
С нами: 1 год 8 месяцев

Сообщение #6 Gleb1972 » 11.09.2018, 09:58

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

виктор
виктор
Репутация: 1
Сообщения: 10
Зарегистрирован: 18.11.2017
С нами: 11 месяцев 3 дня

Сообщение #7 виктор » 12.09.2018, 04:34

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


Название раздела: Предложения по улучшению OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Предложения по улучшению OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 1 гость