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

Наши разработки / Скачать модули для DLE | 12 апреля 2022


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> добавить код


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

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



<script src="{THEME}/assets/unitegallery/js/unitegallery.min.js"></script>
<script src="{THEME}/assets/unitegallery/themes/grid/ug-theme-grid.js"></script>

{* активация плагина unitegallery *}
<script type="text/jаvascript">
jQuery(document).ready(function(){
jQuery("#gallery").unitegallery();
});
</script>



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


Примеры

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


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

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






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


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


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


Плагин корректно работает в шаблона основанных на фреймворке 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качиваний: 77)
Скачать файл: showfull-xfields.tpl для DLE 15.2 - 16.0 [7,43 Kb] (cкачиваний: 44)

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



и на сайте




Репозиторий плагина
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>


Пример кода для шаблона DLE 16 


<!-- 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-url="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-url="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-url="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-url="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-url="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-url="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-url="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-url="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-url="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-url="10"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="10"]

		[xfgiven_manyfotos image="11"]
			<img alt='[xfvalue_manyfotos image-description="11"]'
			src='[xfvalue_manyfotos image-thumb-url="11"]'
			data-image='[xfvalue_manyfotos image-url="11"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="11"]

		[xfgiven_manyfotos image="12"]
			<img alt='[xfvalue_manyfotos image-description="12"]'
			src='[xfvalue_manyfotos image-thumb-url="12"]'
			data-image='[xfvalue_manyfotos image-url="12"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="12"]

		[xfgiven_manyfotos image="13"]
			<img alt='[xfvalue_manyfotos image-description="13"]'
			src='[xfvalue_manyfotos image-thumb-url="13"]'
			data-image='[xfvalue_manyfotos image-url="13"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="13"]

		[xfgiven_manyfotos image="14"]
			<img alt='[xfvalue_manyfotos image-description="14"]'
			src='[xfvalue_manyfotos image-thumb-url="14"]'
			data-image='[xfvalue_manyfotos image-url="14"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="14"]

		[xfgiven_manyfotos image="15"]
			<img alt='[xfvalue_manyfotos image-description="15"]'
			src='[xfvalue_manyfotos image-thumb-url="15"]'
			data-image='[xfvalue_manyfotos image-url="15"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="15"]

		[xfgiven_manyfotos image="16"]
			<img alt='[xfvalue_manyfotos image-description="16"]'
			src='[xfvalue_manyfotos image-thumb-url="16"]'
			data-image='[xfvalue_manyfotos image-url="16"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="16"]

		[xfgiven_manyfotos image="17"]
			<img alt='[xfvalue_manyfotos image-description="17"]'
			src='[xfvalue_manyfotos image-thumb-url="17"]'
			data-image='[xfvalue_manyfotos image-url="17"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="17"]

		[xfgiven_manyfotos image="18"]
			<img alt='[xfvalue_manyfotos image-description="18"]'
			src='[xfvalue_manyfotos image-thumb-url="18"]'
			data-image='[xfvalue_manyfotos image-url="18"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="18"]

		[xfgiven_manyfotos image="19"]
			<img alt='[xfvalue_manyfotos image-description="19"]'
			src='[xfvalue_manyfotos image-thumb-url="19"]'
			data-image='[xfvalue_manyfotos image-url="19"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="19"]

		[xfgiven_manyfotos image="20"]
			<img alt='[xfvalue_manyfotos image-description="20"]'
			src='[xfvalue_manyfotos image-thumb-url="20"]'
			data-image='[xfvalue_manyfotos image-url="20"]'
			data-description='{title} | {date} | {category}'
			itemprop="image"
			>
		[/xfgiven_manyfotos image="20"]
		

	</div>
</section>

<!-- UNITE gallery STOP -->
Перейти на сайт