Я вже писав про те як вивести зображення із 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>
<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>
<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". Змін набагато більше. Але для відображення матеріалу, що розглядається в даній статті, застосовувалися саме такі зміни.