• Главная»
  • Уроки»
  • Joomla!»
  • Установка и настройка интерактивного модуля галереи Art Image Cycle для Joomla 1.5.xx

Установка и настройка интерактивного модуля галереи Art Image Cycle для Joomla 1.5.xx

В данном уроке мы научимся использовать красивый модуль слайд-шоу для CMS Joomla 1.5.xx  Art Image Cycle

demosourse

Для начала нам нужно установить модуль:

Расширения (рис.1) > Установить/Удалить (рис.2) > Выберите файл (рис.3)  > [Выбираем  архив (.zip)] (рис.4)  > Загрузить модуль и установить (рис.5)

Расширения (рис.1)

Изображение1

Установить/Удалить (рис.2)

Изображение2

Выберите файл(рис.3)

Изображение3

[Выбираем  архив (.zip)] (рис.4)

Изображение4

Загрузить модуль и установить (рис.5)

Изображение5

После установки мы увидим надпись “Модуль успешно установлен

Далее мы определяемся в каком месте он будет находится (module|модуль|позиция). Это можно сделать нехитрым дописыванием в строку адреса сайта /?tp=1.

Пример: http://www.(ваш сайт).com/?tp=1 (рис.6)

Изображение6

Далее мы увидим какие модульные позиции у нас есть.
В случае с http://www.joomla.org мы будем видеть: (рис.7)

Изображение7

После того как мы определились с позицией приступаем к самому интересному этапу настройке модуля.

Сначала, находим сам модуль.

Расширения (рис.1) > Менеджер модулей (рис.8) > [Ищем сам модуль] (рис.9)  > [Выбираем   модуль ]

Расширения (рис.1)

Изображение1

Менеджер модулей (рис.8)

Изображение8

[Ищем сам модуль] (рис.9)

Изображение9

После этого, непосредственно приступаем к настройке.

Изображение10

Мы имеем поля:

Подробности

Тип модуля: mod_artimagecycle – системное название модуля
Заголовок: Art Image Cycle – данный заголовок отображается в названии модуля в админ панели (рис.9) и на сайте (рис.11)

В админ панели (рис.9)

Изображение9

На сайте (Лицевая панель)(рис.11)

Изобоажение11

Показать заголовок:   (да)  (нет)  - данный пункт предлагает включить отключить заголовок на сайте  ДА (рис.11)  НЕТ (рис.12)

ДА (рис.11)

Изобоажение11

НЕТ (рис.12)

Изображение12

Включен: (да) (нет)я думаю данная опция не требует комментария

Позиция:  - по умолчанию стоит позиция left . В этом поле мы указываем позицию

размещения модуля (рис.7).

Позиция модуля (рис.7)

Изображение7

Порядок: - порядок отображения модуля в списке в админ панели

Доступ: - включение - отключение доступа (зарегистрированным, не зарегистрированным, специальным)
ID:  идетенфикатор модуля

Назначение меню

Меню: - фильтр страниц на которых будет отображаться модуль

Выбор меню: - фильтр (точный выбор страниц) работает только при включённом режиме (выбрать из списка)

Параметры

Path (Путь)путь к папке с изображениями (родительская папка images/)

Пример: images/stories/foto/(вложенные фото .jpg .png)

Материалыданная опция позволяет настроить внешний вид самого модуля.

В нашем модуле есть СSS стили через которое мы и будем настраивать внешний вид модуля

.pics

{ height: 180px; width: 180px; padding:0; margin:0; overflow: hidden }

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

