Модули Joomla для демонстрации. Часть 5.Vinaora Cu3er 3D SlideShow.

Чем дольше я работаю с Joomla, тем больше восхищаюсь данной CMS. И дело тут даже не в самом движке, как таковом. Дело в его расширяемости. Дополнительных расширений для Joomla очень много и с каждым днем становится все больше. И хотя в работе с ними есть определенные трудности и проблемы, в целом картина получается очень хорошая.

Сегодня я приготовил вам рассказ об очередном замечательном и, главное, бесплатном модуле Joomla для демонстрации –  Vinaora Cu3er 3D SlideShow. От всех предыдущих модулей он отличается прежде всего осуществлением 3D переходов между изображениями слайдшоу и большим количеством опций, позволяющих тонко его настроить.

В ранних версиях Vinaora Cu3er 3D SlideShow настраивался через XML, что было не очень удобно, и сложно для начинающих. Теперь же вышла версия, позволяющая задавать все настройки в параметрах самого модуля, в менеджере модулей Joomla.

Опции Vinaora Cu3er 3D SlideShow обширны и довольно сложны. Поэтому, перед тем как перейти непосредственно к настройке модуля, сначала разберемся что есть что.

На рисунке ниже показана общая схема модуля.

Модуль имеет 2 элемента управления – стрелки вправо и влево, 2 элемента прогресса процесса слайдшоу – строку процесса и обратный отсчет, а также окно для описания каждого показываемого изображения. Все элементы управления настраиваются с помощью опций модуля.

Vinaora Cu3er 3D SlideShow имеет 2 вида размеров: размер окна модуля и размер изображений для слайдшоу (надеюсь, все знают, что для того, чтобы модули серии «Модули Joomla для демонстрации» показывали слайдшоу красиво, нужно использовать изображения одинаковых размеров). Размер окна жестко задается в настройках модуля и может не совпадать с размером изображения. Если размеры изображений меньше размеров окна, то может появиться необходимость тем или иным образом выровнять изображения в окне. Возможны всего 9 вариантов выравнивания. Они показаны на следующем рисунке:

Главной особенностью Vinaora Cu3er 3D SlideShow являются 3D-переходы между изображениями. Вы когда-нибудь играли в Кубик Рубика? Этот модуль имеет похожую систему и позволяет задавать количество и направление вращаемых плоскостей.

При тонкой настройке Vinaora Cu3er 3D SlideShow можно сделать нечто весьма оригинальное. Это чем-то даже напоминает монтаж видеоклипов.

Vinaora Cu3er 3D SlideShow позволяет легко изменять кнопки и символы кнопок. Ниже показыны виды кнопок и символов, а также настройки, необходимые для их получения:

Теперь, когда имеется некоторая ясность в визуальном отображении, перейдем к настройкам модуля. Все настройки Vinaora Cu3er 3D SlideShow разбиты на 3 категории: параметры модуля, дополнительный параметры и другие настройки. Рассмотрим их по очереди.

Vinaora Cu3er 3D SlideShow. Параметры модуля.

Global Settings (общие настройки)

• Config Name – название конфигурационного файла, отвечающего за вывод слайдшоу с указанными опциями. Раньше этот файл заполнялся вручную. Теперь достаточно заполнить опции в модуле и он будет сформирован автоматически. Здесь ничего менять не нужно
• Custom Config – список существующих конфигурационных файлов. Есть несколько предустановленных. Чтобы настроить модуль заново, нужно выбрать вариант «не использовать». После настройки автоматически будет сформирован новый конфигурационный файл, который будет добавлен в этот список
• SWFObject Library – SWFObject Library используется для определения версии Flash-плеера и включения SWF-файлов. Здесь можно выбрать использовать файл на вашем хостинге (local) или на хостинге Google;
• Embedded Font – шрифт для отображения заголовков и текстов слайдов

 General Settings (основнын настройки)

• Panel Width – ширина окна модуля
• Panel Height – высота окна модуля // по-хорошему ширина и высота окна модуля должны совпадать с шириной и высотой изображений слайдшоу
• Panel Horizontal – горизонтальное выравнивание изображений в окне модуля
• Panel Vertical – вертикальное выравнивание изображений в окне модуля //горизонтальное и вертикальное выравнивание следует использовать тогда, когда размер окна модуля больше размера изображений
• Visible Time – время показа окна с текстом. Смысл следующий: при показе изображения может появляться и исчезать окно с заголовком и текстом, описывающими изображения. Если курсор мыши наведен на модуль и двигается, то это окно будет показываться постоянно. Если курсор наведен на модуль и не двигается или не наведен на модуль, то окно будет показываться столько секунд, сколько указанно в этой опции. Например, если указать «1» и не двигать курсор, то окно будет появятся вместе с изображением, а исчезать через 1 секунду, при этом изображение будет продолжать отображаться.

 Slide/Image Settings (настройки слайдов/изображений)

