Скрипт для просмотра изображений сайта в ulightbox

О чем материал ?

В данной статье рассмотрим решение, которое позволит автоматизировать возможность просматривать фото сайта в окне ulightbox и возможностью переключения кнопками вправо и влево. 

Для решения будем использовать небольшой скрипт на java script, который позволит автоматизировать рутинную работу администратора сайта. В большей части это решение для статей сайта в которых фото вставлялось просто тегом:

<img src="ссылка на фото">

то есть фото не заворачивалось в блок с ссылкой: 

<a href="ссылка на фото">здесь <img src=""></a>

Текущая статья именно для таких фото, мы скриптом для них на автоматике сформируем блок с ссылкой и добавим атрибуты ulightbox для открытия фото в всплывающем окне с опциями переключения влево и вправо.

Как установить скрипт просмотра изображений в Ulightbox ?

Для установки достаточно перейти в шаблон Страницы материала и комментариев модуля, в котором в хотите установить этот скрипт, далее перед тегом </body> установить такой скрипт:

<script type="text/javascript">
$('.eMessage img,.eText img') each(function() {
$(this).wrap("<a href='" + this.src + "'/>");
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').addClass('ulightbox').attr("data-fancybox-group", "ultbx");
});
 </script>

Данный скрипт подходит для большинства модулей:

• Блог
• Новости
• Каталог файлов
• Каталог статей
• Каталог сайтов
• Доска объявлений
• Онлайн игры

Скрипт увеличения фото в ulightbox для модуля Форум

<script type="text/javascript">
$(".ucoz-forum-post img").each(function() {
$(this).wrap("<a href='" + this.src + "'/>");
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').addClass('ulightbox').attr("data-fancybox-group", "ultbx");
});
 </script>

устанавливается так же как и скрипт пример выше, но ставится в шаблон Общий вид страниц форума.

Примечание

Что важно отметить, в скриптах выше используются стандартные классы стандартных шаблонов, например eMessage img и eText img.

Если у вас свой уникальный шаблон, у вас классы могут отличаться внутри которых заворачивается блок с описание материала тега $MESSAGE$ нужно проверять какой у вас класс и прописать именно ваш класс.