.pics img

 { height: 150px; width: 150px; padding: 15px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
background-color  - Определяет цвет фона элемента.
moz-border-radius - Устанавливает радиус скругления уголков рамки для Mozilla
webkit-border-radius - Устанавливает радиус скругления уголков рамки для Webkit браузеров

EffectВыбираем эффект смены картинок  (выпадающий список)

Timeoutвремя задержки одной картинки (указывается в миллисекундах/ms)

Transition speedвремя смены картинок (Effect)  (указывается в миллисекундах/ms)

Load jQuery libraryзагрузка библиотеки jQuery

Ну вот и все, мы научились настраивать и использовать модуль Art Image Cycle

Спасибо за внимание!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: ruseller.com
Перевел: Буров Александр
Урок создан: 15 Января 2011
Просмотров: 41280
Правила перепечатки


5 последних уроков рубрики "Joomla!"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 15 Января 2011 18:13
    Titan11
    спасибо за урок!!!
  • 16 Января 2011 14:58
    Stas Bolsun
    ага
  • 16 Января 2011 21:37
    KNOPPIX
    Вот побольше бы уроков по joomla!
    • 17 Января 2011 08:48
      sdbeet
      Будет больше уроков!
      • 17 Января 2011 20:51
        KNOPPIX
        Александр, я конечно не знаю на сколько это сложно для joomla, но с DEMO гараздо круче, к этому уроку я нашёл в инете: http://demo.artetics.com/index.php?option=com_content&view=article&id=144&Itemid=157
        • 17 Января 2011 21:46
          sdbeet
          Добавил ссылку с DEMO Спасибо за замечание
  • 17 Января 2011 11:04
    Nishtiak
    Спасибо, согласен по больше бы для Joomla
  • 17 Января 2011 12:41
    graft
    Спасибо, классный урок, а могли бы вы записать или напечатать урок по созданию шаблона для joomla с нуля?
    • 17 Января 2011 13:35
      sdbeet
      Если это Вам интересно, то я постараюсь написать урок в ближайшое время.
      • 17 Января 2011 17:50
        graft
        Было бы здорово))
      • 18 Января 2011 18:17
        KNOPPIX
        +1
  • 22 Января 2011 10:21
    anatoli2010
    "Path (Путь) – путь к папке с изображениями (родительская папка images/) Пример: images/stories/foto/(вложенные фото .jpg .png)" Указываю путь к фото таким образом, но вместо изображения надпись "image". Тип файла фото ipg. Что нужно сделать, что бы появилось изображение. Заранее благодарен.
    • 23 Января 2011 13:20
      sdbeet
      Попробуйте в конце поставить СЛЕШ
  • 24 Января 2011 01:34
    Martoxa
    У меня тоже в 'мазиле' вместо картинок надпись image? В 'эксплорере' всё нормуль?? СЛЭШ не помогает, может кто знает как решить проблему??!!
  • 24 Января 2011 02:25
    Martoxa
    получилось, cлэши не в ту сторону стояли:)) За урок спасибо!!!!!!!!!!!
  • 6 Апреля 2011 12:22
    truand
    Спасибо за урок! я новичок в joomla так скажем! установил расширение, всё настроил а картинки обновляться не хотят ни с одним эффектом! только когда обновляешь страницу, картинка меняется! подскажите может быть я что нибудь упустил?
  • 6 Апреля 2011 12:44
    truand
    Заработало, но только отдельно от P30 Bubblemenu, совместно почему то не хочет работать
  • 6 Апреля 2011 21:13
    andreichesno
    У меня при включение модуля,сайт перестает отображаться в браузере, вместо него ошибка: Could not open a directory stream for /home/v/virealru/public_html//home/v/virealru/public_html/public_html / images /stories /Art Image/// Подскажите, пожалуйста почему не работает?
  • 6 Апреля 2011 22:05
    andreichesno
    Прописал путь к папке с фотками images/stories/art_gallery/ и все ЗАРАБОТАЛО!!!
  • 8 Июня 2011 15:19
    danila_m
    модуль добавил в материал на главную страницу. Подскажите пожалуйста, а как сделать чтобы текст обтекал модуль справа или слева ? т.к. по умолчанию модуль занимает всю полосу по высоте изображения, и текст можно разместить только ниже. Так же хочу разместить два модуля рядом в материале через копирование в менеджере модулей, но в результате оба модуля используют одинаковые настройки ( хотя прописаны индивидуальные) заранее спасибо за помощь )))
    • 2 Декабря 2011 22:34
      Ranes
      Модуль выглядит великолепно, но конфликтует с шапкой (меняющиеся картинки) модулем sliderschov. Может кто-нибудь знает, как это поправить?
  • 11 Июня 2012 08:57
    DannaML
    Большое спасибо за лаконичный и понятный урок!
  • 26 Марта 2013 16:22
    Galinagalina
    "Параметры модуля" не отображается в модуле, может для joomla 2.5 данный модуль не подходит, или в чем может быть причина
  • 26 Марта 2013 16:24
    Galinagalina
    а может сайт не поддерживает jQuery
^ Наверх ^