Автор створено

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