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


<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>

Примеры

В шаблоне полной новости (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качиваний: 103)
Копия модуля от lazydev.pro
ssylki-kartinok-s-dopolnitelnogo-polja-tipa-galereja-dle-133-.xml [9,31 Kb] (cкачиваний: 50)


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


Похожие публикации

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

YouTube PopUp jQuery Plugin Для DataLife Engine. Доработка плагина для использования в шаблона DLE CMS. Например для RSS информеров в которых используются ссылки на youtube ролики. Исходный плагин,... читать далее

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

Искал я на просторах Интернета всего лишь скрипт для создания индекса изображений с lightbox и генерированием thumbnails. Помимо того что меня полностью устроило (phppi), нашел довольно интересную... читать далее

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

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

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

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

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

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

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

На данный момент, по данным Can I Use, 84% браузеров поддерживает Grid Layout. С каждым месяцем это число растет. А ведь буквально недавно этот модуль находился за флагом. Поэтому если Вы еще не... читать далее

Комментарии (7)

  1. #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"
    это и есть параметр отображения положения панельки.
    • 0

       

  2. #2 написал: Игорь
    Группа: Гости
    1 января 2020 16:46

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

       

    1. #3 написал: 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
      
      • 0

         

    2. #4 написал: 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>
      
      

      • 0

         

  3. #5 написал: TCSE
    Группа: Администраторы
    5 февраля 2020 14:00

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

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


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

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

       

  4. #6 написал: Владимир
    Группа: Гости
    25 марта 2020 12:01

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

       

    1. #7 написал: TCSE
      Группа: Администраторы
      25 марта 2020 12:46

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

      Иначе никак.
      • 0

         

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent