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

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

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

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

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

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

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

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/».

imandtext

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.

 

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

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

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

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

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Комментарии  

+1 # dr.gopher 31.01.2010 15:11
Спасибо!
Как вставить слайд шоу в HTML страницы (вновь опубликованной статьи) для меня загадка!?
Буду признателен за помощь!
Ответить | Ответить с цитатой | Цитировать
0 # Василий 03.03.2010 08:46
Модуль отличный)) как и все на этом ресурсе :-)
Есть один технический вопрос: как добавить ссылку к модулю, что бы пользователь переходил на другую страницу?
спасибо
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 03.03.2010 09:36
Василий, об этом написано в конце статьи. Читайте внимательнее.
Ответить | Ответить с цитатой | Цитировать
0 # dr0id 18.03.2010 10:58
После публикации модуля на локальном сайте он (сайт) начал сильно тормозить (после переключения на то или иное меню сайта джумла "думает" порой по 10 секунд)
Есть идеи с чем это может быть связано?
Спасибо.
Ответить | Ответить с цитатой | Цитировать
0 # dr0id 18.03.2010 11:02
Часто появляется ошибка об истечении времени ответа от БД (насколько я понял)
Fatal error: Maximum execution time of 30 seconds exceeded in Z:\home\mysite.com\www\Joomla!\libraries\joomla\database\database\mysql.php on line 125
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 18.03.2010 11:07
dr0id, есть одна мысль...
Вы загрузили в модуль изображения с гигантским разрешением и размером в несколько мегабайт каждое(что характерно для обычных картинок на компьютере), и/или сделали большим окно для просмотра изображений.
Ответить | Ответить с цитатой | Цитировать
0 # dr0id 18.03.2010 17:16
Нет, картинки по 10 байт, а вот окно действительно большое, на всю ширину сайта.
Проблема решилась переменой стиля вывода на другой (тормозит лишь "комбо", самый красивый к сожалению)
Ответить | Ответить с цитатой | Цитировать
0 # AlexSandra 25.03.2010 13:02
Добрый день!
Сделала все по инструкции: создала папку, загрузила картинки, создала файлы *.txt с соответствующими картинкам названиями, в файлах указала ссылку для картинки.
Итог: картинка есть, ссылка не работает.
Скажите, пожалуйста, в чем может быть проблема.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 25.03.2010 13:41
AlexSandra, скорее всего ваш текстовый файл имеет название, не совпадающее с названием изображения, либо допущена какая-то ошибка в этом файле.
Ответить | Ответить с цитатой | Цитировать
0 # AlexSandra 25.03.2010 14:26
Проверила - названия одинаковые, а вот пример текстового файла:

Мыльные орехи

http://home.igoods.by/index.php/mylnye-orehi.html

Натуральное моющее средство, придуманное самой природой!

Не могу понять в чем проблема. Может быть проблема связана с какими-нибудь скриптами? Помогите, пожалуйста, разобраться.
Ответить | Ответить с цитатой | Цитировать
0 # Vlad 24.06.2012 19:49
Такая же проблема. Ответ, к сожалению, здесь не нашел.
Ответить | Ответить с цитатой | Цитировать
0 # Vlad 24.06.2012 19:56
Нужно убрать пробелы между строками. Т.е.:
Мыльные орехи
http://home.igoods.by/index.php/mylnye-orehi.html
Натуральное моющее средство, придуманное самой природой!
Ответить | Ответить с цитатой | Цитировать
0 # Владимир 28.03.2010 20:59
Всем привет! не получается вывод картинок на хосте, на Localhost все работает нормально.
Описание проблемы: 18 картинок , каждая примерно до 180 кбайт. Окно размером 360х210, а картинки делал 640х480. модуль начинает работать, окно отображает линию загрузки картинок, доходит до предпоследней т.е. load image 17 и все! Просто висит и картинок не выводит. Прошу подсказать в чем тут проблема?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 29.03.2010 01:56
Владимир, а если картинок ставить меньше, например, 10, то работает?
Если на локальном компьютере все нормально, то, возможно, проблема связана с хостингом, точнее с каким-то его ограничением.
Ответить | Ответить с цитатой | Цитировать
0 # Владимир 29.03.2010 20:21
Уменьшение количества не помогло, но!уменьшил размер окошка до 205х150 оставил 7 картинок и вывод картинок заработал! Увеличил число картинок до 17. Вывод застопорился! Уменьшил до 14 и все работает! Может где то есть глобальные установки Joomla? А пока применяем метод научного тыка!
Ответить | Ответить с цитатой | Цитировать
0 # schel4ok 06.04.2010 07:54
я пользуюсь шаблоном rocket Mynxx
там RokSlideshow расположен прямо под меню, в котором есть ссылка на выпадающую корзину.

