Слайдер фотографий для размещения фотогалерей в текст страниц

Требование красивого оформления текста - это не только требование для современных сайтов, но и для SEO.

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

Мы предлагаем простое и очень удобное решение этого вопроса, крайне упрощающего жизнь контент-менеджерам и SEO-специалистам.

1.     Удобство     работы:     Слайдер фотографий интегрирован с     Инфоблоком, позволяя добавлять сразу     несколько фотографий. Это существенно     упрощает процесс, поскольку вам больше     не нужно создавать множество отдельных     элементов для одного слайдера. Всё     организовано просто и удобно.

2.     Гибкость     размещения:     Каждый элемент Инфоблока является     самостоятельным слайдером, который     можно использовать в различных частях     сайта: в товарах, новостях, описаниях     разделов или на статичных страницах.     Это обеспечивает большую гибкость в     адаптации контента.

3.     Шаблоны     и кастомизация:     В стандартной комплектации идут три     встроенных шаблона, но у вас есть     возможность добавления собственных,     что позволяет сделать слайдер уникальным     и соответствующим вашим требованиям.

4.     SEO-дружелюбие:     Мы позаботились о SEO, добавив теги Alt и     Title, что упрощает индексацию изображений     поисковыми системами.

5.     Стили:     Слайдер не конфликтует с вашими стилями,     что гарантирует безупречную интеграцию     в общий дизайн сайта. Все элементы будут     отображаться корректно и эстетично.

6.     Выбор     шаблонов:     Встроено три шаблона слайдеров: две     карусели и один с миниатюрами. Кроме     того, планируется добавление шаблона     «аккордеон», что расширяет возможности     выбора.

7.     Настройки     ширины:     Ширина области слайдера задается в     процентах, по умолчанию — 100%. Это     значение можно изменить в настройках     свойств Инфоблока, позволяя вам настроить     слайдер под любые требования.

8.     Всплывающие     фотографии:     Для шаблонов Слайдер 1 и Слайдер 3     предусмотрена всплывающая функция с     иконкой «лупы», чтобы пользователи     могли легко увеличить изображения.

9.     Информативность:     Названия и описания фотографий выводятся     динамически. Вы можете настроить цвет     текста и стрелочек «влево-вправо», а     также цвет подложки под текст. Подложка     может быть полупрозрачной, что позволяет     адаптировать вид под ваш стиль.

10.     Расположение     подложки:     Подложка с названием и описанием     фотографии прикреплена к низу, что     особенно актуально для шаблонов     «каруселей» (Слайдер 1 и Слайдер 2).

11.     Динамическое     обновление:     Важно отметить, что названия и описания     (Title и Alt) подтягиваются из Медиабиблиотеки.     Изменив их там, вы автоматически обновите     информацию на сайте.

12.     Параметры     по умолчанию:     После установки слайдера по умолчанию     установлен шаблон Слайдер 1, цвет     слайдера и текста #429AD5A6, цвет подложки     #FFFD74.

13.     Упрощение     работы с ID:     Если вам нужно использовать новый     элемент слайдера, он автоматически     появляется в сниппетах в визуальном     редакторе. Порой потребуется обновить     список новых сниппетов.

14.     Настройки после размещения слайдера в тексте:     Вы можете менять шаблон слайдера и     другие настройки, зайдя в соответствующий элемент. В публичной части     сайта всё изменится на всех страницах, где размещен этот слайдер (если он был размещен не единожды, конечно).

15. Сохранение Инфоблока:     При удалении модуля Инфоблок не исчезает,     так что вы сможете его использовать     позже, если это понадобится.

16. Работа     без jQuery:     Fancybox функционирует без использования     jQuery, что минимизирует потенциальные     конфликты в верстке.

17.     Зацикленная     прокрутка:     Прокрутка слайдеров осуществляется     по кругу. Автоматического пролистывания     с определённым интервалом нет и не     будет, так как это может раздражать     пользователей.

18.     Плавность     высоты     слайдеров:     Слайдеры 1 и 2 не будут менять высоту     при пролистывании, если выбрана настройка     «вписывать по высоте».

19.     Вывод     информации при всплытии:     При открытии фотографий также отображаются     их названия и описания, что улучшает     информативность.

Слайдер упрощает работы с изображениями и обеспечивает высокую функциональность на сайте.

Предположим, мы хотим разместить текст: один или несколько абзацев.

Далее хотим в нескольких местах разместить слайдеры фотографий.

Порядок действий:

1. Добавляем в Медиабиблиотеку раздел, подраздел и т.д. - так, как нам будет удобно группировать фотографии.

2. Сразу правим названия фотографий и описания их. Это важно, мы утащим их в слайдеры!

3. Добавляем элемент в созданном модулем инфоблоке
"Слайдер фотографий для размещения фотогалерей в текст страниц", и в элементе добавляем наши фотографии из Медиабиблиотеки! Указываем настройки: ширина в % на странице, цвет, тип слайдера (шаблон). Значения по умолчанию редактируются в настройках нашего инфоблока, кстати. Сохраняем.

4. Почти готово. Теперь в визуальном редакторе у нас появились сниппеты! Можем добавлять в любом месте на сайте, на любой странице (статической, динамической) сниппет через визуальный редактор, или просто кодом

#MTPS_77_2343#

(числа - это ID нашего инфоблока и элемента, соответственно)

Совет №1: Не забываем почистить кэш! (Ctrl F5, вдруг кто забыл...)

Совет №2: Мы советуем не смешивать горизонтальные и вертикальные фотографии в 1 слайдере. Это и выглядит не очень красиво. Отдельно - вертикальные, отдельно - горизонтальные. Соответствующая настройка есть.