@Irgen

Как правильно подключить fancybox в карточке товара в Битриксе?

Всех привествую! Достался мне сайт на Битриксе, помаленьку разбираюсь с версткой и самим Битриксом, возник вопрос по fancybox и его использованию, а именно по прокрутке изображений в карточке товара. По порядку:
1. В хедере я подключаю jQuery, jquery-fancybox, bootstrap и их css-ки:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/js/bootstrap.js")?>"></script>
	<script src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/js/script.js")?>"></script>
    <script src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/js/jquery.fancybox.js")?>"></script>
    <script src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/js/jquery.fancybox-buttons.js")?>"></script>
	<link href="/css/horizontalmenu.css" rel="stylesheet" type="text/css">
	<link href="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/css/bootstrap.css")?>" rel="stylesheet" media="screen">
	<link href="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/css/theme.css")?>" rel="stylesheet" media="screen">
    <link href="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/css/jquery.fancybox.css")?>" rel="stylesheet" media="screen">
    <link href="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/css/jquery.fancybox-buttons.css")?>" rel="stylesheet" media="screen">

2. Далее, как я вижу, в самом шаблоне элемента, который выводит карточку товара, такой кусок кода, выводящий изображения, привязанные к товару:
<div id="<?=$arItemIDs['ID']?>" class="product-card clearfix">
    <div class="group image col-xs-6">
        <ul class="list-unstyled">
            <li>
                <img id="destination_img" style="max-width:270px;" src="<? echo $arFirstPhoto['SRC']; ?>">
            </li>
            <?
            foreach($photos AS $photo){
                $photo = CFile::GetFileArray($photo);
                ?>
                <li>
                    <img class="img_clickable" style="max-width:130px;" src="<? echo $photo['SRC']; ?>">
                </li>
                <?
            }
            ?>
        </ul>
    </div>

3. В конце страницы шаблона у меня подключен скрипт fancybox:
<script type="text/javascript">
	$(document).ready(function() {
		$(".destination_img").fancybox();
	});
</script>

4. Проблема заключается в том, что у меня отсутствуют кнопки перелистывания изображений по кругу, которые должны появляться по краям картинки в модальном окне.
Что я делаю не так? Страница с примером: firing-line.ru/catalog/gladkostvolnoe_oruzhie/faba...
Проблема, насколько я понимаю, что в скрипт не передается параметр rel, по которому и происходит группировка картинок в одну галерею. Как его правильно вставить?
Заранее спасибо всем откликнувшимся.
  • Вопрос задан
  • 4875 просмотров
Пригласить эксперта
Ответы на вопрос 1
выводите в a href ссылку на большие фотографии и задайте rel им, а то, что сейчас выводиться в img пропустите через https://dev.1c-bitrix.ru/api_help/main/reference/c... и выводите как миниатюру
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы