Модуль Joomla для создания слайдшоу RokSlideshow.
Наверняка каждый видел очень красивые коммерческие шаблоны, в которых все анимировано и посетителям автоматически показываются какие-либо изображения. Для сайтов коммерческих тематик такой эффект может быть очень важен, поскольку лучшие товары сразу демонстрируются посетителям. Плохо лишь то, что подобные шаблоны стоят весьма недешево, и даже часто распространяются только по платной подписке (т.е в аренду). Для тех, кто хочет создать демонстрации, подобные тем, что можно увидеть в платных шаблонах, предназначена эта серия. В ней я расскажу о бесплатных модулях Joomla, предназначенных для демонстраций.
Открывает серию замечательный модуль от RocketTheme под названием RokSlideshow.
Его демонстрацию можно посмотреть здесь. Модуль позволяет показывать изображения приближая/отдаляя их, с эффектом плавной замены. Также большим плюсом является возможность показа текста под изображениями. Текст не является частью картинок, а храниться в отдельных файлах, что позволяет легко изменять его. Подробности далее…
Итак, скачать модуль можно совершенно бесплатно с сайта разработчика (смотри здесь).
Далее речь пойдет о его настройке. 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. Настройка изображений и описаний к ним.
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.
Аналогично нужно заполнить все текстовые файлы.
В целом настройка модуля довольно проста. Нужно лишь посмотреть все возможные эффекты и выбрать понравившиеся. Остальное – дело техники. Удачи!«images/car/».«images/car/».
{jcomments on} |