A- A A+
Расширение для Joomla - Switching Light Video

Урок для тех, у кого на сайте размещены видео-ролики от таких известных видеохостингов, как YouTube, Vimeo, Dailymotion и Kickstarter. Используя плагин Switching Light Video, Вы прямо на своем ресурсе создадите мини-кинотеатр. Посетители получат возможность затемнить страницу для комфортного просмотра видео.

Карточка расширения Switching Light Video:

Дополнительная информация

Тип расширения: Плагин
Версия: 1.0.1
Совместимость: 2.5, 3.x

Текстовое описание урока

Шаг 1. Установка плагина

Предупреждаем, на локальном сервере, это расширение может не работать.

РАСШИРЕНИЯ => МЕНЕДЖЕР РАСШИРЕНИЙ => Установка из URL. Вставляем ссылку - http://www.isapp.it/en/switching-light-video/download.html?download=17:switching-light-video-1-0-1

Расширение Joomla - Switching Light Video

Шаг 2. Включение плагина

Переходим в РАСШИРЕНИЯ => МЕНЕДЖЕР ПЛАГИНОВ и находим строку Content - Switching Light Video.

Расширение Joomla - Switching Light Video

В разделе "Подробно" включаем плагин.

Расширение Joomla - Switching Light Video

Шаг 3. Основные параметры

Справа как обычно находятся настройки расширения. Несмотря на небольшое их количество, есть определенные нюансы.

    • Load jQuery - Оставляем "Auto".
    • Image - Выбор картинки из двух выключателей и лампочки. Последняя представляется наиболее симпатичным вариантом.
    • Background color - Цвет затемнения фона. По умолчанию - черный.
    • Opacity - Прозрачность фона. Если выбрать "1", то фон полностью затемнит контент вокруг видео-ролика.

Расширение Joomla - Switching Light Video

    • Delay turn on(off) - Задержка включения и отключения фона. По умолчанию - 400 (1000 - секунда).
    • Background clickable - Если "Да", тогда отключение затемнения происходит при клике по любому участку экрана. В противном случае, отключение только при нажатии картинки (лампочки, выключателя).
    • Video responsive - Поддержка респонсив-дизайна. Пришлось отключить, так как лампочка вообще не появлялась.

Расширение Joomla - Switching Light Video

Шаг 4. Выключаем лампочку

Перескакиваем на сайт и в левом верхнем углу видео теперь имеется лампочка.

Расширение Joomla - Switching Light Video

Нажимаем, и экран вокруг видео затемняется.

Расширение Joomla - Switching Light Video

Кликаем в любой части экрана и эффект темноты пропадает.

Все работает, но лампочка как-то незаметно выглядит на фоне видео-ролика. В следующем шаге изменим ее расположение по отношению к видео.

Шаг 5. Меняем местонахождение картинки

Любым удобным способом заходим в корневую часть сайта. Дальше plugins/content/switchinglightvideo/css/.

Открываем файл switchinglightvideo.css.

В 13-й строке находится класс:

.jtol_switch,.jtol_switch_bulb,.jtol_switch_light{position:absolute;...

Меняем позицию absolute  на relative.

Расширение Joomla - Switching Light Video

Перезагружаем страницу и теперь лампочка находится над видео-роликом. В таком положении она будет заметна любому посетителю.

Расширение Joomla - Switching Light Video

Пусть Вас теперь ничто не отвлекает...

 

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

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!