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

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

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

Шаг первый

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

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

задав положение «После тега <BODY>»:

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
    Эльдар

    как взять ссылку на изображение, которое находится в  в хранилище медиа-файлов ?

  • Avatar
    Анастасия

    Где взять ссылку на изображение, которое в хранилище?

  • Avatar
    Анастасия

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

  • Avatar
    Анастасия

    Только вот теперь вопрос, как добавить более 3 фото?

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

    У меня миниатюры фото получились в столбик. А как сделать в ряд?

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

    У меня миниатюры фото получились в столбик. А как сделать в ряд? [2]

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

    Только вот теперь вопрос, как добавить более 3 фото?

    добавьте "" столько сколько надо.

     

    У меня миниатюры фото получились в столбик. А как сделать в ряд?

    Растяните блок.

     

  • Avatar
    Анатолий

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

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

    Какой НУЖНЫЙ размер изображений? миниатюра и увеличенное?

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

    Почему в просмотре и миниатюра и увеличенное изображение одинаковые по размеру?

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

    Здравствуйте! У меня изображение открывается в этом же окне, а не так как у вас. вот ссылка mk-prox.ru

  • Avatar
    Марина Элькинд

    Здравствуйте! Подскажите, создала большую красивую галерею на сайте: http://apelsinextreme.ru/ng_2014_friends/
    Один вопрос, никак не допру, как сделать, чтобы фотографии можно было листать? Стрелочки вправо-влево не появляются, как у вас на образцах.
    Что я не так делаю?
    Спасибо)

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

    Здравствуйте, Марина! На указанной странице добавлена галерея без пролистывания по этому руководству: https://lpgenerator.zendesk.com/entries/23275911
    Если хотите сделать именно с пролистыванием, то замените скрипты и html-блок со ссылками, на те, что указаны в этом руководстве.

  • Avatar
    Алена Гунгер

    Здравствуйте. Почему у меня картинки после закачивания в вашу систему (в изображения) открываются по ссылке картинки РАЗМЕРОМ 100*100. ВСЕ ИЗОБРАЖЕНИЯ. Вот мой редактор: http://lpgenerator.ru/var/254974/ . Например: я закачала картинку размером 800*600, и в самом редакторе у меня появляется картинка с этим размером, но если перейти по адресу этой же картинки, то получается вот что: http://media.lpgenerator.ru/images/34856/3_2.100x100.jpg . Почему так? Я не могу нормально галерею создать. У меня в ней все картинки размером 100*100 получаются. Жду ответ.
    С уважением, Алена Гунгер.

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

    Здравствуйте, Алена! Просто удалите размер, прописанный в ссылке, тогда изображения будут открываться того размера, какого они являются на самом деле.
    Например, по ссылке http://media.lpgenerator.ru/images/34856/3_2.jpg
    Для использования изображений в галерее удаляйте указание размера в ссылке (100х100).

  • Avatar
    Алена Гунгер

    Ого, Лина, спасибо! Все получилось!

  • Avatar
    Виталий

    Добрый день!
    Прошу простить за глупый вопрос.. :)
    А как сделать так, чтобы за ОДНОЙ миниатюрой скрывалось НЕСКОЛЬКО больших изображений?
    Заранее огромное спасибо!

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

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

  • Avatar
    Анастасия

    Добрый день! Я не разобралась, как листать фотографии в увеличенной галерее? Подскажите, что я сделала не так, пожалуйста. И ещё вопрос: возможно ли сделать так, чтобы миниатюры были в один ряд и пролистывались сами?

  • Avatar
    Дмитрий

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

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

    Чтобы фотографии были в один ряд, нужно HTML блок (шаг 2) растянуть на ширину, достаточную для того, чтобы вместить все фотографии.

    Автопролистывание сделать можно. Для этого в скрипте, который Вы вставляли на шаге 3, нужно вместо jq_181('.fancybox').fancybox(); написать <script>jq_181('.fancybox').fancybox({autoPlay : true});</script>

    По любым вопросам можете обратиться по адресу support@lpgenerator.ru

  • Avatar
    Анастасия

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

  • Avatar
    Дмитрий

    Анастасия, для решения таких вопросов обратитесь по адресу support@lpgenerator.ru с указанием проблемы и страницы, на которой она появилась.

  • Avatar
    Олег Буркацкий

    Сайт, на котором располагается код закрыт, прошу перезалить код. Спасибо

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

    Здравствуйте, Олег!
    Пожалуйста, напишите нам на support@lpgenerator.ru, мы отправим Вам в письме скрипты галереи в приложении.

  • Avatar
    Михаил Савченко

    Добрый день, а можно ли сделать чтоб на целевой странице в миниатюре показывалась лишь одна фотография, которая бы сама пролистывалась и были стрелочки, но при этом можно было сохранить увеличение и перелистывание
    по типу как сделано на http://dev.landingpage.bz/moika/ или http://dev.landingpage.bz/okna/ но при этом можно было развернуть?? Спасибо за ответ. П.с. как можно ещё сделать карту ( местоположение) , чтоб можно было по ней перемещаться?

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

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

    Для этого вам нужно создать карту, например, на Яндексе с указанием Вашего местоположения: http://api.yandex.ru/maps/tools/constructor/

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

  • Avatar
    Михаил Савченко

    Спасибо, Галерея, которая реализована тут отличная, только как сделать что фото маленькие были не в ряд и не в столбик, а была одна со стрелками?

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

    Здравствуйте, Михаил!

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

  • Avatar
    Михаил Савченко

    Спасибо, действительно осталась одна фотография. извините, за беспокойство, ещё один вопрос, как сделать чтоб листать эту, уже сделанную галерею не разворачивая ( в миниатюре) прямо на целевой странице?

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

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

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