1. Установка DJ Image Slider
2. Конфигурация компонента DJ Image Slider
3. Конфигурация модуля DJ-ImageSlider

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

Мой любимый бесплатный слайдер - DJ-ImageSlider , который можно скачать на сайте Dj-Extensions.com , Я описал это некоторое время назад в статье: DJ Image Slider ,

В настоящее время существует обновленная версия 3 этого бесплатного расширения, которое содержит множество изменений, таких как:

• выполнять эффекты в CSS3 вместо JavaScript;
• улучшение отзывчивости;
• улучшена поддержка сенсорных устройств;
• возможность создавать собственные шаблоны (так называемая тема);
• возможность отображения изображений в LightBox;
• расширенный список эффектов слайдов

Благодаря этому расширению вы можете выделить самый последний или самый важный контент вашего сайта, например, наиболее важные аспекты вашего бизнеса. DJ Image Slider позволяет отображать графику с заголовком и кратким описанием, которое можно связать с любым элементом меню, статьей или любым URL-адресом.

Я покажу вам, как сделать это шаг за шагом на основе Joomla! CMS, установленной по умолчанию ! 3.4 с использованием опции: Joomla testing - пример данных на английском языке (ГБ) и с шаблоном protostar по умолчанию.

По умолчанию сайт без слайдера выглядит довольно скромно:

Установка DJ Image Slider

Чтобы загрузить установочный файл, посетите: dj-extensions.com , затем в меню Показать расширения и в разделе БЕСПЛАТНЫЕ ДОПОЛНЕНИЯ нажмите DJ-IMageSlider .

скачать DJ ImageSlider и сохранить в любом месте на вашем компьютере. Затем войдите в серверную часть своего сайта и установите загруженный файл. Установочный файл содержит:

• Компонент DJ Image Image Slider ;
• DJ Image Image Slider ;

После правильной установки вы увидите экран, подобный показанному ниже:

Теперь компонент отображается в меню « Компоненты» , а модули отображаются в диспетчере модулей (меню « Расширения / Модули» ).

Конфигурация компонента DJ Image Slider

Щелкните в пункте меню « Компоненты» : DJ ImageSlider, чтобы отобразить рабочий стол этого компонента.

Теперь нажмите кнопку « Новая категория» , чтобы создать новую категорию, которой будут назначены слайды.

В поле « Заголовок» введите название категории, а в поле « Описание» при желании можно ввести более подробную информацию о создаваемой категории. Наконец, нажмите кнопку Сохранить и закрыть .

Теперь нажмите на элемент меню « Слайды» слева (или выберите меню « Расширения» , покажите элемент DJ-ImageSlider и нажмите « Слайды» ), затем нажмите кнопку « Создать» . Вы также можете нажать кнопку « Новый слайд» на рабочем столе.

В поле « Заголовок» введите заголовок слайда, в поле « Категория» выберите категорию, которой хотите назначить слайд. Рядом с полем « Изображение» нажмите кнопку « Выбрать» , чтобы назначить графический файл созданному слайду.

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

В поле « Описание слайда» введите краткое описание создаваемого слайда. Я предполагаю, что этот слайд побудит вас прочитать статью. Поэтому в поле « Описание слайда» я буду размещать одно или два предложения, побуждающие прочитать мою статью. Следуя моим предположениям, в поле Тип ссылки выберите список элементов: Статья , в поле Описание нажмите кнопку « Выбрать / Изменить» , а затем в модальном окне щелкните заголовок выбранной статьи.

После выполнения всех настроек нажмите кнопку « Сохранить и закрыть» .

Аналогичным образом добавьте как минимум два слайда! Теперь в окне слайдов вы увидите список слайдов, которые вы создали:

Чтобы слайды, определенные в компоненте DJ-ImageSlider, были видны на вашем сайте, вы должны разместить их в модуле!

Для этого используйте модуль DJ-ImageSlider.

Конфигурация модуля DJ-ImageSlider

Если вы хотите иметь польскоязычный интерфейс модуля DJ-ImageSlider , я подготовил перевод специально для вас ;-)

