ARI Cloud Carousel — карусель изображений для Joomla 2.5.

image

03.04.12
Comments 14

Карусель изображенийСегодня после небольшого перерыва мы вновь приступаем к изучению CMS Joomla. В данном уроке мы научимся делать красивую карусель изображений для Joomla 2.5 с помощью модуля ARI Cloud Carousel. Этот модуль не использует флэш, работает на javascript и css, при этом выглядит очень эффектно. Посмотреть работу данного расширения можно здесь. ARI Cloud Carousel имеет много настроек для того чтобы вы смогли подогнать карусель под свои нужды, подробнее о некоторых настройках вы узнаете из этого урока.

Скачать модуль можете с официального сайта разработчика. После установите этот модуль через менеджер расширений.

Приступим к настройке модуля. После включения пройдите в раздел «Разширения  –> Менеджер модулей» где должен появиться модуль карусели изображений ARI Cloud Carousel. По умолчанию он выключен, включите его и пройдите к его настройкам кликнув по нему.

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

  • Название: Давайте назовем модуль «Карусель».
  • Показать заголовок: Скрыть.
  • Выбор позиции: Привычное место для каруселей подобного типа это шапка сайта, поэтому по возможности выберите позицию в верхней части шаблона.

Не забудьте привязать модуль ко всем страницам вашего сайта в блоке «Привязка к пунктам меню».

Теперь перейдем к основным параметрам модуля.

Блок настроек «Styles parameters».

Здесь нам нужно задать высоту и ширину нашей карусели.

  • Width: 800
  • Height: 800

Блок настроек «Carousel parameters (параметры карусели)»

  • Reflection height: В этом поле можно задать высоту или убрать эффект отражения слайда снизу, для этого просто укажите в этом поле значение 0.
  • Auto rotate: Если установить значение этого поля left или right то карусель будет вращаться автоматически влево или вправо. Вращение прекращается , когда посетитель сайта наводит курсор мышки на карусель и возобновляется курсор перемещается на другие области на сайте.
  • Mouse wheel support :  Вращение карусели при помощи прокрутки колесика мышки
  • Reverse mouse wheel : Этот параметр позволяет сместить направление вращения карусели с помощью мыши в обратную сторону.
  • Show navigation: Здесь нам нужно выбрать показывать кнопки навигации или нет, я их отключил, так как они не всегда уместны.

Блок настроек «Slides parameters (параметры слайдов)».

  • Image path: В этой текстовой области вам нужно указать относительные пути к папке с изображениями или же к самим изображениям которые вы хотите вывести в карусель, каждое новое значение нужно вводить с новой строки.
  • Thumbnail width: Ширина миниатюры 200
  • Thumbnail height: Высота миниатюры 250

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

Tags: 

Комментарии

дима 21.04.12

А на локальном хосте она работает?
У меня нет. не получается запустить.

admin 22.04.12

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

дима 22.04.12

Спасибо.Вопрос снят дело было в шаблоне.

дима 22.04.12

плюс конфликт с Simple Image Gallery PRO

Алексей 17.05.12

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

Роман 06.07.12

В настройках модуля где в первых строчках есть выбор локалки. Надо его включть. Тогда будет работать на локале

Алексей 11.07.12

Скажите, возможно ли в этом модуле сделать так, чтобы когда происходило нажатие на одно из изображений, то происходил переход на страницу сайта, а не открывалась просто картинка?

admin 11.07.12

Сейчас так точно не могу сказать, так как уже не помню всех настроек, но думаю что да.

Владимир 06.09.12

Спасибо огромное!!! Отличный слайдер!!!

ira 20.09.12

Добрый день) Отличный модуль, но вот что-то и у меня не получается ссылки привязать, лишь открывание картинки при клике. Может Вы уже разобрались и подскажите?

admin 20.09.12

Честно сказать я уже и не помню что там да как.

Евгений 13.01.14

При подключении модуля возникает ошибка JFolder: :files: Путь ведёт не к каталогу. Путь: home/имя_сайта/public_html почему?

Ирина 12.03.14

Подскажите, пожалуйста, как сделать описание к изображениям?

Sollo 11.04.14

Для добавления к изображениям описания, необходимо создать .ini файл (для отображения русских символов использовать кодировку UTF-8) и положить его в папку с изображениями, название .ini файла необходимо вписать в поле Description file.
Образец .ini файла ниже:

[TITLE]
bread.jpg=Хлеб
coffee.jpg=Кофе
milk.jpg=Молоко
bun.jpg=Кекс
[DESCRIPTION]
bread.jpg=Вкусный мягкий хлеб
coffee.jpg=Чашечка ароматного кофе
milk.jpg=Свежеподоенное молочко
bun.jpg=Ароматный душистый кекс
[LINK]
coffee.jpg=http://www.mobmore.ru

Комментировать