Обзор DJ-ImageSlider. Бесплатный слайдер для Joomla

• Тип – слайдер Джумла.

• Видеообзор.
• Основные возможности и особенности.
• Слайды.
• Категории.
• Модуль (настройка DJ-ImageSlider).

DJ-ImageSlider – это бесплатный адаптивный русскоязычный слайдер Joomla с возможностью добавления заголовка, описания и ссылки на другую страницу для каждого слайда в отдельности.

Видеообзор

• Категории слайдов – с 00:01:18.
• Слайды – с 00:02:24.
• Настройка модуля DJ-ImageSlider – с 00:05:35.

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки Вы можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

Ссылки из видео:

• «Обзор DJ-MediaTools Joomla 3. Слайдшоу».

Расширение может отображать изображения из папки на сервере или из компонента. Модуль адаптирован под тачскрины. К изображениям можно добавлять атрибуты Alt и Title, что может улучшить понимание поисковыми системами того, что именно изображено на картинках. Слайдер оснащён анимацией на базе CSS3. По сути, DJ-ImageSlider – это урезанная версия более мощного компонента галереи DJ-MediaTools.

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

Интерфейсы административной части компонента и модуля весьма простые. «Живой» пример слайдера можно посмотреть на демонстрационном сайте разработчика.

В обзоре будет участвовать последняя, на момент написания статьи (20.05.2019), русскоязычная версия DJ-ImageSlider 4.1.beta в Joomla 3.9.6. Бесплатный шаблон фронтальной части сайта – JM Services 1.0.5. Демонстрационный сайт (англоязычный) на базе быстрого старта шаблона JM Services 1.0.5.

На рисунке ниже показан пример модуля DJ-ImageSlider.

На официальном сайте расширений Joomla 192 отзыва, расширение добавлено 18 ноября 2014.

• Общий рейтинг – 5 из 5.
• Функциональность – 5 из 5.
• Простота использования – 5 из 5.
• Поддержка – 5 из 5.
• Документация – 5 из 5.

Основные возможности и особенности

• Адаптивный дизайн, поддержка тачскринов.
• Наличие компонента и модуля. В компоненте можно создавать категории и слайды, а также управлять ими. Модуль служит для отображения слайд шоу на сайте.
• Модуль позволяет отображать изображения из компонента DJ-ImageSlider и просто из папки на хостинге. Можно создавать сколько угодно модулей и у каждого могут быть разные настройки.
• Возможность группировки слайдов по категориям.
• Вывод слайдера в модуле.
• Возможность добавление атрибутов Alt и Title. Улучшает SEO.
• Анимация на базе CSS3 и HTML 12 видов анимации.
• У каждого слайда может быть заголовок, описание и ссылка на другую страницу (материал, пункт меню или URL).
• Можно настроить дату/время начала и окончания публикации каждого слайда в отдельности.
• Отображение увеличенной версии картинки (с заголовком и описанием) по нажатию на уменьшенную версию.
• Возможность задавать размер и позицию области описания слайдов.
• Автоматическое воспроизведение слайдов. Бесконечно или разово.
• Возможность сортировки порядка следования слайдов вручную в админке. Просто перетаскивая их мышью.
• Настройки времени показа и времени анимации смены страницы.
• Включение/отключение показа элементов управления слайдами (кнопки «Вперёд», «Назад», «Пауза», «Воспроизведение» и т.д.). Возможность отображения кнопок по наведению курсора мыши на слайд.
• Возможность загрузки изображений для кнопок Вперёд», «Назад», «Пауза», «Воспроизведение».
• Соответствие рекомендациям WCAG 2.0 раздел 508 (адаптация сайтов для инвалидов). Возможность навигации по слайдам с клавиатуры. Это можно отключить, при необходимости.
• Поддержка RTL (письменность с права на лево). Включая направление смещения слайдов.
• Темы оформления слайдов, с возможностью создания собственных.
• Поддержка Joomla 2.5 - 4.
• Переведён на русский, английский, французский, немецкий, польский, португальский и другие языки.
• Документация и техническая поддержка на английском языке. Есть видео уроки на английском языке.
• Поддержка мультиязычности при помощи Falang.
• Поддержка популярных браузеров: Internet Explorer 9 и новее, Mozilla Firefox 10 и новее, Safari 3 и новее, Google Chrome 8 и новее, Opera 9 и новее. А также MS Edge, Яндекс.Браузер и мобильные браузеры.

Обратите внимание, что разработчики тестируют и исправляют найденные ошибки модуля (в последних его версиях) только для популярных браузеров актуальных версий. Это значит, что DJ-ImageSlider 4.1 может не работать в Google Chrome 8, но он работает в Google Chrome 74. А вот старые версии DJ-ImageSlider работают и в Google Chrome 8.

