Cotonti сайт своими руками / Расширения / Файлы и медиа

Highslide - плагин Cotonti

03.02.2019 357

Добро пожаловать на сайт cmscot.net, уважаемый читатель. Highslide - это плагин под Cotonti для просмотра изображений, медиа и галерей в модальном окне с затемнением фона. Работает он на базе скрипта, написанного на JavaScript (весит совсем немного для такого функционала, меньше 50 кб), не требует дополнительных библиотек. Содержимое открывается в активном окне браузера, поэтому блокировщики всплывающих окон не ругаются. Если экран меньше содержимого, то оно подстраивается.

Highslide - плагин галереи и модальных окон

Взаимодействие с API самой библиотеки происходит с помощью отдельных функций, написанных непосредственно под возможности Cotonti. Скрипты загружаются в самом низу (в футер), имеют атрибут defer, поэтому запускаются уже после загрузки страницы.

CSS плагина highslide

Стили css разделены на два файла. Первый - highslide.custom.css: оформление галереи (css grid), весит меньше килобайта, подключается вместе с остальными файлами шаблона.

Второй это highslide.css - отдельное оформление модального содержимого (модифицированное, уменьшенное в несколько раз), подключается с помощью js после загрузки.

А оригинальный файл стилей - highslide.orig.css находится в папке lib, и не подключается нигде.

Установка плагина highslide

  • Скачать архив, распаковать. Переименовать папку с плагином в highslide. Её нужно разместить в корневой каталог c плагинами ( по умолчанию plugins ).
  • Перейти в «Управление сайтом / Расширения / Просмотр изображений, медиа и галерей» и установить.
  • На этом процесс установки можно считать завершенным.

После установки можно сразу открыть настройки и изменить конфигурацию по желанию.

Настройки плагина highslide

Подключать скрипт на главной если включено, скрипт подключится и на главной
Автоматическая обработка изображений в контенте: при включении все изображения в контенте обработаются автоматически, если их больше 1, появится функционал галереи (листание, проигрывание, миниатюры)
Заблокировать правый клик при просмотре изображений: если включено, блокирует правый клик на открытом в окне изображении
Выводить Powered by Highslide JS: включение / отключение ссылки на страницу скрипта
Подключить css модуля/плагина: подключение стилей плагина

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

Если нужно вывести в шаблон галерею, ссылки на открытие модальных окон, то это можно сделать так:

Подключение галереи highslide в шаблон

Так как для вывода списка ссылок с изображениями внутри, средствами Cotonti, рекомендуется использовать плагин attacher. Вот вариант подключения функции вывода галереи в page.tpl:

<!-- IF {PAGE_ID|att_count('page',$this,'','images')} > 0 -->
<div data-att-gallery="highslide" data-att-group="test">
	<h3>{PHP.L.att_gallery}</h3>
	{PAGE_ID|att_gallery('page',$this,'','highslide.attacher.gallery')}
</div>
<!-- ENDIF -->

Параметр data-att-group связывает или наоборот, разделяет файлы, при наличии нескольких галерей. Например если на странице будет выведено 3 галереи по 5 изображений в каждой, то при одинаковом параметре data-att-group, будет при клике открываться галерея из 15 изображений. Если у 2 из 3 одинаковое - то 10, а если у каждой разный - то при клике на любое изображение одной из трёх галерей, будут открываться 5.

По аналогии с этим примером можно подключить в любом другом месте. Файл highslide.attacher.gallery.tpl находится в папке tpl плагина. Стилизация галереи - highslide.custom.css. Так как используется css grid для вывода в несколько колонок, допишите свои стили, если вы еще из прошлого не попали в настоящее  и верите что редкие визиты с юзер агентом IE это не боты (последний выпуск IE был в 2013).

Модальные окна highslide в шаблоне

Если нужно показать какое-нибудь содержимое во всплывающем окне при клике по ссылке, то это можно сделать с помощью передачи параметров onclick, как указано в примерах на сайте highslide.com, или же с помощью специальных функций JavaScript, отслеживающих клик по ссылкам с определенным классом.

Вывод содержимого может происходить несколькими способами, в зависимости от типа контента. Это может быть вызов с помощью iframe, ajax, или inline. Какой из них применять - нужно выбирать самостоятельно:

  1. Highslide iframe - применяется для вызова различного содержимого, находящегося на отдельной странице, может даже на отдельном домене (если не стоит запрет на показ в ифрейме). Показывается содержимое всей страницы. Это может быть файл, страница, видео Youtube, SWF объект, изображение, и другое аналогичное содержимое, доступное для просмотра в браузере.
  2. Highslide ajax - применяется для вывода содержимого по аналогии с iframe, но в отличие от него, парсит, а не показывает оригинальную страницу, поэтому подходит для текстового содержимого. Контент также должен находиться в отдельном файле или даже домене. Показывается или всё полученное, или содержимое конкретного контейнера с ID, добавленным через # в конце url вызова.
  3. Highslide inline - применяется для показа любого содержимого определенного контейнера. Вызываемый контейнер должен находиться тут же где ссылка вызова.

