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

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

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

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

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

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

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

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

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

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

Комментарии

  • Avatar
    Мери Кей

    Здравствуйте. Это нормально, что когда добавляешь на страницу миниатюру с увеличением по данной инструкции, "всплывающая" PopUp-форма, ранее созданная на странице, перестает работать (кнопка начинает срабатывать как ссылка)?

  • Avatar
    Пользователь nechckina.o

    Та же самая проблема - при добавлении обоих скриптов (попап Заказать звонок и увеличение из миниатюры) работает только один. (тот скрипт, чей код оказался на странице ниже).

    Можно ли сделать так, чтобы работали оба скрипта?

  • Avatar
    Denis Kabalkin

    Скорее всего конфликт двух версий jquery.

    Удалите одно из подключений.

    Например, это: 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

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

    не работает то что тут написано!Что делать?

  • Avatar
    Александр

    Не работает! Вместо миниатюр показывает полноразмерные изображения

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

    Здравствуйте, пользователь i!

    Обратите внимание, что Вы забыли вставить первую часть кода скрипта (п.1 руководства) внутри тега .

    А также вставьте блоки миниатюр и увеличенных изображений с помощью инструмента "HTML".

  • Avatar
    Александр

    Да нет, не забыл. Непонятно почему вы так решили.

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

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

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

  • Avatar
    Пользователь m.kutuzova

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

  • Avatar
    Пользователь m.kutuzova

    в смысле координаты расположения на странице

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

    Как сделать галерею по горизонтали, а не вертикали?
    и как можно сделать слайдер из портфолио работ, как на сайте femedia.ru например? 

  • Avatar
    Администратор

    Чтобы отобразить галерею по горизонтали, нужно доработать код.

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

    Код можно заказать у JS-разработчика и/или поискать в Сети.

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

    Еще один вопрос:
    добавил скрипт увеличиния фото при клике на миниатюру.
    Позже добавил кнопку с поп-ап формой заказать звонок.
    Скрипт с фото перестал работать.

    Почему? http://pr.radugakzn.ru/ (http://pr.radugakzn.ru/) 

  • Avatar
    Олег

    Всплывающие фото могут быть не прозрачными?а то через них просвечивает текст

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

    Поменяйте порядок слоев в редакторе с помощью кнопок "Перед"/"Назад". Текстовые блоки, видимо, находятся поверх html-кода.

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

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

  • Avatar
    Пользователь muhin606
  • Avatar
    Пользователь marketer

    Подскажите как изменить размер изображения перед кликом и после него?

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

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

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

    Либо можно прописать в коде параметры width  и  height с нужными значениями.

  • Avatar
    Анатолий Павлович Секер

    Добавьте, пожалуйста, хоть самый простой лайтбокс!

    это актуально для всех пользователей системы - при клике на миниатюру открывается ни одна единственная картинка, а открывается она и есть возможность прокликать на следующую и т.д. 

    спасибо заранее!

  • Avatar
    Виктория Бурмистрова

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

    http://lpgenerator.ru/var/86976/    это страница, на которой пыталась сделать. Не работает.Помогите, что не так я сделала.

    Заранее спасибо.

  • Avatar
    Ильгиз Салихов

    Добрый день! удалаю как сказано выше  или <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">.

     

    короче если удалить один из них то большое изображение появляеться справа экрана, если оба оставить, то картинка по центру, но попуп не робит.

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

    Здравствуйте, Ильгиз!

    Возникает конфликт скриптов всплывающей формы и галереи.

    Вставьте строку 

    в второй строкой в код всплывающей формы, а из второй части скрипта галереи удалите.

  • Avatar
    Ильгиз Салихов

    Блин если правильно понял,

    то скрипт формы попап выглядит так:

     

    а скрипт галереи так:

     

     

    тогда оба скрипта не работают. Может руки кривые ?????

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

    Здравствуйте, Ильгиз!

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

  • Avatar
    Ильгиз Салихов

    Все остальное на месте, я написал только "верхушки" скриптов. Все остально в скриптах на месте как и было. И в таком виде оба скритпа не работают.

  • Avatar
    страницы не удалять пароль не менять

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

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

    я решил проблему. Я знаю как связать pop-up и увеличение по клику. Два скрипта и дело сделано.

    Перед тегом BODY

    $(function() {
    $('body').append('<div id="block-popup"></div>'); //создаем пустой popup
    $('#block-popup').append($('#block-new178').css('position', 'static')); //переносим в него форму. id будет отличаться для каждой страницы
    $('#block-popup').append($('#block-new179').css('position', 'static')); //переносим кнопку в попап
    $('#block-popup').hide(); //скрываем попап
    $('#block-new116,#block-new141,#block-new124,#block-new142,#block-new143,#block-new144,#block-new145,#block-new123,#block-new147,#block-new125,#block-new148,#block-new149,#block-new150,#block-new151,#block-new152,#block-new153,#block-new154,#block-new155,#block-new156,#block-new157,#block-new158,#block-new159 a').click(function() { //обработчик клика на кнопку. id тоже будет меняться
    $("#block-popup" ).dialog({ //инициализация диалога
    height: 345, width: 460, modal: true
    });
    return false; // не даем кнопке сработать как ссылке
    });
    })

    $(function() {
    $("img[rel]").overlay();
    });


    Внутри тега HEAD

     

    .simple_overlay {
    display:none;
    position:fixed;
    z-index:10000000;
    background-color:#333;
    /width:675px;/
    /* min-height:200px;*/
    margin: auto auto;
    border:1px solid #666;
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
    }

    /* close button positioned on upper right corner */
    .simple_overlay .close {
    background-image:url(http://jquerytools.org/media/img/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
    }
    .ui-widget-overlay, .ui-dialog{
    }


    p.s. нужны скрипты именно версии jquery 1.8.1

    p.s.s. Часть "part_2" - не нужна


    Рад помочь,

    Богдан

  • Avatar
    Пользователь Khasbiulin.a

    Вопрос.

    А как вставить 2,3 или 4 галереи?

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

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

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

На базе технологии Zendesk