Все, что вам нужно сделать, это загрузить файл: pl-PL.mod_djimageslider.ini и скопировать его в папку : folder_with your_file_files \ language \ en-GB . Теперь модуль DJ-ImageSlider уже будет иметь польскоязычный интерфейс ;-).

Нажмите « Модули» в меню « Расширения» , а затем выберите имя модуля: DJ-ImageSlider .

В поле Заголовок (1) измените или оставьте имя модуля, в поле Показать заголовок (2) решите, хотите ли вы, чтобы имя модуля было видно на странице. В поле Position (3) выберите позицию, в которой будет отображаться ваш ползунок. В случае шаблона protostar по умолчанию я выбираю элемент с именем: banner . В поле Статус (4) выберите Опубликован из списка.

Время для настроек в разделе Модуль DJ-ImageSlider . В поле: Источник слайдера (5) выберите из списка: компонент K для отображения слайдов, созданных с помощью компонента DJ-ImageSlider , а в поле «Тип слайдера» (6) выберите тип слайдера: горизонтальный ( горизонтальный ), вертикальный ( вертикальный ) или затухание (тогда одновременно может отображаться только один рисунок). В поле Шаблон (7) выберите шаблон (внешний вид) из списка для созданного слайдера. По умолчанию существует только одно имя: default. Вы можете создать свой собственный шаблон, скопировав существующий шаблон и изменив имя папки по умолчанию, расположенной в папке: / modules / mod_djimageslider / themes /, или скопировав файл djimageslider.css из шаблона по умолчанию в папку: / templates / twoj_szablon / css / и установив шаблон как - перезаписать из шаблона . В поле Ссылка графика (8) вы можете решить, должна ли графика быть ссылкой на местоположение, определенное во время создания слайда в компоненте DJ ImageSlider (позиция: гиперссылка ) или нет (элемент Нет гиперссылки ). Вы также можете установить пункт « Открыть графику» во всплывающем окне «Magnific / Slimbox», чтобы при нажатии на выбранную графику он открывался в модальном окне.

Если в поле « Источник папки» выбран источник папки , в разделе « ПАПКА КАК ИСТОЧНИК: НАСТРОЙКИ» в поле « Папка с графикой» введите путь к папке с изображениями, которые будут отображаться с помощью ползунка. В поле « Ссылка» введите URL-адрес, который открывается после нажатия на изображение.

Если элемент « Компонент» выбран в поле « Источник» ползунка , перейдите к настройкам в КОМПОНЕНТЕ КАК ИСТОЧНИК: НАСТРОЙКИ . В поле Категория слайдов (9) вы выбираете категорию слайдов, созданную в компоненте DJ-ImageSlider , в поле Показать заголовок (10) в зависимости от того, хотите ли вы отображать заголовок слайда, выберите соответствующее поле. В поле « Показать описание (11)» вы решаете, будет ли на слайдере отображаться описание слайда, а в поле « Показать больше» (12) укажите, следует ли вам видеть ссылку со знаком « Читать далее» . Если вы хотите изменить текст этой кнопки, вы можете ввести свой собственный текст в текстовое поле вместо «Читать дальше» !

Используя опцию « Заголовок» в качестве ссылки (13), вы определяете, должна ли заголовок слайда быть ссылкой на местоположение, ранее определенное в компоненте DJ-ImageSlider , но, используя опцию « Описание» в качестве ссылки (14), вы решаете, должен ли текст описания слайда быть ссылкой. В поле « Ограничение текста описания» вы можете ввести максимальное количество символов, которое может иметь описание слайда. Это особенно важно, если вы хотите, например, иметь одинаковую высоту всех описаний.

Теперь перейдите к настройкам в разделе ОСНОВНЫЕ НАСТРОЙКИ СЛАЙДЕРА .

Если вы хотите, чтобы ползунок заполнил всю ширину контейнера (положение шаблона), в котором он находится, независимо от его определенной ширины, то в поле Полная ширина ползунка (15) нажмите кнопку Да . Тогда единственным ограничением является ширина контейнера, в котором был опубликован слайдер.

