Битрикс: слайдер баннеров. Пример разработки
5 Декабря 2014

Битрикс: слайдер баннеров. Пример разработки

Слайдер баннеров или картинок очень распространенный атрибут многих сайтов. Рассмотрим на примере как создать простой слайдер для Битрикс своими руками.

Пример слайдера

Не будем изобретать велосипед, за основу слайдера возьмём неплохой jQuery плагин Fotorama. Управление элементами слайдера (создание, редактирование, удаление) реализуем на инфоблоках. Вывод элементов на сайт организуем через компонент список новостей bitrix:news.list.

Нам понадобится уже установленный сайт на любой редакции Битрикс, плагин Fotorama и около 30 мин. времени.

Поехали.

1. Качаем Fotorama

2. Создаем и настраиваем инфоблок в админке.

2.1 Находим в панели администратора типы инфоблоков Контент Инфоблоки Типы инфоблоков. Создаем новый тип.

2.2 Заходим в созданный только что тип инфоблока Контент Инфоблоки Типы инфоблоков Слайдер, теперь мы можем непосредственно создать сам инфоблок.

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

2.3 Наш инфоблок создан. Можно переходить к добавлению элементов. Переходим в Контент Слайдер Слайдер баннеров, добавляем несколько элементов.

Даем имя и к каждому элементу добавляем картинку для анонса.

3. Идем в раздел сайта, в котором требуется вывести эти баннеры. Открываем страницу в визуальном редакторе. И из области с компонентами выбираем нужный нам список новостей bitrix:news.list и перетягиваем его в рабочую область страницы.

3.1 В настройках компонента в основных параметрах нужно указать тип инфомационного блока (в нашем случае он называется "Слайдер") и код информационного блока (в нашем случае его название "слайдер баннеров").

Сохраняем настройки и нашу страницу. Если вы все сделали правильно, то увидите на странице вывод элементов инфоблока.

4. Последний шаг. Редактируем шаблон компонента и подключаем плагин Fotorama.

4.1. На странице со слайдером переходим в режим правки. Прежде, чем редактировать шаблон, рекомендуется скопировать его в папку с шаблоном сайта. Наводим на шестерёнку с компонентом, в появившемся меню выбираем "копировать шаблон компонента".

далее в появившемся окне вводим имя шаблона (к примеру, fotorama1) выбираем "копировать в шаблон сайта", указываем в списке ваш сайт.

4.2. Подключаем скрипт плагина <script src="../fotorama.js" type="text/javascript">. Для его работы необходима библиотека jQuery, если ее нет, подключаем.

4.2 Идем в папку в шаблоном компонента /bitrix/templates/шаблон_сайта/components/bitrix/news.list/fotorama1/. Открываем для редактирования файл template.php.

Можно удалить весь лишний код, оставим только цикл foreach, внутри цикла размещаем скрипт, который выведет нам все изображения из инфоблока. Все наши изображения должны быть внутри блока <div class="fotorama">, чтобы плагин увидел и обработал их.

Готовый код выглядит так:

<div class="fotorama">
<?foreach($arResult["ITEMS"] as $arItem):?>
  <?
  $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
  $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
  //проверяем, есть ли у улемента изображение анонса
  if(is_array($arItem["PREVIEW_PICTURE"])) { 
  ?>
  <img
    class="preview_picture"
    src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
    width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>"
    height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>"
    alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
    title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
    />
  <? } ?>
<?endforeach;?>
</div>

В этой же папке с шаблоном слайдера /fotorama1/ находим файл со стилями компонента style.css и заменяем всё его содержимое на стили из fotorama.css, копируем в папку файл с изображениями fotorama.png.

Наш простой слайдер для bitrix готов!

Демо слайдера

Если хотите облегчить себе задачу, можете скачать шаблон полученного компонента. Останется немного настроить.

Скачать готовый шаблон бесплатно

Fotorama гибка в настройках, ознакомиться с документацией можно на официальном сайте.

С вопросами или предложениями по компоненту приглашаю в комментарии.

Комментарии

Использую в своей работе