Практический online-курс

Галерея с увеличением по клику с “пролистыванием” (слайдером). Возможность добавления двух и более галерей на целевой странице

Галерея

Источник изображения

Здравствуйте, уважаемые пользователи LPgenerator!

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

Нельзя забывать о важности влияния визуальных образов на посетителя вашего лендинга — понятно, что есть люди, предпочитающие читать текстовые описания вашего оффера. Но таких всегда было, есть и будет исчезающее меньшинство – большинство же предпочтет посмотреть картинки (к тому же, на каждом слайдере можно разместить ровно одну строчку описания функции, опции или ценностного предложения). Для представления одного оффера слайд-шоу, показанное через слайдер, выглядит вполне убедительным методом воздействия на целевую аудиторию.

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

Шаг первый

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

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

скрипты

задав положение “После тега <BODY>”:

скрипты

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

сохранить

Шаг второй

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

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

html

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

заголовок

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

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

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

Примечания

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

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

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

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

Шаг третий

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

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

скрипты

задав положение “Перед тегом </BODY>”:

Скрипт

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

сохранить

Вот и все! Красивая галерея с “пролистыванием” (“слайдером”) и увеличением из миниатюры по клику готова. Посмотреть галерею в действии можно на странице.

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

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

Приятной работы!

С уважением,
служба технической поддержки LPgenerator  

23-07-2013

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".