В поле « Ширина слайда» (16) задайте ширину ползунка, в поле « Высота слайда» (17) введите высоту ползунка. Используя список в поле « Соответствовать размеру графики» (18), вы решаете, как графика должна соответствовать размеру ползунка. Если вы хотите, чтобы графика слайдера центрировалась вертикально, нажмите кнопку « Да» в поле « Вертикальное центрирование» (19). В поле Number of visible graphics (20) введите количество одновременно отображаемых графических изображений в ползунке. Поле Расстояние между графиками (21) используется для определения интервала (в пикселях) между отображаемой графикой, а в поле Макс. Графика (22) введите максимальное количество графиков, которые будут загружены вместе с ползунком. Используйте поле « Сортировка» (23), чтобы выбрать способ сортировки слайдов: по имени / порядку (« Имя файла / порядок» ) или « Случайно» .

В поле « Использовать CSS3 (24)» вы можете решить, хотите ли вы, чтобы эффекты перехода слайдов создавались с использованием CSS или JavaScript.

Следующие четыре поля определяют элементы навигации ползунка. С помощью поля AutoPlay (25) вы можете решить, будут ли слайды автоматически прокручиваться при отображении страницы ( Да ) или нет ( Нет опции). В поле Показать воспроизведение / пауза (26) вы определяете, должна ли кнопка воспроизведения / паузы отображаться на слайдере. По умолчанию эта кнопка видна при наведении мыши на ползунок. В поле Показать следующий / предыдущий (27) вы указываете, должны ли следующие , предыдущие кнопки отображаться на слайдере. По умолчанию эти кнопки видны при наведении мыши на ползунок. В поле Отображать теги (точки, числа) (28) вы решаете, должны ли теги, представляющие отдельные слайды, отображаться на слайдере.

Если вы определяете настройки, как я (см. Предыдущий рисунок) и сохраняете изменения, вы получите эффект, подобный показанному на рисунке ниже:

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

В модуле DJ-ImageSlider вы также можете использовать вкладку Customize Slider, предоставляющую опции, с помощью которых вы можете установить дополнительные элементы слайдера, расположенные в трех разделах:

• РЕГУЛИРУЙТЕ ОПЦИИ СЛАЙДОВ
  • Ширина описания - ширина поля с описанием слайда;
  • Vertical description position - позиция поля с описанием в пикселях (от нижнего края рисунка);
  • Горизонтальное положение описания - положение поля с описанием в пикселях (от левого края графика);
• РЕГУЛИРОВАТЬ КНОПКИ
  • Кнопка «Предыдущий» - путь к собственному графику, представляющему кнопку « Предыдущий» ;
  • Кнопка «Далее» - путь к собственному графику, представляющему кнопку «Далее»;
  • Кнопка Play - путь к собственному графику, представляющему кнопку Play;
  • Кнопка Пауза - путь к собственному графику, представляющему кнопку Пауза;
  • Положение панели навигации по вертикали - положение кнопок навигации ползунка (в пикселях) относительно верхнего края графика;
  • Положение панели навигации по горизонтали - положение кнопок навигации ползунка (в пикселях) относительно боковых краев ползунка. Вы можете использовать отрицательные значения, чтобы кнопки навигации появлялись за пределами ползунка;
  • Стили маркеров - вы можете выбрать, отмечать ли теги, представляющие отдельные слайды, в виде точек или чисел;
• ВАРИАНТЫ ДЛЯ ЭФФЕКТОВ СЛАЙДОВ
  • Эффект слайда используется для определения эффектов перехода между слайдами.
  • Тип слайд-эффекта;
  • Время показа слайдов - длина показа слайдов (в миллисекундах);
  • Задержка между слайдами - длина промежутка между слайдами (в миллисекундах);
  • Время задержки загрузки слайда;

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

Теперь посмотрим, как выглядит слайдер после изменений:

А теперь посмотрим, один и тот же слайдер в разных конфигурациях:

Правда, что касается бесплатного инструмента, у DJ-IMageSlider есть много возможностей?

Если этого вам недостаточно, вы найдете еще больше возможностей в коммерческом расширении DJ MediaTools что позволяет создавать слайдеры и галереи, загружая данные из статей, папок, Youtube, Vimeo и других компонентов, таких как K2, DJ Classifirlds , DJ-Catalog или Virtuemart.

Хотите получать уведомления о моих следующих записях или проектах?

Подпишитесь на рассылку!

Похожие

Комментарии