Расширения

Обзор RSMediaGallery. Создание слайд-шоу в Joomla

 

 

В предыдущей статье «Обзор RSMediaGallery. Галерея изображений Joomla» мы рассмотрели перечень основных возможностей компонента, а также его настройки и опции по работе с файлами. В этой статье поговорим о том, при помощи чего можно отобразить слайд-шоу и галерею на сайте Joomla (во фронтальной части). Это пункты меню, модули и плагины. Начнём с первого.

Меню RSMediaGallery

Если Вы хотите отображать страницу с изображениями галереи по нажатию на один из пунктов меню, для этого в менеджере меню Joomla можно выбрать один из доступных пунктов меню RSMediaGallery:

  1. Макет альбома. Отображает миниатюры группы изображений, объединённых одним тегом. При нажатии на эту миниатюру можно перейти к макету галереи, то есть к просмотру набора миниатюр изображений (с возможностью их увеличения для просмотра большой версии изображения).
  2. Макет галереи. Отображает набор миниатюр изображений заданных тегов (с возможностью их увеличения для просмотра большой версии изображения). Опции, которые есть в этом пункте меню дублируют те, что есть для Макет альбома.

На рисунке ниже приведён пример макета альбома.

Макет альбома

При нажатии на один из альбомов можно перейти к простору изображений, которые в нём содержатся. По сути, это и есть макет галереи (рисунок ниже).

Макет галереи

Рассмотрим опции, доступные для пункта меню тип Макет альбома (рисунок ниже). Они разделены на две вкладки (те опции, которые относятся непосредственно к галерее для Joomla 3).

  1. Параметры.
  2. Дополнительные параметры.

RSMediaGallery

Вкладка Параметры (рисунок выше) содержит следующие настройки:

  • Теги. Теги тех изображений, которые Вы хотите отображать на странице с альбомами. Подробнее о тегах можно прочесть в статье «Обзор RSMediaGallery. Галерея изображений Joomla».
  • Сделать галерею отзывчивой. Позволяет активировать отзывчивый дизайн для галереи, чтобы она нормально смотрелась на разных экранах.
  • Количество изображений в ряду. Количество миниатюр альбомов, которые Вы хотите отображать в строке (от 1 до 6). Миниатюры альбомов состоят из миниатюр изображений, входящих в них.

Вкладка Параметры (рисунок выше) содержит следующие настройки для страницы альбомов.

  • Выбор направления. Направление сортировки альбомов.
  • Направление миниатюр. Направление сортировки миниатюр изображений, из которых будет составлена миниатюра альбома.
  • Показывать теги альбомов. RSMediaGallery позволяет включить или отключить отображение тегов альбома под его миниатюрой.
  • Разрешения для просмотра блока. Компонент галереи для Joomla 3 позволяет указать ширину миниатюры альбома в пикселях.
  • Центрировать альбомы. Данная опция позволяет указать на то, что компонент слайд-шоу Joomla должен выравнивать альбомы по центру страницы.

Эти опции уже относятся непосредственно к странице с изображениями альбома.

  • Размер миниатюр. Модуль галереи Joomla позволяет Вам управлять размером миниатюр изображений внутри альбомов путём задания ширины или высоты миниатюры. Если Вы зададите ширину изображения,  RSMediaGallery автоматически просчитает его высоту (с учётом настроек пропорций).
  • Центрирование галереи. Опция аналогична опции Центрировать альбомы, но относится к изображениям внутри альбома.
  • Порядок сортировки изображений. Плагин галереи для Joomla позволяет Вам задать порядок сортировки миниатюр внутри альбома. Доступны такие параметры: Свободный порядок, Название, Описание, Хиты, Дата создания, Дата изменения.
  • Выбор направления. Задав порядок сортировки, можно указать направление (по возрастанию или убыванию). Например, задав в опции Порядок сортировки изображений параметр Дата создания, можно указать, надо отображать вверху альбома самые новые или самые старые изображения.
  • Количество изображений на странице. RSMediaGallery позволяет указать, сколько изображений будет показано на странице. Все остальные изображения будут показываться после нажатия на кнопку Загрузить ещё (рисунок ниже). Она появится под изображениями на странице и в скобках будет указано, сколько ещё доступно изображений для загрузки. Аналог пагинации (постраничной навигации). Например, альбом содержит 100 изображений. В опции Количество изображений на странице Вы задали 20, значит при загрузке страницы альбома будет показано 20 миниатюр галереи и кнопка с надписью «Загрузить ещё (осталось 80)». По нажатию на эту кнопку загрузится ещё 20 изображений, а на кнопке будет написано «Загрузить ещё (осталось 60)» и т. д. Обратите внимание на то, что данная опция может существенно увеличить скорость загрузки страницы, особенно если в альбоме очень много изображений. Так как изображения «скрытые» за кнопкой «Загрузить ещё» не только не будут видны пользователю, но и не будут загружаться на его компьютер и не будет происходить генерация миниатюр «скрытых» изображений.

