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

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

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


<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качиваний: 407)
Копия модуля от lazydev.pro
Скачать файл: ssylki-kartinok-s-dopolnitelnogo-polja-tipa-galereja-dle-133-.xml [9,31 Kb] (cкачиваний: 229)


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


Плагин корректно работает в шаблона основанных на фреймворке 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-url="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-url="1"]

		[xfgiven_manyfotos image-url="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-url="2"]

		[xfgiven_manyfotos image-url="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-url="3"]

		[xfgiven_manyfotos image-url="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-url="4"]

		[xfgiven_manyfotos image-url="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-url="5"]

		[xfgiven_manyfotos image-url="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-url="6"]

		[xfgiven_manyfotos image-url="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-url="7"]

		[xfgiven_manyfotos image-url="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-url="8"]

		[xfgiven_manyfotos image-url="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-url="9"]

		[xfgiven_manyfotos image-url="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-url="10"]
		

	</div>
</section>

<!-- UNITE gallery STOP -->


сам файл шаблона Скачать файл: showfull-xfields.tpl для DLE 15.1 [3,13 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>

Показ видео с youtube по ссылке на страницу ролика - YouTube PopUp jQuery Plugin

YouTube PopUp jQuery Plugin Для DataLife Engine. Теперь в виде плагина для простой установке в свой

Веб-разработка / Подборка скриптов для создания галереи на php

Искал я на просторах Интернета всего лишь скрипт для создания индекса изображений с lightbox и

Снег на сайте - Jquery плагин

Наиболее современный способ реализации падающего снега на вашем сайте, работающем на движке DLE.

Jquery / Фиксим плагин jGrowl в IE 7

Сегодня с удивлением обнаружил, что популярный в народе jQuery-плагин для показа сообщений jGrowl

[Перевод] XSS уязвимость по-прежнему сохраняется для WordPress

В ходе регулярных проверок и исследований была обнаружена сохранность XSS уязвимости, которая

[Из песочницы] Создание несимметричной сетки с помощью Grid Layout

На данный момент, по данным Can I Use, 84% браузеров поддерживает Grid Layout. С каждым месяцем это

21 Комментарии

    1. TCSE

      31 октября 2019 10:32

      полезные советы по работе с Unite Gallery (на самом деле все есть в оригинальной английской инструкции на сайте разработчика)

      1. Как переместить панель мини-картинок (превью) с правого края под большую картинку?
      - для этого в main.tpl необходимо дописать правила для галереи

      вместо:

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


      написать так

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



      где theme_panel_position: "bottom"
      это и есть параметр отображения положения панельки.

    1. Игорь

      1 января 2020 16:46

      Здравствуйте, подскажите как убрать zoom у больших фото ?

      1. TCSE

        17 января 2020 18:49

        в документации к unitegallery на странице https://unitegallery.net/index.php?page=examples-api

        
        api.play()					//start play mode
        			api.stop()					//stop play mode
        			api.togglePlay()			//toggle play mode
        			api.enterFullscreen()		//enter fullscreen
        			api.exitFullscreen()		//exit fullscreen		
        			api.toggleFullscreen()		//toggle fullscreen
        			api.zoomIn()				//zoom in current image
        			api.zoomOut()				//zoom out current image
        			api.resetZoom()				//reset zoom to fit zoom mode
        			api.nextItem()				//next item
        			api.prevItem()				//previous item
        			api.selectItem(numItem)		//go to some item by index (0-numItems)
        			api.resize(width, height)	//resize the gallery to some width. Height is optionary.
        			api.getItem(numItem)		//get data object of the item by some index.
        			api.getNumItems()			//get number of items in the gallery
        

      1. TCSE

        27 февраля 2020 11:56

        опция
        slider_control_zoom:false,


        изменение масштаба слайда true - включено, false - отключено для мышки в режиме просмотра галереи.

        Полный код для конкретной галереи может выглядеть так:

        
        <script type="text/javascript"> 
                jQuery(document).ready(function(){ 
                    jQuery("#gallery").unitegallery({
                        gallery_autoplay:true,
                        slider_control_zoom:false,
                        slider_transition: "slide",
                        gallery_width:1110
                    }); 
                }); 
            </script>
        
        

    1. TCSE

      5 февраля 2020 14:00

      Интересное наблюдение в DLE 13.3 если в настройках админки указано

      Версия jQuery для вашего сайта:
      Выберите версию jQuery, которая будет подключаться для использования на вашем сайте - 2.xx


      то галерея работать не будет.

      Необходимо выбрать jQuery 3.xx

    1. Владимир

      25 марта 2020 12:01

      В админке у картинок есть описание как вывести в alt то описание которое указано в картинке, а не alt="{title}"

      1. TCSE

        25 марта 2020 12:46

        так как работа с прямыми ссылками на отдельные картинки в галереи DLE работает исключительно через плагин https://lazydev.pro/fcode/26-url-xfield-gallery-plugin.html то поддержка атрибута alt у картинки должна быть реализована на стороне плагина.

        Иначе никак.

    1. amir21

      10 сентября 2020 11:48

      я сделал все по инструкции но не выводиться ничего! https://anime24.ru/

      1. Швондер

        12 сентября 2020 00:10

        И не будет sweat_smile ерунда это полная

    1. Сергей

      6 октября 2020 20:58

      Сделал всё по инструкции - не работает. Версия ДЛЕ 14.1.

    1. buka

      11 октября 2020 16:28

      Вроде работает на 14.1 но есть ошибка, в консоли отображается вот это: Uncaught ReferenceError: jQuery is not defined at....

      1. Izi4

        18 декабря 2020 13:11

        Я хз ребзя как у вас не работает, поставил сразу без промахов. Все работает. Теперь проверяем скорость загрузки с 2 модулями.

    1. Сергей

      2 февраля 2021 21:19

      Поставил - не работает. Дле 14.1.
      Даже на демо версии не работает
      http://demo.tcse-cms.com/o-skripte/4-unite-gallery-by-tcse.html
      Я так понимаю - скрипт не рабочий?

    1. TCSE

      3 февраля 2021 09:15

      Плагин работает.

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


      а вот там проблема с базовым шаблоном Default
      переключил на тестовый на основе bootstrap и все ок.

      Вот скриншот демо-версии


      Проблема с неработающим плагином у комментаторов скорее всего связана с использованием шаблонов не основанных на фреймворке Bootstrap.


      Живые примеры на сайтах (у всех Bootstrap в качестве основы )

      https://emplgroup.ru/commercial-vehicle/industry-solutions/15-legkaja-amp-srednjaja-serija-gruzovyh-jevakuatorov-eh-w-020-150.html
      https://vsservice.ru/489-3-8-ja-ul-sokolinoj-gory-d-15-gbuz-ikb-2.html
      https://stgroup-cpt.ru/parts/parts-wielton/723-kronshtejn-poluressory-pravyj-saf.html

      1. yaqub

        7 февраля 2021 21:27

        dle 14 не работает, поможете?

        1. Foorty

          7 апреля 2021 20:59

          add .htaccess files

    1. Atom

      2 марта 2021 19:59

      Заметно снижает скорость загрузки сайта, нафиг не нужно такое счастье, снёс.

    1. TCSE

      7 января 2022 16:19

      В DLE 15.0 не работает плагин от lazydev.pro (ssylki-kartinok-s-dopolnitelnogo-polja-tipa-galereja-dle-133-.xml )
      Но зато в пресс-релизе DLE 15.1 заявлена новая фича:

      25 Для шаблонов вывода публикаций (shortstory.tpl и fullstory.tpl) для дополнительных полей имеющих тип "Галерея изображений", добавлена поддержка новых тегов: [xfvalue_X image-url="Nr"] который выводит только URL выбранного изображения из галереи изображений, [xfvalue_X image-thumb-url="Nr"] который выводит только URL уменьшенной копии выбранного изображения из галереи изображений, [xfvalue_X image-description="Nr"] который выводит только описание выбранного изображения из галереи изображений. Где "X" это имя дополнительного поля, а "Nr" это номер изображения из галереи. Например, при использовании [xfvalue_test image-description="2"] будет выведено описание изображения номер два, загруженного в дополнительное поле с именем "test". Тем самым вы можете сделать полностью своё собственное оформление галереи изображений на своём сайте.


      Источник https://dle-news.ru/pressrelease/1853-datalife-engine-v151-press-release.html

      Так что в DLE 15.1 можно будет опять использовать плагин UNITE Gallery

    1. Алексей

      5 мая 2022 20:18

      На dle 15.1 при загрузке меньше 10 указанных изображений, создаются пустые изображения. Можно это как-то исправить?
      https://disk.yandex.ru/i/ujEP7QWzybjcNw

      1. TCSE

        23 июня 2022 22:17

        нужно обновить на DLE 15.2 и использовать новые теги шаблонизатора в файле шаблона фотогалереи.

    1. foorty

      9 сентября 2022 23:23

      To: Alexej
      [xfnotgiven_manyfotos]...[/xfnotgiven_manyfotos]

      img alt='[xfvalue_manyfotos image-description="12"]'
      data-thumb='[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="12"]
      В них удалите URL
      Работает на DLE 15.2

      Полный код здесь:
      https://dle.cz/alibaba/gallery_15_2.txt

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

  • Смайлы и люди
    Животные и природа
    Еда и напитки
    Активность
    Путешествия и места
    Предметы
    Символы
    Флаги