Скрипт галереи с увеличением по клику и с “пролистыванием” (слайдером)

Последние изменения: 05.04.2022

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

Шаг первый

1. Копируем код, размещенный здесь.

2. Вставляем его через инструмент «Скрипты» в основном меню редактора,

3d84bc5f1e18f8713d028542cd776c6b.png

задав положение «Внутри тега HEAD»:

pop.png

3. Сохраняем изменения:

a20e832f3813a9b4438625e2abf4bb17.png

Шаг второй

1. Копируем код, размещенный здесь.

2. Вставляем его с помощью инструмента «Произвольный HTML».

66fe9e1e5e70796a609325535971a04f.png

3. Редактируем ссылки на увеличенные изображения и миниатюры и названия изображений (“Заголовок”):

e786f740dead25e1701de93e4b7e3488.png

Изображения вы можете разместить у себя на хостинге, в облачном хранилище или загрузить через редактор в хранилище медиа-файлов LPgenerator через инструмент “Изображение”.

1cf4ec4e6f4e69e80c54040e991389e5.png

Настоятельно рекомендуем загружать изображения нужного размера!

4. Сохраняем изменения.

Примечания

1. Если изображение в галерее будет единственным, то атрибут rel=”gallery1” следует удалить.

2. Заголовок будет отображаться под всплывающим окном. Если он не не требуется, удалите из кода атрибут title=”Заголовок”.

3. Если требуется разместить 2 и более галерей на одной странице, то для них используйте “gallery2”, “gallery3” и т. д.:

в исходном коде замените значение атрибута rel="gallery1"на rel="gallery2" и т. д., в зависимости от числа создаваемых галерей.

Шаг третий

1. Копируем код, размещенный здесь.

2. Выбираем инструмент «Скрипты» в основном меню редактора

14c204306291c3915785148d19dae3d0.png

и нажимаем на кнопку «Добавить скрипт».

3a074fef564e19cd15da9a871487fea6.png

3. Вставляем код, задав положение «Перед тегом </BODY>».

12b57e99a2cca24e72e996276aee68c8.png

4. Сохраняем изменения:

556d9a7b03ad6285429b5f4a655ebf42.png

Вот и все! Красивая галерея с «пролистыванием» («слайдером») и увеличением из миниатюры по клику готова.

Обратите внимание: если изображения не выстраиваются в один ряд, просто увеличьте размер HTML заглушки. Он должен соответствовать ширине одного ряда изображений и высоте этих изображений. 

Желательно подбирать одинаковые по размеру картинки как для миниатюр так и увеличенных просмотров.

На этом всё. Также мы будем рады ответить на любые ваши вопросы, адресованные на адрес support@lpgenerator.ru.

Высоких Вам конверсий!

С уважением,
команда LPgenerator

Помогла ли вам статья?