TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

4

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

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

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

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

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

Включение или отключение лайтбокса в 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 отключен.

Источник записи: webnots.com
Leave A Reply

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