Слайд-шоу Joomla

  • Открывать изображения в. Можно указать, что именно должно происходить по нажатию на миниатюру изображения. Слайд-шоу – открывает увеличенный вариант изображения во всплывающем окне на фоне страницы с возможностью перехода к другим изображениям (рисунок ниже). Отображаемая тут информация (заголовок, описание, дата и так далее) может быть скрыта при помощи опций, описанных ниже. Страница подробностей – открывает увеличенный вариант изображения на новой странице с возможностью перехода к другим изображениям или возврату к альбому. Отображаемая тут информация может быть скрыта при помощи опций, описанных ниже. Перейти к URL – происходит переход по указанному при редактировании изображения  URL-адресу.

Слайд-шоу

  • Открыть изображения на новой странице. Данная опция позволяет указать, будет ли открыто увеличенное изображение или страница с указанным URL-адресом в новом окне или в том же. Если Вы указали для опции Открывать изображения в параметр Страница подробностей или Перейти к URL.

Опции Показывать название, Показывать описание, Показывать хиты, Показывать теги, Показать дату создания, Показать дату изменения позволяют отображать\скрывать соответствующую информацию при просмотре миниатюр изображений в альбоме или на странице подробностей, при просмотре увеличенного изображения (в зависимости от того, расположена та или иная опция в секции «Список» или «Детальный просмотр»).

Эти опции относятся к странице подробного просмотра изображения – «Страница подробностей».

  • Использовать исходное изображение. Если данная опция включена, то RSMediaGallery будет отображать исходное изображение при нажатии на миниатюру этого изображения. Исходное изображение — это то, что Вы загрузили на сервер. Если опция отключена, то компонент галереи для Joomla 3 создаст копию исходного изображения с указанными Вами размерами и отобразит её. Обратите внимание, что если у исходного изображение большое разрешение, то оно может некорректно отображаться на странице сайта.
  • Полный размер. Укажите максимальный размер полного изображения. Если указать максимальную ширину, высота будет рассчитана автоматически и наоборот так, что у изображения будут свои исходные пропорции (соотношение сторон).
  • Разрешить загрузку исходного изображения. Если опция включена, посетители сайта смогут скачивать себе на компьютер исходный файл изображения. Если нет, то его изменённую версию (с размером, указанным в настройке Полный размер).
  • Показывать ссылку на разработчика. Если данная опция включена, внизу галереи будет показана ссылка на сайт разработчика RSMediaGallery.

Галерея для Joomla 3

Модули галереи Joomla 3.х

В состав RSMediaGallery входят четыре модуля:

  1. RSMediaGallery! Advanced Slideshow Module.
  2. RSMediaGallery! Responsive Slideshow Module.
  3. RSMediaGallery! RSShowcase! Module. Обратите внимание, этот модуль доступен отдельно от компонента и является бесплатным.
  4. RSMediaGallery! Slideshow Module.

Отмечу, что некоторые опции этих модулей повторяются от модуля к модулю. Некоторые опции уже были рассмотрены выше в статье для пункта меню Макет альбома. Будем рассматривать только «уникальные» настройки модулей.

RSMediaGallery Advanced Slideshow

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

Модуль галереи Joomla

