Что такое лайтбокс и как его использовать в Weebly?

Что такое лайтбокс?

Лайтбоксы – это всплывающее окно, на которое отображается исходный размер изображения или видео при нажатии на него. Первоначально в этой технике наложения изображений использовался JavaScript, а позже был представлен jQuery для улучшения пользовательского интерфейса. Когда изображение отображается в наложенном окне, пользователь по-прежнему сможет использовать функции клавиатуры, такие как стрелки вверх / вниз и табуляция, для навигации по странице, не закрывая всплывающее окно. Внешняя область на странице затемнена, и щелчок за пределами лайтбокса закрывает всплывающее окно.

Ниже приведен пример изображения в виде лайтбокса:

Изображение в лайтбоксе

Включение или отключение лайтбокса в Weebly

Weebly позволяет добавлять к изображениям эффект лайтбокса с помощью двух элементов:

  • Элемент изображения – вы можете добавить эффект лайтбокса к одному изображению.
  • Элемент галереи – вы можете добавить эффект лайтбокса в галерею изображений.

Добавление лайтбокса к одному изображению

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

Вариант лайтбокса Weebly для изображения
Вариант лайтбокса Weebly для изображения

Вы можете включить или отключить лайтбокс с помощью опции «Лайтбоксы».

Использование лайтбокса в галерее

Как и в случае с одним изображением, добавьте элемент галереи и загрузите все свои изображения. Щелкните любое изображение, чтобы увидеть дополнительные настройки, и вы можете включить лайтбокс в разделе «Миниатюра». У элемента галереи есть три варианта лайтбокса:

  • Только лайтбокс
  • Лайтбоксы и частичные эскизы
  • Лайтбоксы и полные миниатюры
Эффекты лайтбокса в элементе галереи Weebly
Эффекты лайтбокса в элементе галереи Weebly

Когда включать лайтбокс?

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

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

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

Как работает Weebly Lightbox?

Weebly использует сторонний скрипт jQuery fancybox от fancyapps.com чтобы предложить функцию лайтбокса. Вы можете настроить эффект лайтбокса, прочитав раздел советов и хитростей на сайте fancyapps. Если вам не нравится стандартный эффект лайтбокса Weebly, вы можете использовать любые другие плагины JavaScript или jQuery для добавления эффекта лайтбокса к вашим изображениям. Некоторые плагины также отображают все изображения на странице в виде всплывающего слайд-шоу.

Недостатки использования лайтбокса

Хотя эффект лайтбокса выглядит неплохо, у него есть много недостатков.

  • Поскольку для создания необычного эффекта используется скрипт jQuery, использование лайтбокса увеличит время загрузки страницы, поэтому используйте его только в случае необходимости.
  • Поскольку исходное изображение нельзя просмотреть в окне браузера, единственный способ скопировать URL-адрес изображения – это щелкнуть изображение правой кнопкой мыши и скопировать URL-адрес.
  • Функция не будет работать, если в веб-браузере отключен JavaScript. Полноразмерные изображения открываются в окне браузера, когда JavaScript отключен.

2

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *