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

Виджет "Галерея" — слайдер изображений с увеличением

Здравствуйте, уважаемые пользователи!

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

Сегодня мы представляем вам обновление платформы LPgenerator, которое все так долго ждали. Встречайте — новый виджет визуального редактора целевых страниц «Галерея изображений»!

Галерея предоставляет следующие возможности:

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

Пример галереи вы можете посмотреть здесь.

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

галерея

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

Вкладка виджета «Разметка»

виджет

1. Количество картинок. Укажите количество изображений, одновременно находящихся на одном слайде.

2. Ширина и высота картинки. Укажите размеры изображений.

3. Отступ между картинками и Отступ межу стрелкой и картинкой. Укажите соответствующие отступы между элементами галереи.

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

4. Изображение. Выберите сами изображения. Щелкните по полю для открытия окна выбора изображения.

5. Приближение. Щелкните по строке «Приближение» для открытия окна выбора изображения, которое будет появляться при щелчке по картинке.

6. Добавление/удаление слайдов. Щелкните по кнопке «+» для добавления слайда, по кнопке «‒» для удаления.

7. Переключатель слайдов. Переключает слайды в соответствии с их номерами.

Вкладка виджета «Стили»

Вкладка виджета Стили

1. Цвет фона. Щелкните по полю для вывода окна выбора цвета фона.

2. Стрелка назад/вперед. Щелкните по строке «Выбрать из галереи» для выбора соответствующих изображений стрелок.

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

4. Стиль границы. Укажите стиль границы (сплошная, пунктирная, точечная) и ее цвет.

После внесения всех необходимых изменений нажмите кнопку «Сохранить». Галерея появится на странице.

Также функционал галереи включает параметр «Автопрокрутка», отвечающий за автоматическое пролистывание слайдов через определенный промежуток времени. Задать его можно в свойствах галереи в правой панели редактора. Время указывается в секундах.

Автопрокрутка

На этом настройка галереи закончена. По всем вопросам пишите на support@lpgenerator.ru, будем рады помочь.

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

