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

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

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

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

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

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

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

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

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
    Пользователь tropininkirill

    Добрый день. Всё сделал как надо, только почему то когда на миниатюру нажимаю, изображение не появляется. Вот ссылка  http://testlpgenerator.ru/prokat-avto-chernogoriya/ (http://testlpgenerator.ru/prokat-avto-chernogoriya/)

     

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

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

    На указанной странице не добавлены скрипты галереи. Вставьте скрипты через инструмент "Скрипты" и пересохраните страницу в редакторе, чтобы применить все изменения.

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

    Точно! Спасибо :)

     

     

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

    как ни пробовал, всё сделал что тут предложено было и всё равно ,что-то безрезультатно. Посмотрите пожалуйста: testlpgenerator.ru/probnaya-stranitsa/

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

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

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

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

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

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

    А ещё если вы что то делали на странице, то у меняли перестали поп-ап формы работать...точнее реагирует кнопка как ссылка

  • Avatar
    Пользователь mo.5

    http://lpgenerator.ru/var/126189/ (http://lpgenerator.ru/var/126189/) не работает галерея, изображения в полном размере, ввел все по инструкции 

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

    Здравствуйте! На странице http://lpgenerator.ru/var/126189/ не вставлены скрипты: http://awesomescreenshot.com/0211jrcx61

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

  • Avatar
    Михаил

    Добрый день! Вроде, все четко настроил, но миниатюра не открывается, гляньте, плиз http://testlpgenerator.ru/kak-uluchshit-naem-personala-poshagovaya-tehnologiya-najma_1/ (http://testlpgenerator.ru/kak-uluchshit-naem-personala-poshagovaya-tehnologiya-najma_1/)

  • Avatar
    Пользователь mo.5

    http://lpgenerator.ru/var/126189/ (http://lpgenerator.ru/var/126189/) скрипты вставляю, сохраняю, но стоит обновить страницу они пропадают! разберитесь пожалуйста 

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

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

    Сейчас у Вас в коде миниатюр в параметре rel прописаны названия, а нужно указать "zal1" и т.д., как в коде для полноформатных изображений, чтобы они совпадали для каждой пары.

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

    Здравствуйте, Пользователь mo.5 (https://lpgenerator.zendesk.com/agent/#/users/434537551)! Нужно пересохранять саму страницу в редакторе, а не только скрипты. Сейчас добавили скрипты, пересохранили, все сохранилось нормально. 

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

  • Avatar
    Михаил

    Лиана здравствуйте, параметры в rel были изменены на "zal1" и т.д. , но ничего не изменилось. Хотелось бы узнать, почему не работает. Заранее спасибо. С уважением, Михаил. Вот ссылка:  http://testlpgenerator.ru/podbor-personala-poshagovaya-tehnologiya-najma/  (http://testlpgenerator.ru/podbor-personala-poshagovaya-tehnologiya-najma/)

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

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

  • Avatar
    Михаил

    Лиана и снова здравствуйте, добавил ссылки для всех полноформатных изображений, но ничего по прежнему не изменилось. Какие еще можно попробовать варианты? Вот ссылка:  http://testlpgenerator.ru/podbor-personala-poshagovaya-tehnologiya-najma/  (http://testlpgenerator.ru/podbor-personala-poshagovaya-tehnologiya-najma/)

  • Avatar
    Тимофей Сергиенко

    Добрый день!

    Не могу никак справиться. Делаю все по инструкции - почему-то ничего не выходит.

    Гляньте страницу http://lpgenerator.ru/var/94496/

    Миниатюры даже не подгружаются(((

    Буду очень признателен за помощь!

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

    Здравствуйте, Тимофей!

    1. Нужно добавить и сохранить на странице скрипты галереи. Чтобы скрипты сохранились, нужно не только нажать "Сохранить" в окне скриптов, но и пересохранить саму страницу в редакторе.

    2. Обратите внимание на ссылки изображений. Ссылки вида http://files.mail.ru/49D44F7DBEEF4137B56E0F78B551C0BC?t=1 (http://files.mail.ru/49D44F7DBEEF4137B56E0F78B551C0BC?t=1) не ведут на само изображение, они ведут на страницу. В код нужно добавлять ссылку на само изображение, так чтобы при проверке в окне браузера по этой ссылке открывалось только одно изображение. Ссылка должна иметь вид: http://URL Изображения.jpg (формат может быть разный). 

  • Avatar
    Тимофей Сергиенко

    Лина, спасибо, справился с этой проблемой!

    Однако сейчас другая - при введенных из инструкции скриптов и кода html, на страницу выводятся оба изображения (мини и макси) и при клике на мини - увеличенное изображение не показывается ! Подскажите решение! Заранее спасибо!

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

    Здравствуйте, Тимофей! На странице http://lpgenerator.ru/var/94496/ по прежнему нет скриптов для галереи, ссылки на изображения не ведут на само изображение. Видимо, Вы загрузили изображения на хостинг, но при попытке открыть ссылку https://coot.arvixe.com:2083/viewer/home%2fsvadba27%2fpublic_ftp/%D0%B8%D0%BD%D1%82%D0%B5%D0%BAmini.png (https://coot.arvixe.com:2083/viewer/home%2fsvadba27%2fpublic_ftp/%D0%B8%D0%BD%D1%82%D0%B5%D0%BAmini.png) требуется авторизация на cPanel.

    Если добавляли галерею на другой странице, укажите на какой.

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

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

    Здравствуйте! Сделал всё как нужно

    Но у меня почему-то открываются сразу оба html с изображениями: и маленький размер и те, что должны открываться при нажатии

    Помогите, пожалуйста!
    http://lpgenerator.ru/var/145624/ (http://lpgenerator.ru/var/145624/)

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

    Здравствуйте! На странице http://lpgenerator.ru/var/145624/ (http://lpgenerator.ru/var/145624/) нет скриптов для галереи. Добавьте скрипты, как это указано в руководстве, и пересохраните саму страницу в редакторе.

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

    Может быть я что-то неправильно делаю?

    я копирую с рис.1 в рис.2

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

    Все верно делаете. Только после этого еще саму страницу пересохранить нужно, чтобы скрипты сохранились на странице, тогда галерея будет работать.

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

    сделал, всё равно не работает(

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

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

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

    вышел

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

    Добавили скрипты. Галерея работает корректно: http://awesomescreenshot.com/0601o6d51a

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

    СПАСИБО БОЛЬШОЕ!!!)
    А что не так было со скриптами? я не те добавлял или...?