Доброго всем дня. Сегодняшний пост посвятим применению fancybox в 1с-битрикс. В качестве вступления рекомендую ознакомиться с постом, посвященным fancybox. Вкратце, опишу процесс работы с ним.
- Подключаем библиотеки jquery и fancybox, таблицу стилей для fancybox
- Картинкам присваиваем id и тег rel, для организации группового показа ряда картинок
- Организуем селектор
Со стороны битрикса будем рассматривать шаблон детального элемента каталога, в стандартном шаблоне битрикса он значится под именем catalog.element. Выделяем в нем часть, отвечающую за показ картинок.
Например, имеем следующую структуру:
Как видно из рисунка у нас большой картинкой показывается детальная картинка элемента, и дополнительные картинки под большой. Код, отвечающий за показ этих картинок:
<div class="gallery"> <div class="big_img"> <?if(is_array($arResult["DETAIL_PICTURE"])):?> <a href="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" > <img width="170" height="170" style="display:inline-block;" src="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> </a> <?elseif(is_array($arResult["PREVIEW_PICTURE"])):?> <a href="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" > <img width="170" height="170" style="display:inline-block;" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> </a> <?endif?> <?foreach($arResult["MORE_PHOTO"] as $PHOTO):?> <a href="<?=$PHOTO["SRC"]?>" > <img width="170" height="170" src="<?=$PHOTO["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> </a> <?endforeach?> </div> <div class="preview_img"> <?if(is_array($arResult["PREVIEW_PICTURE"])):?> <img width="<?=$arResult["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arResult["PREVIEW_PICTURE"]["HEIGHT"]?>" style="display:inline-block;" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> <?elseif(is_array($arResult["DETAIL_PICTURE"])):?> <img width="50" height="50" style="display:inline-block;" src="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> <?endif?> <?foreach($arResult["MORE_PHOTO"] as $PHOTO):?> <img width="50" height="50" src="<?=$PHOTO["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> <?endforeach?> </div> </div>
Здесь, кликая по большому изображению, запускается показ картинок с помощью fancybox, а кликая по маленькому изображению, происходит смена в больших картинках. Вот такая тавтология, да простят нас филологи 🙂
Применим к нему вышеизложенные пункты, а именно, добавим id=”fb” и rel=”group” в контейнере big_img, обратите внимание, что rel добавлен и к большой картинке:
<div class="gallery"> <div class="big_img"> <?if(is_array($arResult["DETAIL_PICTURE"])):?> <a id="fb" href="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" rel="group1"><img width="170" height="170" style="display:inline-block;" src="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /></a> <?elseif(is_array($arResult["PREVIEW_PICTURE"])):?> <a id="fb" href="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" rel="group1"><img width="170" height="170" style="display:inline-block;" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /></a> <?endif?> <?foreach($arResult["MORE_PHOTO"] as $PHOTO):?> <a id="fb" href="<?=$PHOTO["SRC"]?>" rel="group1"><img width="170" height="170" src="<?=$PHOTO["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /></a> <?endforeach?> </div> <div class="preview_img"> <?if(is_array($arResult["PREVIEW_PICTURE"])):?> <img width="<?=$arResult["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arResult["PREVIEW_PICTURE"]["HEIGHT"]?>" style="display:inline-block;" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> <?elseif(is_array($arResult["DETAIL_PICTURE"])):?> <img width="50" height="50" style="display:inline-block;" src="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> <?endif?> <?foreach($arResult["MORE_PHOTO"] as $PHOTO):?> <img width="50" height="50" src="<?=$PHOTO["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> <?endforeach?> </div> </div>
Разберем по кусочкам:
общий блок, объединяющий изображения:
<div class=”gallery”>
блок с большим изображением:
<div class="big_img">
блок с маленькими изображениями:
<div class="preview_img">
Если детальная картинка существует, то выводим ее
<?if(is_array($arResult["DETAIL_PICTURE"])):?> <a id="fb" href="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" rel="group"><img width="170" height="170" style="display:inline-block;" src="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /></a>
иначе выводим картинку анонса
<?elseif(is_array($arResult["PREVIEW_PICTURE"])):?> <a id="fb" href="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" rel="group"><img width="170" height="170" style="display:inline-block;" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /></a> <?endif?>
Далее идет перебор дополнительных картинок элемента каталога
<?foreach($arResult["MORE_PHOTO"] as $PHOTO):?> <a id="fb" href="<?=$PHOTO["SRC"]?>" rel="group"><img width="170" height="170" src="<?=$PHOTO["SRC"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /></a> <?endforeach?>
Блок с превью-картинками имеет аналогичную структуру.
Нам остается после строки
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
добавить скрипт с селектором:
<script type="text/javascript"> $(function() { $('a#fb').fancybox({ 'transitionIn': 'elastic', 'transitionOut': 'elastic', 'speedIn': 600, 'speedOut': 200, 'overlayShow': false, 'cyclic' : true, 'padding': 20, 'titlePosition': 'over', 'onComplete': function() { $("#fancybox-title").css({ 'top': '100%', 'bottom': 'auto' }); } }); }); $("a#id").fancybox(); </script>
Тамара, очень интересный урок: 1с-Битрикс + FancyBox! Но нужна ваша дополнительная помощь для реализации.
Добрый день, Андрей. Обращайтесь, помогу чем смогу…
Does anybody know where is the mistake in this fancybox script for bitrix ?
$(document).ready(function () {
$(«a[rel=catalog-detail-images]»).fancybox(
{
«padding» : 20,
«imageScale» : false,
«zoomOpacity» : false,
«zoomSpeedIn» : 1000,
«zoomSpeedOut» : 1000,
«zoomSpeedChange» : 1000,
«frameWidth» : 700,
«frameHeight» : 600,
«overlayShow» : true,
«overlayOpacity» : 0.8,
«hideOnContentClick» :false,
«centerOnScroll» : false
});
});
Ошибки здесь не вижу, возможно у вас не подключается библиотека fancybox…
Добавка: если проблема в сайте, что вы указали, то попробуйте ограничиться указанием одной библиотеки, она у вас дважды подключается.. возможен конфликт..
На сайте в каталоге есть доп. картинки (MORE_PHOTO) и прикрученная галерея на FancyBox. Сама галерея работает, но когда нажимаешь на стрелки навигации — почему-то сначала 2 раза перемаргивает таже самая картинка и только на 3- раз ее сменяет следующая. Использовала два разных скрипта из разных источников — результат тот же самый.
Ссылка на страницу (в самом низу):
http://likeprint.ru/katalog/1/listovki
Добрый день, нашла у Вас ошибку, Вы забыли закрывающий тег у ссылки /a
А div`у можно применять name=more_photo ?
А как?
да, можно, оставьте все как было у вас, только после картинки вставьте
</a>