UNITE Gallery by TCSE - плагин галереи картинок

UNITE Gallery by TCSE - плагин галереи картинок

UNITE Gallery - модуль генерации галереи картинок из допполей (Плагин для DLE 13 и выше)

Данный модуль подключает в шаблон сайта JS плагин unitegallery
В комплекте идет инструкция по настройке и готовый шаблон вывода 10 картинок.

Что такое Unite Gallery

Unite Gallery - это многоцелевая галерея jаvascript, основанная на библиотеке jquery. Он построен с модульной техникой с акцентом на простоту использования и настройки. Очень легко настроить галерею, изменить ее скин с помощью CSS и даже написать собственную тему. Тем не менее, эта галерея очень мощная, быстрая и имеет большинство современных функций, таких как отзывчивость, сенсорное управление и даже функция масштабирования, это уникальный эффект.

Особенности

Галерея воспроизводит ВИДЕО с: Youtube, Vimeo, HTML5, Wistia и SoundCloud (не видео, но все же)

Отзывчивый - подходит для каждого экрана с автоматическим сохранением соотношения

Touch Enabled - каждая часть галереи может управляться сенсорными устройствами с сенсорным экраном

Отзывчивый - галерея может соответствовать размеру экрана и реагировать на изменение размера экрана.

Skinnable - Позволяет легко менять скин в другом файле CSS, не касаясь основной галереи CSS.

Themable - галерея имеет различные темы, каждая тема имеет свои собственные параметры и функции, но она использует основные объекты галереи

Эффект масштабирования - галерея имеет уникальный эффект масштабирования, который можно применить с помощью кнопок, колесика мыши или жеста повышения на устройствах с сенсорным экраном

Кнопки галереи - в галерее есть кнопки, такие как полноэкранный режим или воспроизведение / пауза, оптимизированные для доступа сенсорных устройств

Управление с клавиатуры - Галерея может управляться с клавиатуры (стрелки влево, вправо) Тонны вариантов. Галерея имеет огромное количество опций для каждого объекта галереи, которые делают процесс настройки простым и увлекательным.

Мощный API - с помощью API галереи вы можете интегрировать галерею в поведение вашего сайта и использовать ее с другими элементами, такими как лайтбоксы и так далее



Примеры "живой" галереи



А в админке картинки добавлены следующим образом



Демо на странице http://demo.tcse-cms.com/o-skripte/4-unite-gallery-by-tcse.html


Обязательным условием работы плагина UNITE Gallery и дополнительных полей типа "Галерея" является наличие плагина Ссылки картинок с дополнительного поля типа Галерея от lazydev.pro

В архиве с модулей есть готовый шаблон для вывода галереи картинок. Но вам необходимо предварительно создать новое дополнительное поле
В разделе Дополнительные поля новостей

Название поля: manyfotos
Тип поля: Загружаемая галерея изображений


Остальные параметры дополнительного поля по своему усмотрению.

Подключение модуля в шаблон сайта

В главном шаблоне сайта main.tpl перед загрывающим тегом </head> добавить код

<br><link href="{THEME}/assets/unitegallery/css/unite-gallery.css" rel="stylesheet"><br><link href="{THEME}/assets/unitegallery/themes/default/ug-theme-default.css" rel="stylesheet"><br>

Для активации галереи необходимо в главном шаблоне сайта main.tpl перед загрывающим тегом </body> добавить код

<br><script src="{THEME}/assets/unitegallery/js/unitegallery.min.js"></script><br><script src="{THEME}/assets/unitegallery/themes/grid/ug-theme-grid.js"></script><br><br>{* активация плагина unitegallery *}<br><script type="text/jаvascript"><br>jQuery(document).ready(function(){<br>jQuery("#gallery").unitegallery();<br>});<br></script><br>


Картинка для наглядности - структура стилей и скриптов в шаблоне DLE

Примеры

В шаблоне полной новости (fullstory.tpl) в нужном месте добавить код для вывода готовой галереи

<br>[xfgiven_manyfotos]<br>{include file="assets/unitegallery/tpl/showfull-xfields.tpl"}<br>[/xfgiven_manyfotos]<br>

Данный код отобразит готовую галерею картинок загруженную через дополнительное поле с именем manyfotos.
Если же доп.поле пустое - то данный блок не будет загружен в шаблоне полной новости.

Скачать модуль

Скачать файл: TCSE_unitegallery_v1.0.0_dle13.3.zip [393,55 Kb] (cкачиваний: 439)
Копия модуля от lazydev.pro
Скачать файл: ssylki-kartinok-s-dopolnitelnogo-polja-tipa-galereja-dle-133-.xml [9,31 Kb] (cкачиваний: 252)

Обратите внимание:

Плагин корректно работает в шаблона основанных на фреймворке Bootstrap

На данный момент времени это одно из самых популярных решений в сети.
статистика Technologies > jаvascript Libraries

2022-04-12

Пример кода для DLE 15.1 теперь не требуется дополнительные плагины!

заменить содержимое {THEME}/assets/unitegallery/tpl/showfull-xfields.tpl
на

