База знаний
по возможностям платформы

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

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

Шаг первый

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

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

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

pop.png

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

Шаг второй

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

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

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

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

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

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

Примечания

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

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

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

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

Шаг третий

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

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

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

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

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

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

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

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

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

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 5 из 6
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Пользователь fears

    Алена, добрый день.

    "Михаил, отправили Вам пример похожей реализации по почте."

    Не могли бы Вы мне тоже отправить пример: интересует такой же вопрос

  • Avatar
    Лина Малькова

    Здравствуйте! Ответ отправлен по почте.

  • Avatar
    Пользователь agalakoff.ilya

    Здравствуйте.
    Хотел попробовать сделать галерею. Но по ссылка на код натыкаюсь на заблокированный сайт. Может есть другая ссылка? Или это у меня затуп.
    Спасибо.

  • Avatar
    Алена Балакина

    Здравствуйте!

    Все ссылки с кодом, размещенные на ресурсе pastebin.com сейчас доступны.

    Если у Вас все таки не получается зайти, отправьте обращение в техническую поддержку по адресу: support@lpgenerator.ru
    Вышлем коды для галереи на Вашу почту.

  • Avatar
    Пользователь agalakoff.ilya

    Спасибо.
    Запрос отправил.
    Вот что мне выдаёт.
    Доступ к сайту ограничен в соответствии с Федеральными законами №114-ФЗ от 25.07.2002 (О противодействии экстремистской деятельности), №436-ФЗ от 29.12.2010 (О защите детей от информации, причиняющей вред их здоровью и развитию), №149-ФЗ от 27.07.2006 (Об информации, информационных технологиях и о защите информации) и Постановлением Правительства РФ от 26.10.2012 №1101.

  • Avatar
    Борис Колосов

    Необходимые скрипты и описания будут высланы на почту. Успешной работы, Илья!

  • Avatar
    Пользователь agalakoff.ilya

    Спасибо.
    Всё получилась.

  • Avatar
    Анна

    Не могли бы вы и мне прислать пример похожей реализации с пролистыванием миниатюр?

  • Avatar
    Максим Гуйван

    Здравствуйте, Анна!

    Пример альтернативного слайдера изображений мы выслали вам письмом, проверьте Ваш e-mail, пожалуйста.

    Если понадобятся уточнения или комментарии по реализации - пишите на адрес службы технической поддержки support@lpgenerator.ru. Приятного дня!

  • Avatar
    Сергей Шостак

    Здравствуйте Уважаемые работники! Скажите пожалуйста, я хочу в один слайд добавить 8-15 фотографий, можно ли сделать так, чтобы миниатюры были видны только 1 фото или 2-3, а не все 8-15 фотографий, а при нажатии и увеличении фото, открывался слайд и пролистывались все 15 фотографий?
    Например на сайте видно только одно фото, а при нажатии на него открывается слайд и можно пролистать еще 15 фото. Заранее спасибо!

  • Avatar
    Лина Малькова

    Здравствуйте, Сергей!
    Для этого необходимо заменить HTML код (тот, что добавили во втором шаге) на код, размещенный здесь: http://pastebin.com/J1FbJk1S

  • Avatar
    Сергей Омигов

    Добрый день. Подскажите пожалуйста, как сделать, чтобы между миниатюрами не было промежутка? Сейчас пару миллиметров.

  • Avatar
    Максим Гуйван

    Здравствуйте, Сергей!

    Самый простой способ избавиться от промежутков между миниатюрами — это использовать настройки виджета "Галерея", а именно указать нулевой отступ между изображениями, как это показано на скриншоте по ссылке:
    http://joxi.ru/7-mlU_3JTJAYY7_tHTA

    Альтернативные методы потребуют работы со скриптами и переопределением стилей для галереи, что требует некоторых знаний и навыков в HTML/CSS. Напишите в нашу службу поддержки support@lpgenerator.ru и мы подыщем решение для этой задачи.

  • Avatar
    Александр

    Добрый день! Четыре вопроса:
    1. Как сделать чтобы миниатюры были немного крупнее.
    2. Как отрегулировать расстояние между миниатюрами (необходимо увеличить).
    3. Как сделать чтобы при нажатии на миниатюру открывающееся изображение было немного больше(картинки залиты в галерею большого размера, а открывает не очень большого размера, там планы квартир и их плохо видно).
    4. Как сделать чтобы при пролистывании увеличенных изображений, на последнем изображении не появлялась стрелочка "вправо", чтобы человек мог понять что он дошел до конца просмотра (там планы квартир, они все похожи, после окончания просмотра галерея начинает показ сначала, а человек не понимает что он смотрит одно и тоже несколько кругов).
    Спасибо!

  • Avatar
    Алена Балакина

    Здравствуйте, Александр!

    1) Миниатюры подгружаются с помощью ссылок. То есть Вам нужно загрузить более крупное изображение и получить на него ссылку. Как это сделать читайте здесь

    2) В данной реализации проблематично проставить отступы, но это очень легко можно сделать с помощью виджета

    3) Аналогично первому пункту, нужно получить ссылку на большее изображение и вставить ссылку в HTML код

    4) По умолчанию, пролистывание зациклено. Самое простое решение - создать промежуточный слайд в конце, на котором будет написано что то вроде "Конец просмотра.." или "это последний слайд.."

    5) Вы можете более быстро и удобно создавать галереи и выполнять все вышеописанные настройки с помощью готового виджета

    6) Также, возможно Вам подойдет такая разновидность слайдера

  • Avatar
    Вадим

    Покажите как это выглядит!

  • Avatar
    Максим Гуйван

    Здравствуйте, Вадим!

    Действующий пример галереи доступен по ссылке:
    http://testlpgenerator.ru/galereya_s_uvelicheniem/

  • Avatar
    Алексей Дума

    Здравствуйте!
    как в этой галереи сделать авто пролистывание??

  • Avatar
    Максим Гуйван

    Здравствуйте, Алексей!

    В этом скрипте прокрутка не предусмотрена, и сделать её невозможно. А чем плох виджет "галерея" - встроенный в редактор инструмент для галерей с функцией прокрутки и автолистания?