Если использовать API Highslide JS для передачи параметров напрямую через событие onclick, то это можно сделать такими способами:

открыть iframe в модальном окне средствами скрипта по событию onclick:

<a href="url" onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: '700',height: '700', allowWidthReduction: true } )">
Iframe
</a>

открыть ajax в модальном окне средствами скрипта по событию onclick:

<a href="url" onclick="return hs.htmlExpand(this, {objectType: 'ajax', width: '700',height: '700', allowWidthReduction: true } )">
Ajax
</a>

открыть содержимое определенного div в модальном окне по событию onclick:

<a href="#" onclick="return hs.htmlExpand(this, {width: '900',height: '900', allowWidthReduction: true } )">
Inline
</a>
<div class="highslide-maincontent">
 Содержимое
</div>

Так как эти возможности являются частью Highslide JS API Reference, при желании можете вникнуть в документацию, там описаны все возможные параметры для вызова, и прочие нюансы.

А ниже пойдет речь о методах реализованных на базе вышеуказанного API уже на уровне плагина. При вызове средствами плагина, с помощью указания атрибута class, добавлены атрибуты data-width и data-height, с помощью которых передаются дополнительные параметры.

По умолчанию подхватываются предустановленные размеры. Но если передать параметры, то можно вызвать окно нужных габаритов, которое подстроится под размеры экрана пользователей при вызове, если указанные размеры больше чем фактический экран.

Параметры ссылок:

  • class (обязательный параметр)
    • highslide-iframe (вызов окна iframe) 
    • highslide-ajax (вызов окна ajax)
    • highslide-inline (вызов окна с содержимым контейнера)
  • data-width
    • fluid (ширина на весь экран)
    • число (ширина в пикселях, только число без наименования)
  • data-height
  • auto (без высоты, берется минимальная из css)
  • число (высота в пикселях, только число без наименования)

Модальные окна highslide iframe

открыть iframe в модальном окне:

<a href="url" class="highslide-iframe">
Открыть в окне
</a>

открыть в модальном окне iframe указанных размеров:

<a href="url" class="highslide-iframe" data-width="1000" data-height="600">
Открыть в окне
</a> 

Аналогичным способом можно вызывать модальные окна с различным содержимым в iframe, в том числе видео. Для Youtube реализована поддержка коротких ссылок вида youtu.be.

Пример вызова формы добавления файлов в page.tpl с помощью highslide:

<a href="{PAGE_ID|cot_url('index','r=attacher&amp;a=display&amp;area=page&amp;item=$this')}" class="highslide-iframe">
{PHP.L.att_attach}
</a>

Модальные окна highslide ajax

открыть ajax в модальном окне:

<a href="url" class="highslide-ajax">
Открыть в окне
</a>

открыть в модальном окне ajax указанных размеров:

<a href="url" class="highslide-ajax" data-width="900" data-height="700">
Открыть в окне
</a> 

открыть в модальном окне ajax содержимое div id="test":

<a href="url#test" class="highslide-ajax"> Открыть в окне </a>

Аналогично можно вызывать то что нужно, например лицензионное соглашение, правила сайта, и т.д.

Модальные окна highslide inline

открыть содержимое div в модальном окне:

<a href="#" class="highslide-inline">Inline HTML</a>
<div class="highslide-maincontent">
Здесь любое содержимое
</div>

открыть содержимое div в модальном окне указанных размеров:

<a href="#" class="highslide-inline" data-width="fluid" data-height="1200">Inline HTML</a>
<div class="highslide-maincontent">
Здесь любое содержимое
А здесь еще кнопка вызова другого окна, а может галерея, а может... можно придумать.. 
</div>

Этих возможностей достаточно для того чтобы настроить различные варианты вызова, а благодаря тому, что были написаны отдельные функции js для плагина, можно ссылкам в статьях присвоить один из указанных атрибутов class, и сработает модальное окно. По умолчанию onclick, data и прочие атрибуты вырезаются редактором, и пурифиером, а класс - самый доступный атрибут из необязательных.

Файлы и медиа: «Highslide - плагин Cotonti»

Если вам была полезна эта информация, будьте добры, поделитесь ею в социальных сетях. Это послужит дополнительным мотиватором, стимулом к дальнейшим публикациям на cmscot.net статей на интересующие вас темы.
Cmscot

Близкие по теме «Highslide - плагин Cotonti»

Нет записей