Комментарии

  • Avatar
    Талгат Толебаев

    а как сделать автопрокрутку на слайде ?

  • Avatar
    Максим Гуйван

    Здравствуйте, Талгат!

    За включение автоматической прокрутки отвечает параметр в настройках галереи, в правой части редактора страницы - он отмечен на скриншоте:
    http://prntscr.com/3hln85

    Введите желаемый интервал пролистывания слайдов и сохраните страницу.

    По всем вопросам, связанным с работой сервиса, обращайтесь в службу поддержки: support@lpgenerator.ru

  • Avatar
    Талгат Толебаев

    Максим, я имел ввиду авто прокрутку слайда отзывов. как сделать ? Спасибо )

  • Avatar
    Максим Гуйван

    Виджет "слайдер отзывов" не предусматривает автоматическую прокрутку в текущей реализации.
    Вы можете воспользоваться инструкцией по созданию слайдера отзывов, доступной по этой ссылке:

    http://lpgenerator.ru/blog/2013/11/26/kak-sdelat-slajder-otzyvov-na-celevoj-stranice/

    Этот скриптовый слайдер можно немного изменить и активировать автопрокрутку слайдов - по Вашему обращению в службу поддержки мы подскажем, как это сделать.

  • Avatar
    Иван

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

  • Avatar
    Иван

    возможно ли увеличивать картинки с слайдера при нажатии не нее?

  • Avatar
    Максим Гуйван

    Здравствуйте, Иван!

    1. Виджет слайдера поддерживает прокрутку только в таком режиме, с возвратом к первому слайду. Если необходимо иное поведение - лучше использовать слайдер, созданный при помощи скрипта, описанный в статье по ссылке:
      http://lpgenerator.ru/blog/2013/02/26/kak-sdelat-slajder-slajd-shou-galereyu-na-celevyh-stranicah/

    2. Виджет "галерея" можно настроить для увеличения слайдов при нажатии на изображение. Для этого под каждым слайдом есть ссылка "Приближение" - нажав на эту ссылку вы сможете выбрать увеличенное изображение, которое будет появляться при нажатии на слайд.

  • Avatar
    Шакир

    Здравствуйте. Скажите, как увеличить высоту картинки, ее размер, чтобы было больше 200?

  • Avatar
    Дмитрий

    Здравствуйте! Просто введите необходимое значение в соответствующее поле.

  • Avatar
    Филипп Андронов

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

  • Avatar
    Максим Гуйван

    Здравствуйте, Филипп!

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

  • Avatar
    Дмитрий

    Добрый день.

    А как сделать фон изображения(стандартный фон картинки - белый) такого же цвета, что и фон страницы?

    Или точнее сказать - как убрать фон у своего изображения? (как в пеинте)

  • Avatar
    Максим Гуйван

    Здравствуйте, Дмитрий!

    Не вполне ясен вопрос. Вы хотите сделать прозрачным фон вашего изображения? Тогда вам нужно использовать изображение формата PNG с прозрачностью, а редактировать его в графическом редакторе(Paint.NET, Photoshop) - и в готовом виде загружать в редактор страниц.

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

    Если же речь о чём-то другом - уточните вашу мысль, пожалуйста.

  • Avatar
    Дмитрий

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

    Я добавляю картинку с белым фоном. А я хочу чтобы цветы её фона был одинаковым с фоном страницы. Чтобы она не была бельмом.

  • Avatar
    Максим Гуйван

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

  • Avatar
    Райымбек

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

  • Avatar
    Максим Гуйван

    Здравствуйте, Райымбек!

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

    Ориентируйтесь на скриншот: http://media.lpgenerator.ru/uploads/2014/04/28/image00.jpg - значения высоты и ширины можно указывать напрямую, цифрами, главное - не превышать разумных пределов, например, не выше 600 пикселей и не шире 900 пикселей на изображение.

  • Avatar
    Никита Мерзляков

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

  • Avatar
    Максим Гуйван

    Здравствуйте, Никита!

    Для любого изображения можно задать ссылку, которая будет срабатывать при нажатии на это изображение - просто задайте адрес в поле URL в блоке свойств изображения.
    Ориентируйтесь на скриншот: http://take.ms/jjM6X

    Если это не решает задачу - пишите нам на support@lpgenerator.ru - обязательно найдём варианты.

  • Avatar
    Роман

    Здравствуйте.Можно ли разместить картинки в ряды?Чтобы было несколько рядов в каждом по несколько картинок?

  • Avatar
    Константин Руденок

    Здравствуйте, Роман!

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

  • Avatar
    Иван

    Здравствуйте! как увеличить максимальное количество картинок в виджете? по умолчанию 10 картинок.

  • Avatar
    Максим Гуйван

    Здравствуйте, Иван!

    Виджет "галерея" рассчитан на 10 изображений - это обусловлено тем, что бОльшее количество изображений обычно излишне и негативно сказывается на скорости загрузки страницы.

    Вариантов решения два:
    1 - использовать несколько виджетов "галерея" - в каждом размещая по 10 изображений.
    2 - использовать скриптовое решение для галереи, например, описанное в руководстве по ссылке:
    https://lpgenerator.ru/blog/2013/07/23/galereya-s-uvelicheniem-po-kliku-s-prolistyvaniem-slajderom-vozmozhnost-dobavleniya-dvuh-i-bolee-galerej-na-celevoj-stranice/

    Либо, если ни один из этих вариантов не подходит, пишите нам в службу поддержки support@lpgenerator.ru - найдём варианты!

  • Avatar
    Николай

    Здравствуйте! Как можно убрать стрелки "влево" и "вправо" ?

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

    Здравствуйте, Николай!
    Стрелки галереи появляются автоматически, если вы указываете более одного слайда, чтобы посетитель мог понять, что в галерее есть еще фото. Вы можете указывать только один слайд, до 5 фото в нем: http://awesomescreenshot.com/0274p76ree
    Также вы можете самостоятельно указать для отображения стрелок изображение, в том числе прозрачное: http://awesomescreenshot.com/01e4p75i14
    В этом случае, стрелки просто не будут видны.

  • Avatar
    Елизавет

    Здравствуйте!
    У меня в галерее картинки разной высоты и ширины. При этом мне хотелось бы, чтобы расстояние зрительно было между ними одинаковое. А выставляя значение на ползунке "Отступ между картинками", этого добиться не могу.

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

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

    Отступ, который выставляется в настройках галереи устанавливает равное расстояние между изображениями. Значение можно задать ползунком или прописать вручную - http://prntscr.com/7h4few
    Если равное расстояние не получилось установить, напишите нам по адресу support@lpgenerator.ru Посмотрим в чем может быть проблема.

  • Avatar
    Богдан

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

  • Avatar
    Максим Гуйван

    Здравствуйте, Богдан!

    Спасибо за предложение, подумаем, как это можно реализовать. Пока же, если подписи к слайдам нужны - обратитесь в нашу службу поддержки по почте support@lpgenerator.ru - попробуем предложить варианты решения, например, через скрипт.

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