У DJ-ImageSlider, в отличие от его расширенной версии DJ-MediaTools, есть одна неудобная особенность. DJ-ImageSlider не создаёт миниатюры изображений, а выводит картинки как есть, но масштабируя до нужных размеров. То есть, если Вы загрузите картинку 1920х1080, а на сайте для неё отведено место 700х394, то DJ-ImageSlider отобразит картинку 1920х1080, но в масштабе 700х394. С точки зрения оптимизации скорости загрузки сайта – это не очень хорошо. Для решения этой ситуации Вам придётся предварительно, вручную, изменить размер картинки до нужного, например, 700х394, а потом только выгружать на сайт. Это позволит отображать картинку без масштабирования и ускорит процесс загрузки страницы сайта. Такой подход особо актуален в условиях не слишком быстрого мобильного интернета.

Слайды

Модуль DJ-ImageSlider позволяет отображать слайды из папки на сервере или из компонента DJ-ImageSlider. Фактически, все изображения находятся в папке на сервере. Но если Вам нужно добавить отдельное описание, заголовок, ALT, ссылку и т.д. к каждому слайду, то изображения нужно добавлять по одному в компоненте DJ-ImageSlider.

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

Можете ознакомиться с рекомендациями по оптимизации изображений и с рекомендациями по именам файлов/папок.

В разделе Слайды (рисунок ниже) собраны инструменты, позволяющие управлять слайдами (поиск, фильтрация, сортировка, создание, удаление и т.д.). Если Вы хотите поменять порядок следования картинок в слайд-шоу, то просто перетащите их мышью за иконку 4-х направленной стрелочки в первом столбце таблицы со слайдами.

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

Описание слайдов можно форматировать и дополнять изображениями, таблицами и т.д..

В области Настройки публикации можно задать начало и окончание публикации для каждого отдельного слайда. Удобно, например, для слайдов с акциями.

В области Настройки ссылки можно активировать переход по нажатию на слайд. В качестве ссылки может выступать Пункт меню, URL адрес или Материал. При помощи опции Целевое окно можно настроить открытие ссылки в новой вкладке, а при помощи Атрибут REL можно, например, добавить «nofollow» для внешних ссылок. Опция Элементы ссылок позволит сделать кликабельным само изображение слайда, кнопку «Подробнее» или и то, и другое. Если выбрано Изображение, то кнопка Подробнее не отображается.

В области Атрибуты изображения можно задать атрибуты ALT и TITLE. Это может помочь поисковым системам лучше понимать, что именно изображено у Вас на слайде. Если не заполнять ALT, то будет использоваться заголовок изображения.

Категории

В данном разделе (рисунок ниже) можно создать категории для слайдов. Это нужно сделать до создания самих слайдов.

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

Модуль (настройка DJ-ImageSlider)

Вся настройка DJ-ImageSlider, по сути, происходит в модуле (рисунок ниже).

Кроме обычных, для всех модулей Joomla, настроек у DJ-ImageSlider есть свои специфические, разделённые на две вкладки.

1. Модуль.
2. Настройки слайдера.

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

Модуль (рисунок выше). Эта вкладка содержит базовые настройки слайдера.

• Источник слайдов. Компонент или Папка. При выборе Компонент, можно будет указать категорию слайдов, которую Вы создали в компоненте DJ-ImageSlider. Выбирая Папка, Вы сможете указать путь к папке на хостинге. Также можно указать URL адрес, на который будет переходить пользователь по нажатию на слайд.
• Тип слайдера. Тип смены слайдов (горизонтально, вертикально, затухание).
• Полная ширина слайда. Отображает слайдер во всю ширину окна браузера. Это может не сработать, если позиция модуля шаблона ограничивается по ширине.

Настройки слайдера (рисунок ниже).

• Изображение как ссылка. Когда выбрано Гиперссылка, то по нажатию на изображение будет происходит переход по указанному адресу (если Вы его указали). Когда выбрано Всплывающее окно, то по нажатию на изображение будет появляться поп-ап окно с увеличенной версией изображения, заголовком и его описанием (если они заданы).
• Область Настройки описания слайда. Содержит опции для включения/отключения отображения заголовка, описания и кнопки Подробнее. Также можно задать ограничение на количество символов описания и другие опции для этих элементов.
• Область Настройки шрифтов слайда. Содержит опции для настройки внешнего вида заголовка, описания и кнопки Подробнее (шрифты, цвета).
• Область Описание слайдов: настройки. Позволяет настроить саму область описания слайда.
• Область Кнопки: настройки. Позволяет включить/отключить кнопки воспроизведения и паузы слайд-шоу, кнопки навигации, сменить тип индикатора слайдов (точки/цифры) и его положения. Плюс, можно указать свои изображения для кнопок.
• Область Эффекты слайдера: настройки. Содержит опции для настройки эффектов анимации смены слайдов. Подробнее об этом можно прочесть тут (на англ.). Доступно 12 эффектов и возможность конфигурации времени анимации.

Надеюсь, что данная статья и видеообзор помогли Вам в вопросе выбора бесплатного слайдера для Joomla и его настройки. Напомню, что DJ-ImageSlider – это урезанная версия DJ-MediaTools. Если Вам нужно больше возможностей, можете рассмотреть DJ-MediaTools в качестве альтернативы.

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

Автор статьи – Хорошевский Алексей

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Контакты: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Социальные сети: LinkedIn Facebook YouTube (Twitter) Публикации и работа: Google Академия Scopus Upwork Freelance.ua

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

• Официальный сайт DJ-ImageSlider.