ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Скрипт просмотра изображение на Lightbox

Скрипт просмотра изображение на Lightbox

Скрипт просмотра изображение на Lightbox
Данный скрипт предназначен для просмотра картинок или изображений на сайте в окне ulightbox, где присутствуют кнопки переключения по правую и левую сторону. Если ваш сайт на тематику, где основном присутствует изображение, это аватары или обои, то 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>

Установка аналогичной первой, разве только в Общий вид страниц форума нужно его прописать.

Важно: здесь нужно понимать, что все идет на стандартные шаблоны, если у вас оригинальный шаблон, то возможно классы кардинально могут отличатся, мы говорим про закручивающий блок с описанием материала тега MESSAGE, что нужно проверять, это какой у вас класс, и уже его прописываем.

Автор: Юрий Герук
Источник: mybloga.com
27 Мая 2023 Просмотров: 977 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 1
-SAM-
-SAM- 04 Июня 2023 04:041
+1
Это скрипт для тех случаев, когда картинки в материале ставят не через переменные для вывода прикрепленных изображений, а просто прописывают прямо в коде материала (допустим, через bb-код img ставят ссылку на изображение). И важно понимать, если у картинки такой и так уже есть анкор (url), то этот скрипт обернет картинку в еще один (будет ошибка чтения браузером). Ну и, если картинки прописаны в материале через переменные на вывод прикрепленных изображений, то у них и так по умолчанию в системе uCoz используется uLightbox (его можно отключать в ПУ сайта)... это я к тому, что опять же скрипт не подходит (на этот счёт можно почитать обсуждение здесь, где давал рабочее решение).
P.S.: если скрипт подключать, то помимо прочего он еще должен ставиться в условный оператор (чтобы он был лишь на тех страницах, на которых нужно делать перелистывание галереи изображений).
avatar