<!-- UNITE gallery START --> <section>      <div id="gallery" style="display:none;">           [xfgiven_manyfotos image="1"]             <img alt='[xfvalue_manyfotos image-description="1"]'             src='[xfvalue_manyfotos image-thumb-url="1"]'             data-image='[xfvalue_manyfotos image="1"]'             data-description='{title} | {date} | {category}'             itemprop="image"             >         [/xfgiven_manyfotos image="1"]          [xfgiven_manyfotos image="2"]             <img alt='[xfvalue_manyfotos image-description="2"]'             src='[xfvalue_manyfotos image-thumb-url="2"]'             data-image='[xfvalue_manyfotos image="2"]'             data-description='{title} | {date} | {category}'             itemprop="image"             >         [/xfgiven_manyfotos image="2"]          [xfgiven_manyfotos image="3"]             <img alt='[xfvalue_manyfotos image-description="3"]'             src='[xfvalue_manyfotos image-thumb-url="3"]'             data-image='[xfvalue_manyfotos image="3"]'             data-description='{title} | {date} | {category}'             itemprop="image"             >         [/xfgiven_manyfotos image="3"]          [xfgiven_manyfotos image="4"]             <img alt='[xfvalue_manyfotos image-description="4"]'             src='[xfvalue_manyfotos image-thumb-url="4"]'             data-image='[xfvalue_manyfotos image="4"]'             data-description='{title} | {date} | {category}'             itemprop="image"             >         [/xfgiven_manyfotos image="4"]          [xfgiven_manyfotos image="5"]             <img alt='[xfvalue_manyfotos image-description="5"]'             src='[xfvalue_manyfotos image-thumb-url="5"]'             data-image='[xfvalue_manyfotos image="5"]'             data-description='{title} | {date} | {category}'             itemprop="image"             >         [/xfgiven_manyfotos image="5"]          [xfgiven_manyfotos image="6"]             <img alt='[xfvalue_manyfotos image-description="6"]'             src='[xfvalue_manyfotos image-thumb-url="6"]'             data-image='[xfvalue_manyfotos image="6"]'             data-description='{title} | {date} | {category}'             itemprop="image"             >         [/xfgiven_manyfotos image="6"]          [xfgiven_manyfotos image="7"]             <img alt='[xfvalue_manyfotos image-description="7"]'             src='[xfvalue_manyfotos image-thumb-url="7"]'             data-image='[xfvalue_manyfotos image="7"]'             data-description='{title} | {date} | {category}'             itemprop="image"             >         [/xfgiven_manyfotos image="7"]          [xfgiven_manyfotos image="8"]             <img alt='[xfvalue_manyfotos image-description="8"]'             src='[xfvalue_manyfotos image-thumb-url="8"]'             data-image='[xfvalue_manyfotos image="8"]'             data-description='{title} | {date} | {category}'             itemprop="image"             >         [/xfgiven_manyfotos image="8"]          [xfgiven_manyfotos image="9"]             <img alt='[xfvalue_manyfotos image-description="9"]'             src='[xfvalue_manyfotos image-thumb-url="9"]'             data-image='[xfvalue_manyfotos image="9"]'             data-description='{title} | {date} | {category}'             itemprop="image"             >         [/xfgiven_manyfotos image="9"]          [xfgiven_manyfotos image="10"]             <img alt='[xfvalue_manyfotos image-description="10"]'             src='[xfvalue_manyfotos image-thumb-url="10"]'             data-image='[xfvalue_manyfotos image="10"]'             data-description='{title} | {date} | {category}'             itemprop="image"             >         [/xfgiven_manyfotos image="10"]               </div> </section>  <!-- UNITE gallery STOP --> 

Сами файлы шаблонов вывод галерей
Скачать файл: showfull-xfields.tpl для DLE 15.1 [3,13 Kb] (cкачиваний: 66)
Скачать файл: showfull-xfields.tpl для DLE 15.2 - 16.0 [7,43 Kb] (cкачиваний: 5)

Теперь работает отображение описания к каждой отдельной картинке




и на сайте





Репозиторий плагина
https://github.com/tcse/DLE-UNITEGallery

Примеры вывода галерей в разных стилях




подключить темы

<!-- include Unite Gallery Theme Files --> <script src='{THEME}/assets/unitegallery/themes/tilesgrid/ug-theme-tilesgrid.js' type='text/javascript'></script> <script src='{THEME}/assets/unitegallery/themes/carousel/ug-theme-carousel.js' type='text/javascript'></script> <script src='{THEME}/assets/unitegallery/themes/tiles/ug-theme-tiles.js' type='text/javascript'></script>

и дописать скрипты активации

{* активация плагина unitegallery *} <script type="text/javascript">         jQuery("#tilesgridGallery").unitegallery({            gallery_theme: "carousel"        });                jQuery("#nestedgallery").unitegallery({         gallery_theme: "tiles",         tiles_type: "nested"                             });    });  </script>

Новости компании

Общая информация о теме дизайна

accent by Colorlib интегрировано и настроено в TCSE Тема дизайна в которой нет ничего лишнего. Предназначена для блог и новостных проектов, может быть использована как часть...

Подробнее

Про хипстеров

Олег: Возникла идея современного детективного романа. Не знаю, как назвать. Выбираю между "Барбершоп смерти" и "Нож в спиннер". Предложите еще варианты? Главный герой -...

Подробнее

Григорий Семухин - Параллель.

Для тех кому понравилась серия играть что бы жить. Именно эта серия дает схожий опыт но под другим углом и взаимодействии виртуальных миров и реальности друг на друга. Классическая...

Подробнее

Литературные новости

Литературные новости в картинках Жена высокопоставленного чиновника покончила с собой после ссоры с любовников. Дочь столичного чиновника расправилась с...

Подробнее

LRR #8 - Trap хиты из TikTok

Самые популярные треки Tiktok в одном миксе. Русский Trap разбавленный хитами с youtube. Треклист: 01. - The Limba - СМУЗИ 02. - MORGENSHTERN & Lil Pump - WATAFUK? 03. - Ski Mask...

Подробнее

Модуль DLE importNews - работа с новостями сайта через CSV

Плагин для DLE, позволяющий выгружать новости в CSV и загружать их на сайте. Оптимальное решение для быстрого наполнения CMS DLE товарами из прайс-листов получаемых от поставщиков в XLSX...

Подробнее

Написать комментарий