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

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

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

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

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

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

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

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

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

    Как сделать миниатюры больше? Они по умолчанию 100на100? И при клике увеличенное изображение остаётся таким же по размеру как и миниатюра. http://lpgenerator.ru/var/147331/ (http://lpgenerator.ru/var/147331/)

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

    Здравствуйте! Мы настоятельно рекомендуем сначала отредактировать размер изображений как для миниатюр, так и для полноформатных изображений, а уже потом добавлять ссылки на них в код галереи. На указанной странице в коде на полноформатные изображения Вы добавили ссылки с указанием размера, удалите размер, чтобы ссылки имели вид: http://media.lpgenerator.ru/images/40744/33.jpg (http://media.lpgenerator.ru/images/40744/33.jpg)

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

    Здравствуйте! Изображения загружены в галерее в редакторе. Но ссылка на них http://lpgenerator.ru/var/181964/# вот такая. как сделать чтоб она была такой какой надо? Спасибо

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

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

  • Avatar
    Эльдар Шманов

    создал, все работает, скажите, а можно убрать куда то или спрятать один из html кодов. Место лишнее занимает.????

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

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

  • Avatar
    Эльдар Шманов

    т.е. его можно уменьшить даже в размере и сместить в любое место?

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

    Для блока с ссылками на полноформатные изображения - да.

  • Avatar
    Эльдар Шманов

    я пробовал его сместить, фото перестали открываться.

    Не могла бы вы все исправить сами?

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

    Пришлите ссылку на страницу в редакторе, проверим код.

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

    Здравствуйте, Эльдар! На указанной странице есть скрипт для галереи с увеличением по клику, но также есть и html-блок с кодом для fancybox-галереи: http://awesomescreenshot.com/0421u6yd3a, определитесь, какую из галерей Вы хотите использовать. Код без корректных ссылок на изображения может вызывать ошибки. Если он не нужен, удалите его.

    HTML-блок с полноформатными изображениями можно уменьшить и сместить: http://awesomescreenshot.com/0fb1u6yw89

  • Avatar
    Эльдар Шманов

    я убрал тот ненужный скрипт и html блок. Теперь у меня в галерее открываются лишь часть фотографий. В чем проблема?

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

    Эльдар, о какой странице речь? Если о той же http://lpgenerator.ru/var/180793/ (http://lpgenerator.ru/var/180793/), то с нее Вы удалили все скрипты для галереи и все html-блоки со ссылками, поэтому на странице сейчас нет галереи.

  • Avatar
    Александр Румянцев

    Посмотрите пожалуйста у меня на странице как сделать чтобы миниатюры увеличились при клике? http://lpgenerator.ru/var/203057/ (http://lpgenerator.ru/var/203057/)

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

    Здравствуйте, Александр!  Добавьте все скрипты, как указано в руководстве, далее для каждой миниатюры добавьте ссылку на полноформатное изображение. Обратите внимание, что параметр rel="#zal1" должен быть для каждой пары изображений свой: 1,2,3 и т.д., чтобы они открывались корректно. Когда все добавите, пересохраните страницу в редакторе.

  • Avatar
    Андрей Серов

    Привет!

    Страница http://lpgenerator.ru/var/201375/

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

    Как решить этот вопрос?

    Спасибо.

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

    Здравствуйте, Андрей! Чтобы этого не происходило, выделите блоки с полноформатными изображениями и кликните по инструменту "Перед", пересохраните страницу.

  • Avatar
    Андрей Серов

    Спасибо! Заработало)

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

    У меня на странице http://testlpgenerator.ru/belyie-chasyi-na-shirokom-remne-kopiya/ тоже не работает. Показывает сразу оба изображения.

    Все скрипты вставил как было сказано.

    Что делать?

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

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

  • Avatar
    Дмитрий

    Добрый день!

    Вроде бы всё нормально встало, но почему то при увеличении первого изображения поверх него показывается миниатюра второго?
    http://lpgenerator.ru/var/214847/

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

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

  • Avatar
    Леонид Коженков

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

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

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

  • Avatar
    Анастасия

    Добрый день! Какого размера должны быть миниатюры? В каком месте кода это указано?

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

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

  • Avatar
    Сергей

    Здравствуйте Лина. Проштудировал все комментарии. Попытался править, но так и не понял что происходит.
    Посмотрите плиз http://lpgenerator.ru/var/266078/
    Проблема в том, что кликая по миниатюре не выскакивает большой формат.
    Спасибо за помощь )

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

    Здравствуйте! Все добавили верно, но случайно удалили кавычки в коде для миниатюры. Сейчас мы это исправили, галерея работает: http://awesomescreenshot.com/0b726iit05

  • Avatar
    Сергей

    Спасибо огромное ) Сто раз перепроверил и перекопировал. Как-то пропустил всё равно.