1С-Битрикс + FancyBox

Доброго всем дня. Сегодняшний пост посвятим применению fancybox в 1с-битрикс. В качестве вступления рекомендую ознакомиться с постом, посвященным fancybox. Вкратце, опишу процесс работы с ним.

1. Подключаем библиотеки jquery и fancybox, таблицу стилей для fancybox
2. Картинкам присваиваем id и тег rel, для организации группового показа ряда картинок
3. Организуем селектор

Со стороны битрикса будем рассматривать шаблон детального элемента каталога, в стандартном шаблоне битрикса он значится под именем 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>