Обзор популярных расширений Joomla

Статьи о создании и развитии сайта

Обучающие материалы по верстке HTML\CSS


search

Модули слайдшоу Joompad

123Модули слайдшоу Joompad предназначены для загрузки и вывода изображений с возможностью вставки заголовка, описания и ссылки. Как правило описания к изображениям появляются после наведения на него. В этой статье будут рассмотрены 4 модуля: zoominfo, coinslider, animate_hover и slidingcaptions, которые имеют схожие настройки, но отличаются по стилю вывода изображений.

Все представленные модули используют библиотеку jQuery, которая включается в настройках модулей. В зависимости от выделенной области для модуля, изображения в модулях zoominfo, animate_hover и slidingcaptions могут располагаться горизонтально или вертикально. Рассмотрим каждый модуль детальнее:

mod_zoominfo

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

mod_zoominfo

В настройках:

  • устанавливается ширина всего модуля Gallery width.
  • Gallery background color-сюда вписываем цвет фона,  а в Image Title color- цвет заголовка и Image Teaser text color- цвет описания.
  • Image width и Image height - показывают ширину и высоту одной картинки, а в Images margin устанавливается отступ между ними.
  • При желании можно изменить CSS стили для Заголовка (Title CSS style) и Описания (Teaser CSS Style).
Версия: 1.5.1
Размер: 226 кб

download


 

mod_coinslider

Данный модуль показывает изображения с возможностью различных переходов между ними (автоматически или в ручную). Также есть возможность вставки Заголовка и описания внизу изображения на различном фоне.

mod_coinslider

В настройках:

  • Устанавливаем Ширину (Gallery width (picture width)) и Высоту (Gallery height (picture height))  галереи (изображения)
  • Выставляем выравнивание галереи (Gallery position) слева или по центру и возможность навигации (Gallery navigation)
  • В Gallery effect выбираем эффект перехода (Standart-стандартный, Randomize-случайный, Swirl-закрученный, Rain-дождь или Straight-прямой)
  • Можно отключить ссылки URL link on image и назначить время показа изображения в Delay between slides
  • В полях Teaser background color и Image Teaser text color устанавливаем цвет фона и текста соответственно.
Версия: 1.4
Размер: 470 кб

download


 

mod_animate_hover

Похожий на модуль галереи zoominfo, но отличается тем, что можно задавать в настройках куда будет "прятаться" изображение, показывая описание на указанном фоне.

mod_animate_hover

Настройки следующие:

  • В поле Module left margin можно указать отступ модуля от левого края
  • Далее выбираем позицию галереи (Gallery posotion), её ширину (Gallery width) и цвет фона галереи (Gallery background color)
  • В Nr of Gallery rows и Nr of Gallery per row назначаем номер строк галереи и номер галереи в строке
  • В Gallery row effect выбираем эффект перехода к тексту (....)
  • Далее идут установки изображений (Image width-ширина, image height-высота, Images margin-отступ) и цвета заголовка (Image title color)
  • Teaser padding - устанавливает границу вокруг описания (Teaser), а background color и text color - назначают цвет фона и текста.
Версия: 2.2
Размер: 113 кб

download


 

mod_slidingcaptions

Последний модуль серии, галерея изображений выстраивается схожим способом, как в модулях zoominfo и animate_hover. Однако здесь заголовок изначально указан на изображении, при наведении на который появляется описание.

mod_slidingcaptions

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

  • Nr of image rows - количество картинок в строке и Nr of images per row - количество картинок в столбце
  • Caption collapsed height (px) и Caption expanded height (px) - устанавливают положение описания в сжатом и расширенном состоянии соответственно в пикселях
  • Ниже назначаем цвет описания (Caption color) и прозрачность (Caption opacity)
  • Caption sliding effect (msec) - выставляем время разворачивания описания в микросекундах
  • В блоке Image box settings - устанавливаются настройки окна изображения (ширина, высота, стили)
  • В следущем блоке Caption text box settings можно установить цвет заголовка (Title color) и Описания (Teaser text color) и при желании имзенить их стили.
  • Кроме того, в URL link type можно установить ссылку "Читать далее" в виде кнопки (icon) или текста (Text), который вписывается в поле Readmore text. А кнопка назначается указанием пути к ней в поле Icon file path.
Версия: 1.1
Размер: 189 кб

download


 

Настройки модулей отличаются только в начале, а вот настройка по вставке изображений имеют одинаковые друг с другом параметры. Сначала выбираем путь к папке с изображениями в Image folder directory. Затем пишем название файла Image file name, Заголовок Image title, Описание Image teaser text и ссылку, которая будет открываться в этом же окне Self browser или новом Open New Browser, при клике на изображение.

joompad_set

В конце настроек можно включить/отключить jQuery (Load jQuery) и использовать режим анти-конфликтов с другими библиотеками JavaScript (Use No Conflict Mode)

Комментарии  

#2 Administrator 25.03.2014 20:10
Цитирую Анастасия:
А для товаров joomshopping данные модули можно использовать

Если только в описании... Только в Joomshopping нужно включить функцию о использовании плагинов.
#1 Анастасия 19.03.2014 11:39
А для товаров joomshopping данные модули можно использовать

Добавить комментарий

Защитный код
Обновить

Joomla SEF URLs by Artio

Комментарии

  • Модуль VTEM Panorama

    Дмитрий
    Доброго времни суток! Несовсем догоняю как привязать к joomshoping те для каждого товара должен ...
     
  • Плагин Edocs

    sveta
    после перехода с http на https плагин перестал работать. Меняла все пути, которые возможно, но не ...
     
  • Компонент JoomShopping. Полезности

    Димы
    Ух, шикарно, спасибо. Изменил карточку товара. Цену и кнопку "В корзину" разместил слева от ...
     
  • Работа с категориями в K2

    Николай
    Подскажите пожалуйста, пользуюсь Serpstat. Комплексный аудит сайта по метатегам (путь:Аудит сайта ...
     
  • Компонент JoomShopping. Товары и категории

    Валерий
    Здравствуйте. Мне очень нужна Ваша помощь. Как возможно сделать, чтобы форма заказа товара в joomshopping ...