Не работает fancybox на странице товара

Привет,
Наступил 2 раза на одни грабли. Пару лет назад сталкивался с такой же проблемой, но специфика была другая.

На странице товара магазина minishop2 не работает fancybox.
Сразу уточню, что дизайн не использует bootstrap и речь не о том, что не работает fancy из коробки.

Прошу помощи советом в конкретной ситуации.
По клику на thumbnail открывается ссылка с картинкой в новом окне, а не заменяет картинку в основном диве.

На страницу подключаются JS

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--<script type="text/javascript" src="./resources/j/jquery.min.js" >	</script> -->

<script type="text/javascript" src="./resources/common/_common.min.js" defer ></script>
<script type="text/javascript" src="./resources/main/_main.min.js" defer ></script>

(Заменил мой jquery на последний, ситуацию не изменило)

Верстка msGallery

tpl.msGallery.outer.my

<section class="b-gallery2 _ico-zoom js-reload" data-reload-id="gallery">
    <div class="b-gallery2__images-wrap cleared">
        <div class="b-gallery2__img g-clickable" id="product_card_img">

	<a rel="fancybox" href="[[+url:default=`/assets/components/minishop2/img/web/ms2_big.png`]]" target="_blank">
		<img src="[[+380x380:default=`/assets/components/minishop2/img/web/ms2_medium.png`]]" width="380" height="380" alt="" title="" id="mainImage"  class="g-clickable"/>
	</a>
	
            <span class="b-ico b-ico_preloader_30x30" style="display:none;"></span><i class="b-ico b-ico_preloader_md" style="display: none;"></i></div>
            <nav class="b-gallery2__nav helper-last">
                <ul id="product_card_nav" class="thumbnails">
  		[[+rows]]
                </ul>
            </nav>
    </div>
</section>

tpl.msGallery.row.my

<li>
                        <a class="gtm-product-page-click fancy_gallery" rel="fancybox" href="[[+380x380:default=`[[+url]]`]]" data-image="[[+url]]">
    <img src="[[+100x100]]" alt="" title="[[+name]]" width="50">
                        </a>
                    </li>

Как реализована логика fancybox по дефолту в minishop2?
Возможно, так как верстка другая, скрипт не цепляет нужный класс?
Нужно ли скриптом прописывать запуск fancybox в хеде?

SaLacoste

22 мая 2015, 23:48

5 434

Комментарии: 13

Сергей Фещуков

23 мая 2015, 09:33

Вы вообще читали как подключается fancybox? По умолчанию его в miniShop2 нет. Вам сюда fancyapps.com/fancybox/

SaLacoste

23 мая 2015, 14:27

minishop2.com/catalog/category-1/product-1
Где здесь включены JS fancybox?

Василий Наумкин

23 мая 2015, 14:53

А где здесь вообще FancyBox?

SaLacoste

23 мая 2015, 15:01

Василий, уже выяснили, что я не так понял функционал fancybox.
Вопрос в работе msGallery при кастомной верстке.
Какие id,class должны быть, чтобы при клике на миниатюру она появлялась в основном блоке картинкой?

Василий Наумкин

23 мая 2015, 15:19

Какие id,class должны быть

Посмотри в родных чанках галереи, это несложно.

Dmitry Rodionov

23 мая 2015, 14:21

Обычно скрипты прописываются в футере, если используется минифаер, то лучше не добавлять в него фанси, он не работает, а времени почему не работает — разбираться не было.
Фанси нужно подключаться отдельно, советую 3ю версию, хоть и бета, уже давно юзаю — проблем не находил.

P.S. фанси кстати платная, но мало кто задумывается об этом…

SaLacoste

23 мая 2015, 14:30

Фанси нужно подключаться отдельно, советую 3ю версию, хоть и бета, уже давно юзаю — проблем не находил.

Что подразумевается под подключением отдельно?

Dmitry Rodionov

23 мая 2015, 14:35

под формулировкой — не работает fancybox — значит его надо подключать и прописывать чтобы при щелчке на большой картинке открывался попап от фанси
то что миниатюры не работают — они должны работать из коробки, так что самый верный способ смотреть в консоль и на классы которые ты используешь, например чтобы стояло id=«msGallery» и т.п.

SaLacoste

23 мая 2015, 14:40

Возможно я не правильно выразился.
Проблема состоит в следующем,
При клике на миниатюру, она не появляется в большом формате в основном блоке галереи, а открывается в новом окне (срабатывает линк).

Поэтому я и спрашиваю, по каким критериям реализована логика работы, какие id, какие классы используются для этого.

Консоль пустой, ошибок нет.

Dmitry Rodionov

23 мая 2015, 14:54

это не зависит от фанси вообще никак, классы и разметку проверь, чтобы у родителя стоял id=«msGallery» и т.п., а лучше вообще возьми дефолтный чанк за основу и повесь стили на него, так уж точно не ошибешься.

SaLacoste

23 мая 2015, 15:13

Откатил на дефолтную верстку, все работает.

По каким классам,id реализована эта логика, никто не подскажет?

Dmitry Rodionov

23 мая 2015, 15:26

я же написал
родитель — id=«msGallery»
главное изображение id=«mainImage»
миниатюра class=«thumbnail»
это можно понять глядя на код, если не ясно — смотри js

vlad

25 мая 2015, 17:43

лично я подключал так:

<div class="flat-fotos">
            [[!getImageList? 
            &tvname=`foto_advert` 
            &tpl=`@CODE: <a class="fancybox" href="[[+image]]" data-fancybox-group="gallery"><img src="[[+image]]" alt="foto"></a>`
            ]]       
                   </div>

может поможет!

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Не работает fancybox на странице товара

Комментарии: 13

Здесь упомянуты