Модули Joomla для демонстрации. Часть 4. JT SlideShow.

Хороший сайт должен всегда радовать глаз, при этом быть информативным и не содержать лишнего. Отличным способом показать суть сайта являются картинки, меняющиеся с течением времени, или по-другому слайдшоу. Я уже рассказал о трех отличных модулях, позволяющих добавлять к сайту подобную функциональность. Но т.к. на вкус и цвет товарищей нет, серия статей продолжается, и сегодня я рад представить еще один модуль Joomla для демонстрации под названием  JT SlideShow. Как и все предыдущие, этот модуль имеет лицензию GPL, т.е. распространяется бесплатно (мир не без хороших людей…) и любой желающий может использовать его для украшения своего сайта.

Начну рассказ о JT SlideShow я, пожалуй, с благодарности разработчику. Ему в подарок, как и другим, ссылкас Wedal.ru. Сайт на турецком языке, но гугл легко переводит страницы. Если вам понравится JT SlideShow, можете заглянуть на сайт к разработчику, и посмотреть другие, созданные им расширения.

Модуль JT SlideShow позволяет показывать изображения, используя множество эффектов библиотеки jQuery. Особенностью данного модуля является то, что он имеет большое количество опций, позволяющих тонко настроить отображение слайдшоу. Эта особенность является одновременно и достоинством и недостатком модуля. Большое количество настроек – это всегда хорошо. Больше опций – больше возможностей. Но при этом они значительно усложняют сам процесс настройки модуля, поскольку долго приходится разбираться? что за что отвечает. Чтобы вы могли сэкономить время, рассмотрим все настройки  JT SlideShow.

Настройка JT SlideShow.

Все настройки JT SlideShow разделены на 3 группы:

• параметры модуля;

• дополнительные параметры;

• другие настройки.

Рассмотрим каждую группу отдельно.

Настройка JT SlideShow. Параметры модуля.

Параметры модуля показаны на рисунке:

– Image Folder – папка из которой будут показываться изображения. По умолчанию, указана папка «modules/mod_jt_slideshow/photos», в которую добавляется 5 изображений при установке модуля;

– Show All Images – если выбрано «Да», будут показаны все изображения, содержащиеся в папке из предыдущей опции. Если «нет», то только определенные в следующей опции. Допустимые форматы изображений: jpg, gif, png.

– Изображения – введите в этом поле названия файлов изображений. Все изображения должны быть расположены в папке из первой опции. Если вы хотите использовать изображения из других папок или из Интернета, используйте перед названием вставку <ext>. Примеры:

<ext>another/directory/image.ext

<ext>http://sitename/folder/image.ext

– Titles – заголовки для изображений. Чтобы они отображались опция «Image Caption» должна быть установлена в «Показать»;

– URLs – ссылки для изображений. Чтобы ссылки работали опция «Linked URLs» должна быть активирована;

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

– Linked URLs – если активировано, в изображения буду вставлены ссылки из опции «URLs»;

– Target – определяет в каком окне откроется сайт при переходе по ссылке;

– добавлять http:// перед ссылкой. Выберите «Да», если ссылки ведут на другие сайты;

– Image Caption – показывать или нет заголовки изображений, заданные в пункте «Titles»;

– Caption Position – расположение заголовков;

– Caption Align – выравнивание заголовков;

Настройка JT SlideShow. Дополнительные параметры.

Дополнительные параметры модуля показаны на рисунке:

– Transition Effect – эффект перехода между изображениями. JT SlideShow имеет 27 различных эффектов переходов между изображениями. В настройках модуля можно выбрать либо их все, либо только один. Если вы хотите выбрать несколько эффектов, то в файле modules\mod_jt_slideshow\helper.php измените 16-ю строчку:

$this->fx = $params->get ( 'fx', 'all' );

на:

$this->fx = 'scrollLeft,scrollDown,scrollRight,scrollUp';

где 'scrollLeft,scrollDown,scrollRight,scrollUp – выбранные эффекты.

– Timeout – время показа каждого изображения в миллисекундах;

– Speed – скорость перехода между изображениями в миллисекундах;

