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

Галерея изображений с увеличением из миниатюры по клику

Галерея изображений с увеличением из миниатюры по клику

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

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

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

Наглядный пример предложенной галереи вы можете просмотреть и протестировать здесь.

Как сделать галерею с увеличением по клику?

1. Скопируйте код отсюда (Part_1) и вставьте его через инструмент “Скрипты” внутри тега <HEAD>.

2. Скопируйте код отсюда (Part_2) и вставьте его через инструмент “Скрипты” перед тегом </BODY>.

3. Через инструмент “Произвольный HTML” вставляем блок миниатюр, скопировав код отсюда (Part_3).

Внимание! Вместо http://URLизображения/1.png (и прочих) нужно указать ссылки на изображения, которые должны отображаться в галерее!

4. Через инструмент “Произвольный HTML” вставляем блок полноформатных изображений, скопировав код отсюда (Part_4).

Внимание! Вместо http://URLизображения/1.png (и прочих) нужно указать ссылки на изображения, которые должны отображаться в галерее!

Количество изображений может быть разным. Все изображения должны размещаться либо на собственном хостинге, либо в каком-то файловом хранилище, к которому есть доступ через Глобальную Сеть.

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

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

Комментарии

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

    Вы просто не сохраняли саму страницу: "Сохранить" в меню редактора слева.

  • Avatar
    Михаил

    при добавлении галерии поп-ап форма не работает. вышеописанные методы не смог реализовать либо не работают. как исправить?

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

    Здравствуйте, Михаил! Пришлите ссылку на редактор страницы, где Вы добавили все необходимые скрипты для галереи и pop up`а. Проверим код.

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

    Здравствуйте, Михаил! Конфликт скриптов на указанной странице устранен. 

  • Avatar
    Никита

    Как делать миниатюры, открывающиеся во всплывающем окне я понял. У меня другая ситуация, нужно чтобы одно и то же изображение открывалось и по клику на миниатюру и по клику по текстовой ссылке. Какой вид должна иметь ссылка, чтобы по клике на нее у меня открылась во всплывающем окне картинка?

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

    Здравствуйте, Никита! К сожалению, по текстовой ссылке нельзя настроить открытие изображения во всплывающем окне. Вы можете настроить ссылку, так чтобы изображение открывалось в новой вкладке браузера. Ссылка должна иметь вид  http://URLизображения/1.png (http://xn--url-8cdezgfif8ch1a9s/1.png)

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

    Здравствуйте! Вставил все скрипты по инструкции но ничего не работает. Посмотрите пожалуйста, и скажите что делать.  Желательно по проще (для чайников) Нужно чтоб увеличивались благодарственные письма и сертификаты. Спасибо!

  • Avatar
    Пользователь tesevraz
  • Avatar
    Елена

    Здравствуйте, у меня не получается вставить, галерею. При сохранении формат изображений совсем маленький, фото не открываются!Подскажите что и где исправить?

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

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

    Пользователь tesevraz (https://lpgenerator.zendesk.com/users/482001096), ссылки на изображения должны быть действующими. Загрузите изображения в любой общедоступный альбом или через галерею, но ссылки должны иметь вид: http://media.lpgenerator.ru/images/18140/tihij-okean.jpg (http://media.lpgenerator.ru/images/18140/tihij-okean.jpg)  Также обращаем внимание, что ссылки должны быть указаны для всех пар изображений, чтобы скрипт работал корректно.

    Елена (https://lpgenerator.zendesk.com/users/469317177), настоятельно рекомендуем сначала отредактировать размер изображений, как для миниатюр, так и для полноформатных, а только потом вставлять ссылки на них в скрипт. Чтобы мы могли проверить работу скрипта, пришлите ссылку на страницу в редакторе.

     

  • Avatar
    Василий Суймин

    Лина здравствуйте!

    Никак не могу разобраться в чем проблема,

    вот вариант страницы, popap формы работают некорректно, не могу понять в чем ошибка,помогите разобраться

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

    Здравствуйте, Василий! На указанной странице нет самих всплывающих форм, id которых указаны в скриптах. Создайте формы с помощью инструмента "Форма" и вставьте их id в скрипт. Сейчас скрипт настроен,  но поскольку самой формы нет, то при нажатии на кнопку "Заказать звонок" появляется только пустая рамка: http://awesomescreenshot.com/0241r8znfc

    Далее на этой же странице у Вас есть две формы, которые созданы как изображение, поэтому работать они не будут: http://awesomescreenshot.com/0cd1r8zo39  Если хотите, чтобы на странице были дополнительные формы, создайте их с помощью инструмента "Форма".

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

    Добрый день! Поменял ссылки в HTML появились маленькие иконки, при нажатии на них появляются так же маленькие иконки в другом месте, что то не так сделал наверно, не могу разобраться. Посмотрите пожалуйста. http://lpgenerator.ru/var/181964/ (http://lpgenerator.ru/var/181964/) Спасибо!

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

    Здравствуйте! Ссылка на изображения должна иметь только один префикс http: http://awesomescreenshot.com/0c61rch039 и по ней должно открываться только само изображение, ее вид должен быть http://URLизображения/1.png (http://xn--url-8cdezgfif8ch1a9s/1.png)   Проверить можно, вставив ссылку в адресную строку браузера, если по ней открывается только само изображение, значит все верно.

  • Avatar
    Василий Суймин

    Лина вечер добрый прописал заново скрипт на формы, но результат так и не изменился http://lpgenerator.ru/var/187247/ (http://lpgenerator.ru/var/187247/)

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

    Здравствуйте, Василий! все верно настроили. только старый скрипт нужно было удалить. Сейчас форма открывается корректно: http://awesomescreenshot.com/05c1rdbb36

  • Avatar
    Василий Суймин

    странно, у меня окно не подгружается http://awesomescreenshot.com/02a1rdfsf8

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

    Выйдите их редактора этой страницы, пожалуйста.

  • Avatar
    Василий Суймин

    вышел

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

    Пересохранили страницу с нужными изменениями, теперь окно будет открываться нормально. Если захотите изменить его внешний вид, подключите тему отсюда: http://jqueryui.com/themeroller/ Достаточно просто заменить название темы в коде скрипта и пересохранить страницу: http://awesomescreenshot.com/0f71qkgz78

  • Avatar
    Василий Суймин

    Лина, форма открылась, после её заполнения и нажатия кнопки "отправить" вылезает белое окно, его можно как то убрать?

    Если возможно, то прошу восстановить функционал и этих страниц,на них наблюдается таже проблема:

    http://lpgenerator.ru/var/172965/ (http://lpgenerator.ru/var/172965/)

    http://lpgenerator.ru/var/155713/ (http://lpgenerator.ru/var/155713/)

  • Avatar
    Василий Суймин

    скрин белого окна http://awesomescreenshot.com/0dd1rdq04a

  • Avatar
    Лина Малькова
    1. Чтобы не появлялось белое окно, настройте результат формы в меню справа. Для всплывающей формы лучше сделать переход на страницу благодарности: http://awesomescreenshot.com/05d1rdrvb0

    На указанных страницах удалите старые скрипты: http://awesomescreenshot.com/0b21rds130  и внимательно настройте скрипт всплывающей формы по руководству. Для применения изменений пересохраняйте страницы.

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

    Круто! А как сделать или где скопировать ссылку чтоб она была с одним префиксом?

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

    Здравствуйте! Откройте изображение в новой вкладке браузера и скопируйте его URL из адресной строки.

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

    Здравствуйте! В новой вкладке открывается редактор лпгенератора. Что делать?

     

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

    То что я хочу увеличить при нажатии этого нет в инете, есть только у меня в компьютере.

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

    Чтобы можно было получить ссылку на изображение, его нужно загрузить, например, в любой альбом с общим доступом в Вконтакте или Яндекс.фотках, или через галерею в редакторе. Только тогда Вы сможете получить ссылку, которую нужно вставить в код.