Выводим изображение и видео у Lightbox используя Widgetkit Lightbox

1 1 1 1 1 1 1 1 1 1 Рейтинг 0.00 [0 Голоса (ов)]

foto

Многие используют набор компонентов Widgetkit от Yootheme. Существует он в версии Widgetkit Lite (Free), которая бесплатная и содержит меньше возможностей и у платной. Полная версия содержит:

  • Accordion - позволяет скомпоновать материалы для вывода в статье или позиции модуля. Позволяет выводить материалы К2 и ZOO.
  • Gallery - создает галереи из ваших изображений.
  • Lightbox - позволяет выводить любой тип контента во всплывающем окне на полупрозрачном фоне.
  • Map - позволяет достаточно просто интегрировать карты Google.
  • Media Player - вставляет видео и аудио. Созданный на HTML5.
  • Slideset - позволяет выводить изображение с различными эффектами.
  • Slideshow - позволяет создать на сайте слайд-шоу с 17 различными эффектами, вступительным текстом и переходом по ссылке. Позволяет выводить материалы К2 и ZOO.
  • Spotlight - также выводит изображение с различными эффектами. По клику изображение открывается в lightbox ). Есть вариант всплывающих подсказок с переходом по ссылке.

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

Вот как выглядит компонент:

Widgetkit Lightbox 

Переходим на вкладку Lightbox и нажмите How to use ... (смотрите на скриншот выше) можно увидеть пример использования данного компонента. Кроме того, как видно можно настроить вид всплывающего окна, его позиции, цвет рамки и др. Для начала включите его поставив напротив Enable переключатель у Yes. Рассмотрим подробнее настройки:

Включить (Enable) — включает загрузку Lightbox на страницах сайта.
Название позиции (Title Position) — опция, устанавливающая положение, в котором будет отображаться название:

  • float - не будет показываться;
  • outside - расположение надписи за пределами всплывающего окна;
  • inside - внутри окна;
  • over - название находится над виджетом.

Анимация при появлении картинки (Transition In):

  • fade - открывается плавно;
  • elastic - переход происходит с эффектом приближения изображения;
  • none - без перехода. Миниатюра показывается мгновенно.

Переходный период из (Transition Out) — настройка, устанавливающая, на какой момент появления виджета будет приходиться данный период.
Показать затемнение фона (Show Overlay) — опция для включения / выключения двух следующих параметров.
Цвет затемненного фона (Overlay Color) — цвет заднего фона при открытии миниатюры.
Прозрачность фона (Overlay Opacity) — параметр, с помощью которого вы можете установить прозрачность заднего фона.
Селектор (Selector) — селектор jQuery (или CSS), с помощью которого будут выбраны теги на странице для последующей инициализации Lightbox

И так, вставим одно изображение использовав следующий код: <p style="text-align: center;"><a data-lightbox="on" href="images/CMS/Widgetkit Lightbox/foto2.JPG">
<img src="images/CMS/Widgetkit Lightbox/foto2.JPG" title="foto" alt="foto" width="450" height="" /></a>
</p>

foto

<p style="text-align: center;"> - выравнивает изображение по центру

data-lightbox="on" - включение эффекта lightbox

a href="images/CMS/Widgetkit Lightbox/foto2.JPG" - путь до полного размера изображения (у вас будет другой)

img src="images/CMS/Widgetkit Lightbox/foto2.JPG" - путь до миниатюры изображения (у вас будет другой)

title="foto" - заголовок изображения, будет отображен при наведении мыши на изображение

alt="foto" - альтернативный текст, который будет отображен если не получится загрузить изображение

width="450" - ширина миниатюры изображения (у меня 450)

height="" - высота миниатюры изображения (я ничего не вписывал - высота подберется автоматически)

А использовав такой код вставим видео с YouTube: <p style="text-align: center;"><a data-lightbox="width:1024;height:768;"  href="https://www.youtube.com/watch?v=CIuQQQzI3zY" >
<img src="images/CMS/Widgetkit Lightbox/Termynator.jpg" title="Терминатор 5: Генезис — Русский трейлер" alt="Терминатор 5: Генезис — Русский трейлер" width="450" height="" /></a>
</p>

Терминатор 5: Генезис — Русский трейлер

a href="https://www.youtube.com/watch?v=CIuQQQzI3zY" - адрес видеоролика в YouTube

<a data-lightbox="width:1024;height:768;" - ширина и высота lightbox окна (после щелчка на картинку-миниатюру)

images/CMS/Widgetkit Lightbox/Termynator.jpg" - путь к миниатюре изображения, щелкнув на которую откроется видеоролик

А теперь вставим несколько изображений объединив их у группу (при открытии одного изображения можно сразу же перейти к другому не покидая окна lightbox):
<p style="text-align: center;"><a data-lightbox="group:foto" href="images/CMS/Widgetkit Lightbox/foto1.JPG">
<img src="images/CMS/Widgetkit Lightbox/foto1.JPG" title="foto" alt="foto" width="450" height="" /></a>
</p>
<p style="text-align: center;"><a data-lightbox="group:foto" href="images/CMS/Widgetkit Lightbox/foto2.JPG">
<img src="images/CMS/Widgetkit Lightbox/foto2.JPG" title="foto" alt="foto" width="450" height="" /></a>
</p>
<p style="text-align: center;"><a data-lightbox="group:foto" href="images/CMS/Widgetkit Lightbox/foto3.JPG">
<img src="images/CMS/Widgetkit Lightbox/foto3.JPG" title="foto" alt="foto" width="450" height="" /></a>
</p>

foto

foto

foto

data-lightbox="group:foto" - название группы изображений назвал - foto)

Благодарю за внимание! Возможно кому-то поможет в работе.

Если вы в поисках хостинга, могу порекомендовать Beget, которым сам пользуюсь (кстати, тестирование компонентов, модулей и плагинов происходит именно на нем).

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


Комментарии   

# лайтбоксAlex 22.04.2016 08:51
добавил автоплей но видео все равно не проигрывается автоматически, идет загрузка видео, появляется первый кадр, но все равно надо нажимать плей. Подскажите пожалуйста, что я не так делаю?
Ответить
# lightboxAlex 22.04.2016 07:59
Подскажите пожалуйста, как мне сделать чтобы при нажатии на превьюшку видео в лайтбокс сразу начинало проигрываться? Видео лежит на самом сайте, код у меня такой Как мне сделать autoplay?
Ответить