Как сделать слайдер в битрикс
1C-Битрикс _Старт
Построение сайта с нуля.
Статьи
Гостевая книга. Продолжение 2. Спам
Создано:
23 января 2017 в 11:45:23
Изменено:
5 августа 2017 в 21:56:42
В этой статье описывается процесс решения проблемы спама в гостевой книге.
Подробнее
Полезные ссылки
Слайдер
Создано: 05.09.2013 19:34:33 | Изменено: 06.11.2016 17:07:56 | Просмотров: 15340
Откроем административный раздел сайта, «Контент» – «Инфоблоки» – «Типы инфоблоков». Нажимаем кнопку «Добавить новый тип». Откроется вкладка «Настройка типа». В поле «Идентификатор (ID)» укажем «content». В поле «Russian (Название)» укажем «Контент». В поле «English (Название)» укажем «Content».
Создадим новый инфоблок для слайдера.
На форме информационного блока, в поле «Символьный код» укажем «slider». Отметим чекбокс с сайтом по умолчанию. В поле «Название» укажем «Слайдер». Уберем галки из чекбоксов с индексированием разделов и элементов.
С вкладкой «Инфоблок» закончили.
Открываем вкладку «Поля». Находим строчку «Картинка для анонса». Выбираем первый чекбокс. Теперь при создании элемента инфоблока картинка для анонса будет обязательна. Затем выбираем чекбокс «Уменьшать если большая». Откроются поля ширины и высоты. Указываем 950 и 300.
Переходим к вкладке «Доступ». В разделе «Доступ по умолчанию». Для всех пользователей выберем уровень доступа «Чтение» (чтобы все посетители сайта могли просматривать изображения слайдера).
На этом все, сохраняем инфоблок.
Переходим в инфоблок «Слайдер». Жмем «Добавить элемент». Справа есть «шестеренка» для открытия окна «Настройка формы редактирования». Нажимаем. Удаляем все вкладки кроме вкладки «Элемент». В выбранных полях оставляем: «Активность», «Название», «Картинка для анонса».
На форме осталась только одна вкладка «Элемент».
В поле «Название» указываем, например, 1. Переносим картинку с размерами 950×300 px в область для перетаскивания. Жмем «Сохранить».
Так повторяем еще один-два раза (можно больше). С созданием инфоблока закончили.
Копируем шаблон компонента. Назовем новый шаблон «slider». Скопируем в основной шаблон сайта. Шаблон будем редактировать через FTP.
Через FTP открываем папку шаблона компонента слайдера (папка_сайта/bitrix/templates/main/components/bitrix/news.list/slider). На редактирование открываем файл «template.php». Удаляем все его содержимое. И всавляем следующий код:
Затем в публичной части сайта открываем тестовую страницу на редактрование и копируем вызов компонента. Через FTP открываем файл «header.php» в папке основного шаблона сайта. Находим «div» с классом «gallery» (
Вставляем вызов компонента вместо этого «div’a». Сбрасываем кэш в публичной части сайта. Смотрим что получилось.
Создание слайдера на 1С-Битрикс
Допустим вам необходимо создать слайдер, который заказчик сможет без проблем редактировать (содержание), и каждое изображение должно вести на определённую страницу + появлятся в определённое время. В помощь нам приходят инфоблоки.
Т.е. картинка будет идти из анонса, вы можете сделать наоборот (из детальной).
Теперь уже всё идёт на ваше усмотрение. Вы можете сделать через свой компонент. Я покажу, как сделано у меня.
2. Добавляем компонент «Список новостей (bitrix:news.list)» в необходимую область сайта.
При этом в свойствах сделаем наше поле активным (slider_link) и уберём галки у «Устанавливать заголовок страницы, Устанавливать статус 404. Включать инфоблок в цепочку навигации, Включать раздел в цепочку навигации»
У меня компонент выглядит примерно так:
3. Частным пример подключения слайдера:
Для работы скрипта необходимо подключить библиотеку JQuery!
Скачиваем слайдер SlidesJs ( http://slidesjs.com/ ). Кидаем slides.min.jquery.js в папку шаблона слайдера (ШАБЛОН/components/bitrix/news.list/slider/) и меняем имя на script.js, изображения перемещаем в папку images в ней же, стиль кидаем в папку шаблона слайдера, назвав style.css, и поменяв пути до картинок.
Содержание шаблона будет выглядеть так:
Делаем слайдер на «Битрикс»
Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.
| Источник: |
Разберем типовую задачу, актуальную для 99,99999% создаваемых сайтов. Как организовать слайдер на «Битрикс»? Приводим пошаговую инструкцию.
1. Инфоблок для элементов слайдера
Прежде всего создадим инфоблок не – товарного типа. Например, типа «Новости». Задаем в разделе «Поля», что заполнение картинки для анонса обязательно. Указываем, что картинка для анонса создается из детальной, если не задана отдельно.
Обязательно настроим специальное свойство для ссылки элемента слайдера:
2. Компонент вывода слайдера
Возьмем за основу компонент списка новостей bitrix:news.list и настроим. Отключим заголовок страницы, статус 404, включение в цепочку навигации. Получим примерно такой код компонента:
IncludeComponent(
«bitrix:news.list»,
«slider»,
Array(
«DISPLAY_DATE» => «Y»,
«DISPLAY_NAME» => «Y»,
«DISPLAY_PICTURE» => «Y»,
«DISPLAY_PREVIEW_TEXT» => «Y»,
«AJAX_MODE» => «N»,
«IBLOCK_TYPE» => «news»,
«IBLOCK_ID» => «4»,
«NEWS_COUNT» => «20»,
«SORT_BY1» => «ACTIVE_FROM»,
«SORT_ORDER1» => «DESC»,
«SORT_BY2» => «SORT»,
«SORT_ORDER2» => «ASC»,
«FILTER_NAME» => «»,
«FIELD_CODE» => array(«SLIDER_LINK»),
«PROPERTY_CODE» => array(«SLIDER_LINK»),
«CHECK_DATES» => «Y»,
«DETAIL_URL» => «»,
«PREVIEW_TRUNCATE_LEN» => «»,
«ACTIVE_DATE_FORMAT» => «»,
«SET_TITLE» => «N»,
«SET_STATUS_404» => «N»,
«INCLUDE_IBLOCK_INTO_CHAIN» => «N»,
«ADD_SECTIONS_CHAIN» => «N»,
«HIDE_LINK_WHEN_NO_DETAIL» => «N»,
«PARENT_SECTION» => «»,
«PARENT_SECTION_CODE» => «»,
«CACHE_TYPE» => «A»,
«CACHE_TIME» => «36000000»,
«CACHE_NOTES» => «»,
«CACHE_FILTER» => «N»,
«CACHE_GROUPS» => «N»,
«DISPLAY_TOP_PAGER» => «N»,
«DISPLAY_BOTTOM_PAGER» => «N»,
«PAGER_TITLE» => «Слайдер»,
«PAGER_SHOW_ALWAYS» => «N»,
«PAGER_TEMPLATE» => «»,
«PAGER_DESC_NUMBERING» => «N»,
«PAGER_DESC_NUMBERING_CACHE_TIME» => «36000»,
«PAGER_SHOW_ALL» => «N»,
«AJAX_OPTION_JUMP» => «N»,
«AJAX_OPTION_STYLE» => «Y»,
«AJAX_OPTION_HISTORY» => «N»,
«AJAX_OPTION_ADDITIONAL» => «»
)
);?>
3. Шаблон слайдера
Создадим отдельную папку для слайдера по адресу
SHABLON/components/bitrix/news.list/slider/
Поместим в эту папку код компонента, HTML-настройки слайдера и JQuery – скрипт Slides.js.
Слайдер будет вызываться кодом:
4. Скрипт Slides.js
Скачиваем скрипт по адресу http://slidesjs.com/. Затем загружаем slides.min.jquery.js в папку шаблона, и переименовываем в slides.js. В папке шаблона создайте папку images и помещайте в нее изображения слайдера. Поместите файл стиля в папку шаблона, присвойте ему имя style.css и отредактируйте пути до картинок.
5. Код шаблона
Код шаблона должен содержать код подобного вида:
Битрикс как создать слайдер
Краткая инструкция как создать свой слайдер для CMS 1С-Битрикс. Подойдет для тех, у кого не получается создать простейший внешний вид для компонента «новостей».
Как создать слайдер из инфоблока на Битриксе
Предположим, что, вы уже хорошо знакомы с вёрсткой, скриптами (javasctipt и jQuery), и понимаете что такое слайдер. Будет плюсом, если вы уже знакомы с битриксом и инфоблоками.
Создать свой слайдер не так уж и сложно, нужно выполнить несколько простых действий:
1 Шаг: Создаем новый инфоблок в админке. Если вы только начинаете работать с проектом, то перед этим нужно создать новый тип инфоблока, например, назовем его Контент с кодом content. При создании нового инфоблока удаляем правила ЧПУ, название, символьный код, и не забываем выставить необходимые права доступа. Если вы планируете дальнейшее создание информационной структуры (имею ввиду переходы по ссылкам относительно /slider/), то указываем правила для ЧПУ. Не забываем и задать галочки для транслитерации и ресайза изображений (можно поставить максимальную ширину, чтобы урезать картинки). 
2 Шаг: Создаем демо контент для слайдера, состоящий из названий и изображений, этого вполне хватит для простейшего слайдера. Картинка для анонса подойдет.
3 Шаг: На тестовой странице выводим компонент news.list, ставим в настройках нужный нам инфоблок, количество новостей и обязательно создаем для него свой шаблон, например slider. После этого записываем в шаблон такой код:
Вот и все, теперь вам необходимо только подключить скрипты и заменить стили на свои. После всех проделанных действий, останется только перенести код вызова компонента в тот участок сайта или шаблона, в котором он и задумывался.
автор: Dmitriy
Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.
— Создание сайтов на 1С-Битрикс любой сложности
— Вёрстка макетов Figma, Photoshop, Zeplin
— Поддержка проектов на Битриксе
— Разработка нового функционала для сайта
— Парсинг данных
— Выгрузка \ Загрузка файлов в формате XML, YML, XLS, XLSX, CSV, JSON
— Интеграция по API со сторонними сервисами
и многое другое
Урок 9. Создание собственного компонента слайдера для интернет-магазина на Битрикс на CMS-Foundation
Приветствую моих читателей! Мы продолжаем строить наш собственный интернет-магазин на Битрикс редакции Старт. В прошлых уроках мы уже реализовали адаптивный каталог товаров и сделали карточку товара. Теперь пришло время немного подкрасить наш магазин и внести такую модную штуку, как слайдер. Если бы мы не пользовались никаким CSS-фреймворками, то нам потребовалось бы изучать Java Script и JQuery. Или по крайней мере искать в интернете готовые скрипты и как-то их прикручивать к сайту. Но как вы помните наш интернет магазин строится полностью на CSS-фреймворке Foundation, а в нём уже есть готовый класс для слайдера Orbit.
Но внедрять PHP код и API Битрикс непосредственно в шаблон не очень правильное решение, не bitrix-way, так сказать. Поэтому для вывода слайдера мы создадим собственный компонент. Ну и конечно при этом научимся создавать свои собственные компоненты Битрикс.
План создания компонента Битрикс
Логику работы мы заложим следующую. Слайдер будет строится на том же инфоблоке Товары, что и каталог. Но попадать в слайдер будут только те товары, у которых задано свойство Слайдер (SLIDER). Входными параметрами для нашего компонента будет Тип инфоблока, Инфоблок и свойство указывающее, что необходимо выводить слайдер.
Если у вас нет свойства Слайдер в инфоблоке добавьте его.
Тип у свойство должен быть список.
Программно конечно со списками сложнее работать, чем со строкой или числом, зато удобнее указывать при редактировании карточки товара.
Инфоблок настроили, теперь можно приступить к созданию собственного компонента Битрикс. Что может быть интереснее написания собственных компонент.
Создание компонента Битрикс
«Слайдер»,
«DESCRIPTION» => «Слайдер на фреймворке CSS Foundation»,
«ICON» => «/images/icon.gif»,
«SORT» => 100,
«CACHE_PATH» => «Y»,
«PATH» => array(
«ID» => «startshop»,
«NAME» => ‘Компоненты StartShop’
),
);
?>
В этом фале задается наименование и описание компонента. А так же иконка для отображения в палитре компонентов и параметр PATH указывает на то, в какой папочке будет находится компонент в палитре компонентов.
$arProperty_LNS = array();
$rsProp = CIBlockProperty::GetList(array(«sort»=>»asc», «name»=>»asc»), array(«ACTIVE»=>»Y», «IBLOCK_ID»=>($arCurrentValues[«IBLOCK_ID»])));
while ($arr=$rsProp->Fetch())
<
$arProperty[$arr[«CODE»]] = «[«.$arr[«CODE»].»] «.$arr[«NAME»];
if (in_array($arr[«PROPERTY_TYPE»], array(«L», «N», «S»)))
<
$arProperty_LNS[$arr[«CODE»]] = «[«.$arr[«CODE»].»] «.$arr[«NAME»];
>
>
Вот такие параметры будут доступны в настройках нашего компонента из публичной части сайта.
Код компонента получился очень короткий в отличие от стандартного кода вывода списка новостей. Тут нет ничего лишнего. Вначале мы объявили пространство имен для загрузчика Loader, далее с его помощью подгрузили модуль инфоблоков iblock. И с помощью самой распространенной конструкции API Bitrix CIBlockElement::GetList() выполнили запрос к базе данных отобрав записи инфоблока Товары, в котором свойство Слайдер установлено в занчение «Да«. Далее результатом выборки заполнили предопределенный массив $arResult и последней строкой подключили файл шаблона.
1100,’height’ => 500), BX_RESIZE_IMAGE_EXACT, true);
?>
Тут конечно надо заметить, что не очень красиво получилось. По хорошему нужно подобрать пропорциональные картинки и разместить их в отдельном инфоблоке. Вы попробуйте так и сделать, код компонента при этом обсалютно не изменится, даже упростится, не потребуется условие отбора по свойству Слайдер. Вобщем пример при этом не страдает, по этому переделывать я не стану, а лучше напишу побыстрее следующий урок.
И как всегда выкладываю исходный код урока:
компонент slider
шаблон этого урока
От автора:
А на этом пока все. Собственно, что касается вывода информации почти все готово, остаются мелочи. Т.е. витрина у нас уже готова и работает. Дальше нужно делать функционал магазина, а это значит карнизу и заказы. Подписывайтесь и ждите новых статей, дальше будет интереснее.
Почему же не работать с визуальной частью сайта (в частности с картинками) средствами CSS?? Зачем городить php для картинок и в предыдущих уроках сетку под разные экраны?? Ведь для этого верстка на CSS Foundation! Эх)
А как средствами CSS можно смасштабировать картинку, которая изначально не подходящего размера и не потерять пропорции?