Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Бесплатный слайдер для вашего сайта - DJ-ImageSlider

  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 по умолчанию.

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.

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

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

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