Если требуется задать несколько значений, разделяйте их вертикальным слешем «|», например: Значение1 | Значение2 | Значение3 . Если требуется пропустить одно из значений, например не задавать заголовок третьему изображению, то вместо значения просто не нужно ничего писать, например: Значение1 | Значение2 || Значение4

• URL(s) Image – относительные адреса к изображениям для слайдшоу
• Link(s) to – ссылки для изображений слайдшоу
• Link(s) Target – окно, в котором нужно открывать страницу при клике по изображению(если задана ссылка)
• Description(s) Box – включить или нет окно описаний изображений
• Heading(s) – заголовки описаний
• Paragraph(s) – тексты описаний
• Link(s) to – ссылки для описаний изображений
• Link(s) Target – окно, в котором нужно открывать страницу при клике по описанию (если задана ссылка)

Transition Settings (настройки переходов)

Настройки переходов между изображениями.

Если требуется задать несколько значений, разделяйте их вертикальным слешем «|», например: Значение1 | Значение2 | Значение3 . Если требуется пропустить одно из значений, например не задавать заголовок третьему изображению, то вместо значения просто не нужно ничего писать, например: Значение1 | Значение2 || Значение4

• Enable Transition – включить или нет переходы
• Number(s) – количество ломтиков при переходе. По аналогии с Кубиком Рубика – ломтики это плоскости, на которые делится кубик по вертикали, или по горизонтали
• Slicing(s) – горизонтальная или вертикальная прокрутка при переходе. См. рисунок выше
• Direction(s) – направление перехода (влево, вправо, вверх, вниз)
• Duration(s) – время перехода для одного ломтика
• Delay(s) – задержка между переходами для каждого ломтика
• Shader(s) – затемнения (добавляет к ломтикам тени). Не забывайте, что не все имеют   «прокачанный компьютер». При добавлении таких спецэффектов браузер на слабом компьютере может сильно тормозить
• Light Position(s) – позиция падения света для формирования тени. Определяется как X, Y, Z. Работает, только когда Shader(s) установлена не в «none»;
• Cuber Color(s) – цвет  куба
• Z multiplier(s) – определяет расстояние, на которое будут улетать ломтики в глубь экрана при повороте (так сложно описать, лучше поэкспериментировать)

Vinaora Cu3er 3D SlideShow. Дополнительные параметры.

TweenIn, TweenOut, TweenOver Settings

Эти параметры характерны для всех подпунктов категории. Мне не удалось их изменить, при любых значениях все оставалось по-прежнему.

Auto-Play Settings (настройки автопросмотра)

• Enable Auto Play – включить полосу автопросмотра
• Symbol – символ: полоса или круг
• Time – продолжительность показа каждого изображения

Preloader Settings (настройки загрузки изображений)

• Enale Preloader – включить отображения загрузки изображений
• Symbol – символ: полоса или круг

Previous Button Settings (настройки кнопки «Назад»)

• Show Previous Button – показывать кнопку «Назад»
• Round Corners – скругления (см. рисунок выше)

Previous Symbol Settings (настройки символа кнопки «Назад»)

• Show Previous Symbol – показывать символ кнопки «Назад»
• Type – тип символа (см. рисунок выше)

Next Button Settings(настройки кнопки «Вперед»)

• Show Next Button – показывать кнопку «Вперед»
• Round Corners – скругления (см. рисунок выше)

Next Symbol Settings(настройки символа кнопки «Вперед»)

• Show Next Symbol – показывать символ кнопки «Вперед»
• Type – тип символа (см. рисунок выше)

Description Box Settings (настройки окна описания)

• Enable Description Box – включить окно описания
• Round Corners – скругления углов (см. рисунок выше)
• Heading Font – шрифт заголовка
• Heading Text size – размер текста заголовка
• Text Color –  цвет текста заголовка
• Heading Text Align – выравнивание текста заголовка
• Heading Text Margin – отступ текста заголовка от краев
• Heading Text Leading – то, что называется в Word «межстрочный интервал», точнее отступ над и под строкой текста. Здесь – для заголовка
• Heading Text Letterspacing – расстояния между символами заголовка
• Description Font – шрифт описания
• Description Text Size – размер текста описания
• Description Text Color – цвет текста описания
• Description Text Align – выравнивание текста описания
• Description Text Margin – отступ текста описания от краев
• Description Text Leading – межстрочный отступ описания
• Description Text Letterspacing – расстояния между символами описания;

Vinaora Cu3er 3D SlideShow. Другие настройки.

• Pre-text – текст или html-код, отображающийся перед слайдошоу
• Post-text – текст или html-код, отображающийся после слайдошоу

На этом настройки закончены. Хочу добавить, что у меня, при изменении картинок, модуль не хотел их показывать пока я не поместил их в папку media\mod_vinaora_cu3er\images. Может я просто где-то ошибся, а может и нет, так что имейте это ввиду.

Об авторе

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

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

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