Рассмотрим некоторые из них более детально.

  • Тип кнопок. Можно выбрать один из четырёх типов кнопок, которыми можно управлять слайд-шоу модуля галереи Joomla. От типа зависит внешний вид и положение кнопок. На рисунке ниже это элемент №1.
  • Эффект слайдера. Доступно около 40 эффектов анимации смены изображений.
  • Автозапуск. Если опция включена, то слайд-шоу в модуле начнётся сразу при появлении страницы сайта.
  • Остановить при наведении курсора. Если опция включена, при наведении курсора мыши на изображение в модуле, слайд-шоу будет остановлено.
  • Интервал. Время в миллисекундах между сменой изображений слайд-шоу. Например, 5000 – 5 секунд.
  • Показать строку прогресса. Отображает строку, которая изменяет свой размер с течением времени, тем самым визуально отображает, через сколько будет сменено изображение. Скорость изменения размера строки зависит от значения, заданного в поле Интервал. На рисунке ниже это элемент №2.
  • Показать Предыдущий и Следующий. Отображает кнопки, позволяющие переключаться между изображениями модуля галереи Joomla. На рисунке ниже это элемент №3.
  • Показать Воспроизведение/Пауза. Отображает кнопки, позволяющие останавливать автоматическую смену изображений слайд-шоу и запускать её. На рисунке ниже это элемент №4.
  • Позиция кнопок Воспроизведение/Пауза. Можно задать одну из пяти позиций расположения кнопки Воспроизведение/Пауза: Центр, Вверху слева, Вверху справа, Внизу слева, Внизу справа.
  • Тип навигации. Позволяет выбрать один из типов навигации по слайд-шоу: Многоточие, Многоточие и миниатюры, Миниатюры, Числа. Можно отключить отображение навигации совсем. На рисунке ниже навигация – это элемент №5.
  • Позиция навигации. Можно задать расположение навигации: Слева, Центр, Справа.
  • Отображать надпись. Позволяет включить или отключить отображение заголовка изображения. На рисунке ниже это элемент №6.
  • Анимация заголовков. Можно задать один из четырёх типов анимации появления заголовка.
  • Количество. Количество изображений, которые будут показаны в цикле слайд-шоу. Из общего числа тех изображений, теги которых Вы выбрали для показа в этом модуле. «0» – без ограничений по количеству.
  • Сделать изображения кликабельными. Если данная опция включена, то по нажатию на то или иное изображение, галерея для Joomla 3 будет открывать указанный в настройках изображения URL-адрес (если он указан).
  • Суффикс CSS-класса модуля. Суффикс CSS-класса модуля, добавляемый к основному имени класса. Это позволяет создать для модуля индивидуальное оформление (дизайн).

Слайд-шоу модуль для Joomla

RSMediaGallery Responsive Slideshow

Пример работы слайд-шоу модуля для Joomla можно просмотреть на сайте разработчика. Основное отличие от предыдущего модуля – поддержка «родного» Bootstrap Joomla. Как следствие – хорошее отображение на различных устройствах (отзывчивый (реагирующий) дизайн). Его настройки приведены на рисунке ниже.

В этой статье есть видео урок по настройки данного модуля (нужно начать смотреть видео с 29:19).

Отзывчивый слайд-шоу модуль

  • Элементов на слайде. Количество одновременно отображаемых изображений на слайде: 1, 2, 3, 4, 6, 12. Пример отображения двух изображений одновременно показан на рисунке ниже.
  • Отображение подписей. При помощи данной опции отзывчивый модуль галереи Joomla позволяет Вам выбрать, на каких устройствах должны показываться подписи рисунков (заголовки, описания). Доступны такие варианты: Все устройства, Телефоны, Планшеты, Телефоны и планшеты, Настольные компьютеры, Настольные компьютеры и планшеты. Так Вы сможете улучшить внешний вид слайд-шоу на маленьких экранах, путём скрытия «лишних» элементов. Данная опция работает, когда опции Показывать название или Показывать описание включены.
  • Тег заголовка. Можно задать, каким тегом (H1-H5) будет выделен заголовок изображения. Эта опция полезны для SEO.

Модуль галереи Joomla Responsive Slideshow

RSMediaGallery RSShowcase

