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

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

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).

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 устанавливаем цвет фона и текста соответственно.

mod_animate_hover

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

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

• В поле 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 - назначают цвет фона и текста.

mod_slidingcaptions

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

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

• 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.

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

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

You have no rights to post comments