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.
Если же доп.поле пустое - то данный блок не будет загружен в шаблоне полной новости.
Скачать модуль
Копия модуля от lazydev.pro
Обратите внимание:
Плагин корректно работает в шаблона основанных на фреймворке 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 -->
Сами файлы шаблонов вывод галерей
Теперь работает отображение описания к каждой отдельной картинке
и на сайте
Репозиторий плагина
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>