Данный модуль позволяет Вам отображать галерею изображений, которые можно импортировать из компонента RSMediaGallery, Flickr или Pinterest. Пример работы слайд-шоу модуля для Joomla можно просмотреть на сайте разработчика. Настройки модуля разделены на три вкладки (помимо тех настроек модуля, которые присутствуют в Joomla по умолчанию):

  1. Модуль.
  2. Настройки RSMediaGallery. Тут Вы можете указать теги изображений, которые должны подгружаться из компонента RSMediaGallery.
  3. Настройки Flickr. Если хотите подгружать изображения с фотохостинга Flickr, нужно задать значение таких опций как: API ключ, ID пользователя, Теги. Значения всех этих настроек можно узнать в фотохостинге.
  4. Настройки Pinterest. Если хотите подгружать изображения с фотохостинга Pinterest, нужно задать значение таких опций как: Имя пользователя, Имя доски. Значения всех этих настроек можно узнать в фотохостинге.

Настройки внешнего вида самого модуля, отображаемого у Вас на сайте собраны на вкладке Модуль (рисунок ниже). А в этой статье есть видео урок по работе с данным модулем (нужно начать смотреть с 09:16).

Модуль RSMediaGallery RSShowcase

  • Источник. Даёт возможность указать один из источников погрузки изображений в модуль: RSMediaGallery, Flickr, Pinterest.
  • Лимит. Количество изображений, отображаемое в модуле (рисунок ниже).

RSMediaGallery RSShowcase

  • Размер миниатюр. Размер квадратной миниатюры каждого изображения (по ширине в пикселях).
  • Открывать в. Можно указать, что нужно делать при нажатии на миниатюру в модуле. Открыть во всплывающем окне с эффектом Lightbox (рисунок ниже) или открыть URL-адрес изображения.
  • Показывать нумерацию. Если для опции Открывать в выбран параметр Всплывающий lightbox, можно отобразить\скрыть порядковый номер изображения из всего количества изображений, который будет показан под увеличенным изображением справа (рисунок ниже).

Окно с эффектом Lightbox

RSMediaGallery Slideshow

Пример работы слайд-шоу модуля для Joomla можно просмотреть на сайте разработчика. Рассмотрим его настройки (рисунок ниже).

Модуль RSMediaGallery Slideshow

  • Использовать фиксированную ширину. Если опция включена, область модуля будет ограничена значением по ширине, заданным в настройках опции Фиксированная ширина. Если нет, ширина будет зависеть от ширины позиции шаблона Joomla, в которой опубликован модуль.
  • Показывать элементы управления. Отображает элементы управления слайд-шоу (стрелки «Вперёд» и «Назад»), при помощи которых пользователи могут сами перелистывать изображения. На рисунке ниже это элемент №1.
  • Отображать пагинацию. Отображает элемент управления, аналогичный постраничной навигации (пагинации), нажимая на цифры, пользователи могут переключаться между изображениями. На рисунке ниже это элемент №2.
  • Позиция пагинации. Положение пагинации относительно изображения. Доступны такие параметры: Вверху, за пределами; Вверху, внутри; Внизу, внутри; Внизу, за пределами.
  • Выравнивание текста пагинации. Можно выровнять пагинацию относительно изображения По центру, Слева или Справа.
  • Тип пагинации. Доступно два типа пагинации: Полная и Короткая. На рисунке ниже показана Полная. Короткая – отображение номера текущего слайда и общего числа. Например, 10/20 (десятый слайд из двадцати)
  • Начинать со случайного слайда. Модуль слайд-шоу Joomla будет начинать демонстрацию изображений со случайного.
  • Повторять слайды. Если включено, то слайды будут повторяться с первого по достижению последнего.
  • Режим. Тип анимации смены слайдов: Горизонтально, Вертикально, Затухание.
  • Замедление. Эффект смены слайда. Всего около тридцати эффектов.
  • Скорость. Скорость эффектов смены слайдов.
  • Интервал. Интервал времени между слайдами.
  • Позиция изображения. Выравнивание изображения внутри модуля галереи Joomla.
  • Использовать границу изображений. Позволяет отобразить или скрыть границу вокруг изображения.
  • Использовать URL. Если опция включена, то по нажатию на изображение пользователь перейдёт к странице, содержащей файл изображения. Если отключена, нажать на изображение нельзя.

RSMediaGallery Slideshow

В следующей статье «Обзор RSMediaGallery. Плагин галереи для Joomla 3» мы закончим обзор данного расширения и поговорим о системном плагине и плагине контента, рассмотрим рекомендации касательно изображений и пошаговую инструкцию по созданию галереи в RSMediaGallery.

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

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

 

Полезные ссылки: