Также очень часто на одной и той же странице возникает необходимость добавить несколько красивых фотографий после текстового блока, продолжить текст, опять фотографии и так далее.
Мы предлагаем простое и очень удобное решение этого вопроса, крайне упрощающего жизнь контент-менеджерам и SEO-специалистам.Фишки и особенности нашего слайдера
- Удобство работы: Слайдер фотографий интегрирован с Инфоблоком, позволяя добавлять сразу несколько фотографий. Это существенно упрощает процесс, поскольку вам больше не нужно создавать множество отдельных элементов для одного слайдера. Всё организовано просто и удобно.
- Гибкость размещения: Каждый элемент Инфоблока является самостоятельным слайдером, который можно использовать в различных частях сайта: в товарах, новостях, описаниях разделов или на статичных страницах. Это обеспечивает большую гибкость в адаптации контента.
- Шаблоны и кастомизация: В стандартной комплектации идут три встроенных шаблона, но у вас есть возможность добавления собственных, что позволяет сделать слайдер уникальным и соответствующим вашим требованиям.
- SEO-дружелюбие: Мы позаботились о SEO, добавив теги Alt и Title, что упрощает индексацию изображений поисковыми системами.
- Стили: Слайдер не конфликтует с вашими стилями, что гарантирует безупречную интеграцию в общий дизайн сайта. Все элементы будут отображаться корректно и эстетично.
- Выбор шаблонов: Встроено три шаблона слайдеров: две карусели и один с миниатюрами. Кроме того, планируется добавление шаблона «аккордеон», что расширяет возможности выбора.
- Настройки ширины: Ширина области слайдера задается в процентах, по умолчанию — 100%. Это значение можно изменить в настройках свойств Инфоблока, позволяя вам настроить слайдер под любые требования.
- Всплывающие фотографии: Для шаблонов Слайдер 1 и Слайдер 3 предусмотрена всплывающая функция с иконкой «лупы», чтобы пользователи могли легко увеличить изображения.
- Информативность: Названия и описания фотографий выводятся динамически. Вы можете настроить цвет текста и стрелочек «влево-вправо», а также цвет подложки под текст. Подложка может быть полупрозрачной, что позволяет адаптировать вид под ваш стиль.
- Расположение подложки: Подложка с названием и описанием фотографии прикреплена к низу, что особенно актуально для шаблонов «каруселей» (Слайдер 1 и Слайдер 2).
- Динамическое обновление: Важно отметить, что названия и описания (Title и Alt) подтягиваются из Медиабиблиотеки. Изменив их там, вы автоматически обновите информацию на сайте.
- Параметры по умолчанию: После установки слайдера по умолчанию установлен шаблон Слайдер 1, цвет слайдера и текста #429AD5A6, цвет подложки #FFFD74.
- Упрощение работы с ID: Если вам нужно использовать новый элемент слайдера, он автоматически появляется в сниппетах в визуальном редакторе. Порой потребуется обновить список новых сниппетов.
- Настройки после размещения слайдера в тексте: Вы можете менять шаблон слайдера и другие настройки, зайдя в соответствующий элемент. В публичной части сайта всё изменится на всех страницах, где размещен этот слайдер (если он был размещен не единожды, конечно).
- Сохранение Инфоблока: При удалении модуля Инфоблок не исчезает, так что вы сможете его использовать позже, если это понадобится.
- Работа без jQuery: Fancybox функционирует без использования jQuery, что минимизирует потенциальные конфликты в верстке.
- Зацикленная прокрутка: Прокрутка слайдеров осуществляется по кругу. Автоматического пролистывания с определённым интервалом нет и не будет, так как это может раздражать пользователей.
- Плавность высоты слайдеров: Слайдеры 1 и 2 не будут менять высоту при пролистывании, если выбрана настройка «вписывать по высоте».
Вывод информации при всплытии: При открытии фотографий также отображаются их названия и описания, что улучшает информативность.
Слайдер упрощает работы с изображениями и обеспечивает высокую функциональность на сайте.
Предположим, мы хотим разместить текст: один или несколько абзацев.
Далее хотим в нескольких местах разместить слайдеры фотографий.
Порядок действий:
1. Добавляем в Медиабиблиотеку раздел, подраздел и т.д. - так, как нам будет удобно группировать фотографии.
2. Сразу правим названия фотографий и описания их. Это важно, мы утащим их в слайдеры!
3. Добавляем элемент в созданном модулем инфоблоке
"Слайдер фотографий для размещения фотогалерей в текст страниц", и в элементе добавляем наши фотографии из Медиабиблиотеки! Указываем настройки: ширина в % на странице, цвет, тип слайдера (шаблон). Значения по умолчанию редактируются в настройках нашего инфоблока, кстати. Сохраняем.
4. Почти готово. Теперь в визуальном редакторе у нас появились сниппеты! Можем добавлять в любом месте на сайте, на любой странице (статической, динамической) сниппет через визуальный редактор, или просто кодом
#MTPS_77_2343#
(числа - это ID нашего инфоблока и элемента, соответственно)
Совет №1: Не забываем почистить кэш! (Ctrl F5, вдруг кто забыл...)
Совет №2: Мы советуем не смешивать горизонтальные и вертикальные фотографии в 1 слайдере. Это и выглядит не очень красиво. Отдельно - вертикальные, отдельно - горизонтальные. Соответствующая настройка есть.