Як вивести зображення та відео у Lightbox використовуючи Widgetkit версії 2 та вище?

foto

Я вже писав про те як вивести зображення із Lightbox ефектом. Починаючи із версії 2 Widgetkit змінив своє меню, а також трішки змінився код для Lightbox ефекту. Тому я не буду заново розписувати все про цей компонент. Ви можете про нього в більш повній мірі почитати в попередній статті. 

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

foto

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

a data-uk-lightbox="on"  - увімкнення ефекту lightbox

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-uk-lightbox="on" href="https://www.youtube.com/watch?v=CIuQQQzI3zY" >
<img src="images/CMS/Widgetkit Lightbox/Termynator.jpg" width="450" height="" title="Терминатор 5: Генезис — Русский трейлер" alt="Терминатор 5: Генезис — Русский трейлер"/></a>
</p>

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

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

a data-uk-lightbox="on" - увімкнення ефекту lightbox

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

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

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

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

title="Терминатор 5: Генезис — Русский трейлер" - заголовок зображення, що буде відображений при наведенні мишки на зображення

alt="Терминатор 5: Генезис — Русский трейлер" - альтернативний текст, що буде відображений якщо не вийде завантажити зображення

Ширина та висота відеоролика при перегляді підбереться автоматично, відповідно до розширення екрану з якого відбувається перегляд.

Зверніть увагу! Код, що написаний вище, буде правильно працювати при використанні Widgetkit 2+. Зображення із прикладом Lightbox ефекту на даній сторінці збільшуються із використанням Widgetkit 1.5 (саме дана версія встановлена на сайті). Різниця в коді для простого використання лише у: a data-uk-lightbox="on". У старій версії це був код: a data-lightbox="on". Змін набагато більше. Але для відображення матеріалу, що розглядається в даній статті, застосовувалися саме такі зміни.

© 2020-z-soft