Модули Joomla для демонстрации. Часть 1. RokSlideshow.
Сегодня, в преддверии Нового Года, открывается новая серия статей под названием «Модули Joomla для демонстрации».
Наверняка каждый видел очень красивые коммерческие шаблоны, в которых все анимировано и посетителям автоматически показываются какие-либо изображения. Для сайтов коммерческих тематик такой эффект может быть очень важен, поскольку лучшие товары сразу демонстрируются посетителям. Плохо лишь то, что подобные шаблоны стоят весьма недешево, и даже часто распространяются только по платной подписке (т.е в аренду). Для тех, кто хочет создать демонстрации, подобные тем, что можно увидеть в платных шаблонах, предназначена эта серия. В ней я расскажу о бесплатных модулях 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.
Аналогично нужно заполнить все текстовые файлы.
В целом настройка модуля довольно проста. Нужно лишь посмотреть все возможные эффекты и выбрать понравившиеся. Остальное – дело техники. Удачи!
Следующие статьи:
- Community Builder - социальная сеть для Joomla. Часть 4. Управление вкладками Community Builder.
- Virtuemart - интернет-магазин на Joomla. Часть 14. Управление пользователями VirtueMart.
- Модули Joomla для демонстрации. Часть 2. Power Slide Display Module.
- Community Builder – социальная сеть для Joomla. Часть 3. Конфигурация Community Builder.
- Virtuemart - интернет-магазин на Joomla. Часть 13. Скидки, рейтинги и отзывы.
Предыдущие статьи:
- Community Builder – социальная сеть для Joomla. Часть 2. Установка Community Builder.
- Virtuemart – интернет-магазин на Joomla. Часть 12. Скачивание товара, дополнительные изображения и файлы.
- Community Builder - социальная сеть для Joomla. Часть 1. Введение.
- Virtuemart - интернет-магазин на Joomla. Часть 11. Управление типами товаров. Расширенный поиск по характеристикам.
- Virtuemart - интернет-магазин на Joomla. Часть 10. Позиции и свойства товаров.
Рубрики
Серии статей
Объявления
Популярное
- Virtuemart - интернет-магазин для Joomla. Часть 3. Установка и обновление.
- VirtueMart – интернет-магазин на Joomla. Часть 19. Редактирование шаблона VirtueMart (Начало).
- VirtueMart - интернет-магазин на Joomla. Часть 5. Настройка VirtueMart.
- Шаблоны Joomla. Часть 3. Делаем первый шаблон.
- Virtuemart - интернет-магазин для Joomla. Часть 1. Знакомство с Virtuemart.
- VirtueMart – интернет-магазин на Joomla. Часть 18. Вывод категорий VirtueMart с изображениями на главной станице сайта.
- Virtuemart - интернет-магазин на Joomla. Часть 8. Товары и категории товаров.
- VirtueMart – интернет-магазин для Joomla. Часть 4. Настройка глобальной конфигурации.
- Шаблоны Joomla. Часть 1.Создание шаблона Joomla.
- VirtueMart – интернет-магазин на Joomla. Часть 20. Редактирование шаблона VirtueMart (Продолжение).
Последние комментарии
...
Заморочки яндекса уже реально достали. тИЦ не ...Клуб
Подписка
Заработок для web-мастера
Скачать Joomla
Благодарность Автору
Комментарии
Как вставить слайд шоу в HTML страницы (вновь опубликованной статьи) для меня загадка!?
Буду признателен за помощь!
Есть один технический вопрос: как добавить ссылку к модулю, что бы пользователь переходил на другую страницу?
спасибо
Есть идеи с чем это может быть связано?
Спасибо.
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
Вы загрузили в модуль изображения с гигантским разрешением и размером в несколько мегабайт каждое(что характерно для обычных картинок на компьютере), и/или сделали большим окно для просмотра изображений.
Проблема решилась переменой стиля вывода на другой (тормозит лишь "комбо", самый красивый к сожалению)
Сделала все по инструкции: создала папку, загрузила картинки, создала файлы *.txt с соответствующими картинкам названиями, в файлах указала ссылку для картинки.
Итог: картинка есть, ссылка не работает.
Скажите, пожалуйста, в чем может быть проблема.
Мыльные орехи
http://home.igoods.by/index.php/mylnye-orehi.html
Натуральное моющее средство, придуманное самой природой!
Не могу понять в чем проблема. Может быть проблема связана с какими-нибудь скриптами? Помогите, пожалуйста, разобраться.
Описание проблемы: 18 картинок , каждая примерно до 180 кбайт. Окно размером 360х210, а картинки делал 640х480. модуль начинает работать, окно отображает линию загрузки картинок, доходит до предпоследней т.е. load image 17 и все! Просто висит и картинок не выводит. Прошу подсказать в чем тут проблема?
Если на локальном компьютере все нормально, то, возможно, проблема связана с хостингом, точнее с каким-то его ограничением.
там RokSlideshow расположен прямо под меню, в котором есть ссылка на выпадающую корзину.
так вот иногда при нажатии на корзину, она прячется под картинкой RokSlideshow.
обычно это происходит после прокрутки страницы вниз и возврата наверх. то есть при первоначальной загрузке страницы проблемы нет
А мой вопрос такой. Из прочитанных комментариев всё-же не уяснил. Стоит ли подгонять изображения под размеры в настройках модуля? Или модуль сам их рихтует под свои настройки налету? Может в этом и есть весь глюк. Я пока не ставил модуль, но те кто поставил - попробуйте так сделать и напишите как будет работать.
Как правильно вставлять flash в материалы? Вставлял и с помощью Flash Module но картинки не показываются и что-то с путями, но никак не могу понять.
Для Владимира:
1. создать стиль типа такого:
.RokSlideshow {float:left;line-height:1.0;}
в поле Module Class Suffix просто поставить этот стиль: RokSlideshow
Помогите, пожалуйста!
Такая же проблема, при чем на одном компьютере все в порядке, на другом-нет! В других браузерах всё работает.
RSS лента комментариев этой записи