Модули Joomla для демонстрации. Часть 1. RokSlideshow.

Сегодня, в преддверии Нового Года, открывается новая серия статей под названием «Модули Joomla для демонстрации».

Наверняка каждый видел очень красивые коммерческие шаблоны, в которых все анимировано и посетителям автоматически показываются какие-либо изображения. Для сайтов коммерческих тематик такой эффект может быть очень важен, поскольку лучшие товары сразу демонстрируются посетителям. Плохо лишь то, что подобные шаблоны стоят весьма недешево, и даже часто распространяются только по платной подписке (т.е в аренду). Для тех, кто хочет создать демонстрации, подобные тем, что можно увидеть в платных шаблонах, предназначена эта серия. В ней я расскажу о бесплатных модулях Joomla, предназначенных для демонстраций.

Открывает серию замечательный модуль от RocketTheme под названием RokSlideshow.

Его демонстрацию можно посмотреть здесь. Модуль позволяет показывать изображения приближая/отдаляя их, с эффектом плавной замены. Также большим плюсом является возможность показа текста под изображениями. Текст не является частью картинок, а храниться в отдельных файлах, что позволяет легко изменять его. Подробности далее…

Итак, скачать модуль можно совершенно бесплатно с сайта разработчика (смотри здесь).

Далее речь пойдет о его настройке.

Настройка модуля

Для настройки RokSlideshow вы должны перейти в конфигурацию самого модуля:

«Расширения» –> «Модули» –> «RokSlideshow»

Модуль имеет следующие настройки:

Module Class Suffix (суффикс класса модуля): используется для создания собственного, индивидуального css-стиля модуля;

Width (ширина): ширина показа слайдов (в пикселях);

Height (высота): Высота показа слайдов (в пикселях);

Images Directory (папка с изображениями): папка, содержащая изображения для показа. Указывается относительно корня Joomla;

Loading Progress Bar (показывать процесс загрузки?): указывает отображать или нет процесс загрузки изображений в виде наполняющейся полоски;

Show Text Captions (показывать текстовые подписи (титры)?): данная опция позволяет включить внизу изображений показ текстов, указанных в соответствующих файлах .txt (об этом ниже), если эти файлы существуют;

Show Title Captions (показывать заголовки текстовых подписей (титров)?): данная опция позволяет включить внизу изображений показ заголовков текстов (выделены жирным шрифтом), указанных в соответствующих файлах .txt (об этом ниже), если эти файлы существуют;

Captions Height (высота подписи): высота подписи (в пикселях);

Title Size (размер заголовка): размер заголовка, как css-величина для свойства font-size;

Title Color (цвет заголовка): цвет заголовка, как css-величина для свойства font-color;

Description Size (размер текстовой подписи): размер текстовой подписи, как css-величина для свойства font-size;

Description Color (цвет текстовой подписи): цвет текстовой подписи, как css-величина для свойства font-size;

Sort Criteria (способ сортировки): задает то, каким образом изображения должны быть отсортированы. Доступны варианты «по алфавиту» или «по дате создания»;

Manual Sort Order (ручная сортировка): Список изображений, разделенных запятыми. Например: image3.jpg,image2.jpg,image1.jpg.  Если эта опция установлена, сортировка по критериям (см. выше) будет отменена;

Dynamic Image Resizing (динамическое изменение размеров изображения): Если у вас возникли проблемы с масштабированием и другими эффектами, попробуйте установить это значение в false;

Image Duration (продолжительность показа изображения): продолжительность показа каждого изображения в миллисекундах;

Transition Duration (продолжительность перехода между изображениями): продолжительность перехода между изображениями в миллисекундах;

Transition Type (тип перехода): тип перехода между изображениями. Доступны следующие типы:Fading, Zooming, Panning, Combo - Ken Burns Effects, Push, Wipe. Какой из них что означает лучше посмотреть самому, и подобрать наиболее понравившийся;

Pan Percent (величина панорамирования): величина панорамирования для типов переходов Panning или Combo. Значение может изменяться от 0 до 100;

Zoom Percent (величина увеличения): величина увеличения для типов переходов Zooming или Combo. Значение может изменяться от 0 до 100;

Transition for Push/Wipe (эффекты для переходов Push и Wipe ): здесь можно выбрать различные эффекты для данных типов переходов.

Настройка изображений и описаний к ним

RokSlideshow использует очень простой процесс установки изображений для показа. В конфигурации модуля вы задаете путь к папке с изображениями, которые хотите показывать. Таким образом вы должны отделить изображения, которые хотите демонстрировать от всех остальных, поместив их в отдельную папку. Для примера: создадим в папке «images» подпапку «car», в нее поместив все требуемые изображения (допустимые форматы png, gif, jpg), а в настройках модуля укажем путь к папке с изображениями: «images/car/».

RokSlideshow найдет все изображения в указанной папке и использует их для показа. Если вы хотите задать для изображений заголовки, описания и ссылки, то вы должны создать в папке с изображениями простые текстовые файлы, названия которых должны совпадать с названиями соответствующих изображений.

Файлы должны иметь следующую структуру:

1 строка: заголовок изображения;

2 строка: гиперссылка для изображения (кликнув по изображению, пользователь будет перенаправлен по этой ссылке), если ссылка не нужна используйте # ;

3 строка: описание изображения. Эта строка может быть довольно длинной, но показана будет лишь та часть, которая поместится в область, выделенную для подписи. Если вам нужно больше места, увеличьте в настройках Captions Height (высота подписи).

Ниже показан пример заполнения файла:

Файл 1.txt

Audi RS8 V-12 TDI LeMans Concept - Front Angle View

http://wedal.ru

V-12 Diesel concept version based on the LeMans winning V-10 race car.

Аналогично нужно заполнить все текстовые файлы.

В целом настройка модуля довольно проста. Нужно лишь посмотреть все возможные эффекты и выбрать понравившиеся. Остальное – дело техники. Удачи!