так вот иногда при нажатии на корзину, она прячется под картинкой RokSlideshow.

обычно это происходит после прокрутки страницы вниз и возврата наверх. то есть при первоначальной загрузке страницы проблемы нет
Ответить | Ответить с цитатой | Цитировать
0 # Alexander 26.06.2010 10:03
В очередной раз Спасибо автору за статью.
А мой вопрос такой. Из прочитанных комментариев всё-же не уяснил. Стоит ли подгонять изображения под размеры в настройках модуля? Или модуль сам их рихтует под свои настройки налету? Может в этом и есть весь глюк. Я пока не ставил модуль, но те кто поставил - попробуйте так сделать и напишите как будет работать.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 29.06.2010 04:20
Alexander, подгонять нужно, но не под размеры, а делать картинки чуть больше, чтобы эффект движения происходил без ущерба изображению.
Ответить | Ответить с цитатой | Цитировать
0 # Евений 19.08.2010 04:41
Вопрос не по этому расширению. но не нашел где уместнее его задать.
Как правильно вставлять flash в материалы? Вставлял и с помощью Flash Module но картинки не показываются и что-то с путями, но никак не могу понять.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 19.08.2010 15:53
Евений, посоветую вам посмотреть книжку "Joomla! with Flash". Она на английском, но с множеством картинок, все довольно понятно. В ней вы найдете миллион ответов на ваш вопрос и выберите для себя наиболее подходящий.
Ответить | Ответить с цитатой | Цитировать
0 # Денис 19.08.2010 10:03
Всем привет, помогите пожалуйста, отображение текста на слайдшоу работает только с англ языком? Как заставить отображаться русские слова в слайд шоу..????очень нужно, заранее благодарю
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 19.08.2010 16:04
Денис, просто сохранить файлы с описанием в кодировке UTF-8.
Ответить | Ответить с цитатой | Цитировать
0 # Денис 20.08.2010 02:07
АААА))) СПАСИБО!!! ЗА ПОМОЩЬ И СТАТЬЮ!
Ответить | Ответить с цитатой | Цитировать
0 # Владимир 26.09.2010 12:08
Здравствуйте! Подскажите, пожалуйста, как изменить межстрочный интервал в отображаемом заголовке (Title Captions) картинки? У меня, строка не вмещается полностью и переносится, а интервал слишком большой. Можно его как-то уменьшить? Не нашел, где редактируются классы, в частности class="captionTitle". Заранее спасибо.
Ответить | Ответить с цитатой | Цитировать
0 # a123kondr 02.10.2010 14:14
Присоединяюсь к вопросу Владимира! Wedal, объясните, пожалуйста, как сделать межстрочный интервал меньше? Надо создать стиль в css файле? Но в каком именно? и как его правильно прописать там?
Ответить | Ответить с цитатой | Цитировать
0 # a123kondr 02.10.2010 14:23
Немного подумал и все сделал. :) Wedal все равно спасибище!
Для Владимира:
1. создать стиль типа такого:
.RokSlideshow {float:left;line-height:1.0;}
в поле Module Class Suffix просто поставить этот стиль: RokSlideshow
Ответить | Ответить с цитатой | Цитировать
0 # виталий 25.10.2010 06:13
установил модуль,настроил, он робит, но вот проблема: у меня поверх этого модуля стоит менюшка, и вот она то у меня и пропадает, причем только после третьей каритинки. подскажите в чем может быть проблема?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 25.10.2010 07:07
виталий, это сложно. Просто слои накладываются друг на друга. Регулирует их CSS-свойство z-index. Где и что нужно изменить так просто не сказать.
Ответить | Ответить с цитатой | Цитировать
0 # Natalia 22.02.2011 10:30
В шаблоне представлен данный эффект http://joomlathemes.co/demo/?template=jt019_j15 Как настроить его для сайта?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 24.02.2011 02:25
Natalia, какой эффект? Вращающиеся кубики?
Ответить | Ответить с цитатой | Цитировать
0 # Виталий 23.06.2011 06:41
Здравствуйте! Модуль работает и работает отлично, но столкнулся с проблемой при изменении размера браузера... как сделать, чтобы при сжимании страницы модуль сжимался?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 24.06.2011 02:01
Виталий, никак. Картинка о отличие от шаблона сжиматься не может.
Ответить | Ответить с цитатой | Цитировать
0 # Игорь 05.09.2011 13:59
скачал, установил модуль - вроде всё успешно. установил в менеджере модулей позицию - модуль появился на странице в нужном месте, но пустой ((( Папку с изображениями 200*200 создал и путь к ней указал images\rok. Подскажите, пожалуйста!
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 06.09.2011 00:57
Игорь, слеш в другую сторону.
Ответить | Ответить с цитатой | Цитировать
0 # Игорь 06.09.2011 07:09
в том то и дело, что не работает и в положении слеша указанном в инструкции.
Ответить | Ответить с цитатой | Цитировать
0 # Игорь 06.09.2011 07:02
в том то и дело, что не работает и в положении слеша указанном в инструкции.
Ответить | Ответить с цитатой | Цитировать
0 # Марина 03.10.2011 16:57
Добрый вечер. Настроила модуль, загрузила картинки, все вроде работает. НО!!! Не работает ссылка (кликнув по картинке перейти в нужный раздел каталога). Делала все так, как написано в конце статьи.
Помогите, пожалуйста!
Ответить | Ответить с цитатой | Цитировать
0 # ingvi 15.10.2011 21:59
Спасибо! Вроде бы все легко настроилось и работает. Из всех предложенных модулей справилась только с этим, но справилась "на раз"!!! :-)
Ответить | Ответить с цитатой | Цитировать
0 # kimoncar 17.01.2012 03:52
Все отлично. но не работает в google chrome. Не видно самих картинок.
Ответить | Ответить с цитатой | Цитировать
0 # Серж 28.10.2012 15:05
Та же проблема? Кто-нибудь знает как решить? Может проблема в браузере?
Ответить | Ответить с цитатой | Цитировать
0 # Евгений-На Джумла 23.02.2012 17:54
Прочитав комментарии, заметил, что автор так и не ответил, на первый вопрос он меня тоже очень интересует. Какие параметры вызова нужны, что бы вставить модуль в статью. Не так что выбрал позицию в меню модуля, а html код вставить вызов. В работе модуля всё устраивает кроме этого если для него нет параметра вызова придется отказаться и искать новый.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 24.02.2012 02:25
Евгений, точно также, как здесь: http://wedal.ru/rasshireniya-joomla/virtuemart-internet-magazin-na-joomla-chast-18-vivod-kategoriy-virtuemart-s-izobrazeniyami-na-glavnoy-stranice-saita.html
Ответить | Ответить с цитатой | Цитировать
0 # Евгений-На Джумла 26.02.2012 12:05
Спасибо я разобрался, просто поспешил, с вопросом.
Ответить | Ответить с цитатой | Цитировать
0 # Константин 01.05.2012 17:52
Цитирую kimoncar:
Все отлично. но не работает в google chrome. Не видно самих картинок.

Такая же проблема, при чем на одном компьютере все в порядке, на другом-нет! В других браузерах всё работает.
Ответить | Ответить с цитатой | Цитировать
0 # tkav 08.06.2012 18:09
Во всем разделе "модули для демонстрации" не работают ссылки "здесь" - для демо и для скачки модулей.
Ответить | Ответить с цитатой | Цитировать
0 # kialni 05.09.2012 11:41
Есть подобный модуль под Joomla 2.5?
Ответить | Ответить с цитатой | Цитировать
0 # Серж 28.10.2012 15:00
Всем привет! Нас уже ирое у кого в хроме не работает. Кто нибудь знает? При чем, это на ноуте, а на стационарном в хроме работает, в эксплорере нет. Подскажите проблема ведь распростаненная.
Ответить | Ответить с цитатой | Цитировать