Я уже писал о том как вывести изображение с 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". Изменений гораздо больше. Но для отображения материала, что рассматривается в данной статье, применялись именно такие изменения.