– Delay – дополнительная задержка при показе первого изображения в миллисекундах. Может быть отрицательной;

– Speed In – скорость входа транзакции;

– Speed Out – скорость выхода транзакции;

– Shuffle – координаты анимации для эффекта перетасовки. Есть некоторые эффекты, в которых изображения как бы «улетают». Здесь можно задать дальность и направление полета изображений. Пример: top:15, left: 200

– Pager Event – при каком событии изображения будут переключаться: клик или наведение курсора. По умолчанию при кликах по кнопкам навигации и уменьшенным изображениям большая картинка переключается. В этой опции можно установить переключение при наведении курсора на элемент управления;

– Continuous – активируйте, чтобы начать следующий переход сразу после завершения текущего;

– Random – если активировано, изображения будут показываться в случайном порядке;

– Fit – подгонять изображение под контейнер;

– Container Resize – изменять размеры контейнера для подгонки больших изображений;

– Pause – пауза в слайдшоу при наведении курсора на слайд;

– Pause On Pagination – пауза в слайдшоу при наведении курсора на номера слайдов;

– Auto Stop – автоматическая остановка слайдшоу после показа всех слайдов;

– No Wrap – предотвращать свертывание;

– Randomize Effects – эффекты переходов показываются случайным образом;

– Reverse – показывать эффекты анимации в обратном направлении;

Настройка JT SlideShow. Другие настройки.

Другие настройки модуля показаны на рисунке:

– Load jQuery – загружать jQuery. Если на вашем сайте есть еще расширения, использующие jQuery, выберите «нет»;

– Box Name – если вы хотите использовать более одного модуля JT SlideShow, задавайте им здесь разные имена;

– Image Width – ширина изображений слайдшоу;

– Image Height – высота изображений слайдшоу;

– Image Border – рамка вокруг изображения;

– Image Border Size – размер рамки в пикселях;

– Image Border Color – цвет рамки;

– Navigation Bar – показывать панель навигации (стрелочки вправо и влево);

– Navigation Bar Position – расположение панели навигации;

– Navigation Bar Border – рамка вокруг панели навигации;

– Navigation Bar Border Color – цвет рамки панели навигации;

– Show/hide pagination – показать/скрыть разбиение на страницы;

– Pagination Bar Position – позиция разбиения на страницы;

– Pagination Bar Align – выравнивание разбиения на страницы;

– Pagination Bar Border – рамка вокруг разбиения на страницы;

– Pagination Bar Border Color – цвет рамки вокруг разбиения на страницы;

– Pagination Items Border – рамка вокруг цифр разбиения на страницы;

– Gallery – показывать галерею мини-изображений (как на демо). Если данная опция активирована, необходимо отключить отображение разбиения на страницы!

– Gallery Width – ширина галереи;

– Gallery Position – расположение галереи;

– Gallery Direction – направление галереи (слева направо или справа налево);

– Thumbnail Box Width – ширина окна мини-изображения. Не путайте ширину окна мини-изображения с шириной мини-изображения. В первом случае это размер, в который будет вписано мини-изображение без изменения размеров. Т.е., например, если мини-изображение имеет размер 500х500px, а ширина и высота окна мини-изображения 50х50px, то в окне мини-изображения будет показан лишь кусочек мини-изображения размером 50х50px;

– Thumbnail Box Height – высота окна мини-изображения;

– Fit Thumbnails – подгонять мини-изображения под рамку; Специально для примера, описанного выше;

– Thumbnail Width – ширина мини-изображения;

– Thumbnail Height – высота мини-изображения;

– Thumbnail Space – расстояние между мини-изображениями. Здесь нужно указывать желаемое расстояние между мини-изображениями, разделенное на 2, т.к. оно откладывается от каждого мини-изображения, и суммарное расстояние получается в два раза больше;

– Thumbnail Border – рамка вокруг мини-изображения;

– Thumbnail Border Size – размер рамки мини-изображения;

– Thumbnail Border Color – цвет рамки мини-изображения;

– Show footer – показывать под модулем его название.

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

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

• Об авторе
• Портфолио
• Услуги
• Контакты