Free login module joomla

Плагин JCE MediaBox - создание всплывающих окон

JCE MediaBoxJCE MediaBox – это один из самых популярных плагинов для визуального редактора JCE CMS Joomla 2.5/3.5. Основное его предназначение – это возможность добавления эффекта lightbox (появление картинки во всплывающем окне) для изображений, PDF, flash-роликов, видео с youtube, quicktime и т.д. Плагин также включает в себя функции вывода всплывающих подсказок, всплывающих галерей. При установке данного плагина на Joomla он интегрируется с визуальным редактором JCE, что позволяет вставлять изображения и медиа-файлы без дополнительных знаний HTML, CSS и PHP, а пользуясь только возможностями редактора.

Сегодня мы с Вами рассмотрим:

Скачиваем самую новую версию плагина JCE MediaBox с сайта разработчика здесь.
Плагин JCE MediaBox устанавливается стандартно через "Расширения" → "Менеджер расширений". Напомню, что  остальные плагины текстового редактора JCE устанавливаются через "Компоненты"→ "Редактор JCE" → "Установка дополнений".
После установки плагин JCE MediaBox нужно активировать. Для этого найдём в "Менеджере плагинов" плагин System – JCE MediaBox и включим его.

System – JCE MediaBox

Настройка плагина JCE MediaBox

Чтобы произвести настройки параметров плагина JCE Mediabox, открываем "Компоненты" → "Редактор JCE" → "Панель управления" → "Параметры JCE MediaBox".

Параметры JCE MediaBox

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

Параметры JCE MediaBox

  • Тема всплывающего окна - выбор темы показа всплывающего изображения (Standart, Squeeze, Shadow, Light.) По умолчанию стоит "standart" и эту тему можно оставить.
  • Путь к значку – относительный путь к файлам иконок для JCE Mediabox.

Настройки всплывающего окна:

Настройки всплывающего окна
Настройки всплывающего окна

  • Скорость исчезания/появления - скорость эффекта появления и исчезания окна, мс
  • Скорость масштабирования - скорость изменения/масштабирования окна изображения, мс
  • Слой наложения - включить/отключить полупрозрачный слой за окном изображения
  • Непрозрачность слоя наложения – значение прозрачности слоя наложения всплывающего окна (0-прозрачный, 1-непрозрачный)
  • Цвет слоя наложения - цвет в шестнадцатиричном виде слоя наложения
  • Ширина/Высота - ширина/высота всплывающего окна по умолчанию
  • Изменять размер всплывающих окон - включить/отключить изменение размера всплывающего окна, если его размеры превышают допустимые размеры экрана
  • Завершить действие - выбор действия закрытия всплывающего окна (щелчок по кнопке закрыть или щелчок по слою наложения и по кнопке закрыть)
  • Значки Увеличения/Всплывающего окна - показывать или нет иконки увеличения всплывающего окна
  • Скрывать объекты - скрывать или нет объекты когда появляются всплывающие окна
  • Прокрутка - всплывающее окно будет перемещаться вместе с прокруткой на сайте (Прокрутка) или оставаться на месте (Зафиксировано)
  • Исключить компоненты - внести компоненты через запятую для исключения из загрузки  JCE MediaBox
  • Назначение меню – назначить JCE MediaBox для загрузки его в специальном меню
  • Динамическая Смена Тем -  вкл/выкл позволяет сменить тему прописав ее переменную в ссылку страницы, например:&theme = light
  • Наследование Преобразований – преобразует наследуемые JCE всплывающие окна
  • Преобразование в Lightbox / Slimbox – преобразовать всплывающие окна Lightbox / Slimbox в всплывающие окна JCE MediaBox, если включите эту опцию, то отключите ваш скрипт Lightbox / Slimbox
  • Преобразования Shadowbox – преобразовать всплывающие окна Shadowbox в всплывающие окна JCE MediaBox, если включите эту опцию, то отключите ваш скрипт  Shadowbox
  • Срок действия cookie для Auto Popup истёк – оставьте это поле пустым чтобы куки удалялись сразу после закрытия пользователем своего браузера

Настройки всплывающей подсказки

Настройки всплывающей подсказки

  • Класс всплывающих подсказок - имя класса используемого для стиля всплывающей подсказки
  • Прозрачность всплывающей подсказки - коэффициент прозрачности фона всплывающей подсказки (0=прозрачный, 1=непрозрачный)
  • Скорость отображения всплывающей подсказки - скорость появления окна подсказки в миллисекундах
  • Положение всплывающей подсказки - положение всплывающей подсказки относительно курсора мыши (сверху-слева, сверху-справа, сверху-в_центре, снизу-слева, снизу-справа, снизу-в_центре)
  • Смещение по X - смещение подсказки по оси X в пикселях относительно курсора мыши
  • Смещение по Y  - смещение подсказки по оси Y в пикселях относительно курсора мыши

На этом с настройками JCE MediaBox мы закончим, не забудьте сохранить настройки, и рассмотрим как его использовать на практике.

Как создать всплывающее окно с изображением по текстовой ссылке

Чтобы получить эффект всплывающих окон в редакторе JCE с помощью плагина MediaBox нужно выделить фразу или слово, а затем в меню инструментов редактора  JCE нажимаем кнопку "Вставить\Редактировать ссылку" с изображением звена цепи.

"Вставить\Редактировать ссылку"

Открывается модальное окно в котором имеется 3 вкладки.

Вкладка "Ссылка"

Вкладка "Ссылка"- служит для указания URL адреса изображения или медиа-контента. Через кнопку "Обзор" указываем путь к нашей картинке, документу или медиа-контенту. Можно выбрать свою статью, что бы она открывалась во всплывающем окне или просто вставить url к контенту. Можно открыть список доступных якорей, в поле "Название" можно ввести текст который появляется, когда курсор наведен на элемент.
Вкладка "Расширенные" - для указания ID изображения, его стиля и класса.

Вкладка "Расширенные"

  • Id - указывается уникальный индентификатор вашей ссылки (это необходимо для некоторых скриптов и таблиц стилей).
  • Стиль - список встроенных свойств CSS, применяемых к элементу.
  • Список классов - список доступных CSS-классов шаблона.
  • Классы - разделенный пробелами список CSS-классов, которые должны применяться к элементу.
  • Направление - языковое направление текста (справа налево или слева направо).
  • Код языка - код языка элемента, например RU-ru.
  • Целевая кодировка - кодировка символов целевой ссылки, например utf-8.
  • Целевой тип MIME - тип целевой ссылки, например txt/html.
  • Отношение страницы к цели -связь между текущей страницей и целевым url- адресом (выбирается из списка).
  • Отношение цели к странице - связь между целевым url- адресом и текущей страницей (выбирается из списка).
  • Указатель - порядковый номер в последовательности.
  • Клавиши - доступ к сcылки с помощью горячих клавиш.

Вышеуказанные поля не обязательны к заполнению.

Вкладка "Всплывающие окна" - именно в ней мы будем создавать всплывающие окна с изображениями и медиа-контентом.

Вкладка "Всплывающие окна"

В вкладке "Всплывающие окна" выбираем из выпадающего списка JCE MediaBox Popups.

JCE MediaBox Popups.

Заполняем поля "Название" и "Заголовок" для  всплывающего окна.
"Группа" пока не заполняем, оно служит для создания всплывающих окон группы (галереи).
"Иконка" – вкл/выкл показ пользователю изображение с маленькой лупой, которая подсказывает, что по ссылке откроется всплывающее окно.  Выберем "Да".
"Позиция иконки" – в выпадающем списке выбираем в каком месте отображать иконку с подсказкой.
"Размеры" - указываем ширину и высоту всплывающего окна в пикселях, для изображения заполнять необязательно.
"Авто-окна" – всплывающие окна будут автоматически открываться при загрузке страницы на основе выбранного параметра:
Одинарные – открытьза одну сессию браузера.
Постоянные – открывать всплывающие окна постоянно при переходе по страницам.
"Скрыть ссылку вспл. окна" – скрывает ссылки всплывающих окон и дочерних элементов. Полезно при создании галереи изображений с одной ссылки.
"Тип медиа"- указываем какой тип медиа мы хотим отображать во всплывающем окне: внутреннюю ссылку, внешнюю ссылку,Youtube Video, Vimeo Video, IFrame, ролик  на Adobe Flash, Audio mp-3, Video mp-4, Windows Media Player и др.
В полях "Имя" и "Значение" можно указать информацию, которая будет появлятся снизу всплывающего окна.
После заполнения всех вкладок нажимаем кнопку "Вставить".

Как создать эффект всплывающего окна (Lightbox) изображения

В визуальном редакторе JCE выделите загруженное мини-изображение и нажмите кнопку "Вставить\Редактировать ссылку" с изображением звена цепи.

Как создать эффект всплывающего окна (Lightbox) изображения

В появившемся модальном окне введите ссылку к изображению, которое будет всплывать, или нажмите кнопку "Обзор" и в открывшемся "Браузере файлов" найдите нужное изображение у себя на компьютере и нажмите кнопку "Вставить".
Вкладки "Расширенные" и "Всплывающие окна" заполняются аналогично вышерассмотренному случаю с текстовыми ссылками.
После нажатия кнопки "Обновить" мини-изображение будет обладть эффектом lightbox.

Всплывающие подсказки

Бывает необходимость подсказать посетителю сайта, что обозначает какое нибудь слово или аббревиатура, т.е. требуется подсказка. Чтобы создать всплывающую подсказку в редакторе JCE нажимаем кнопку "Аббревиатура", предварительно выделив картинку или текст.

кнопка "Аббревиатура"

В сплывающем окне в поле "Заголовок" пишем текст нашей подсказки и выбираем "Класс" - jcetooltip.

"Класс" - jcetooltip

Нажимаем кнопку "Обновить" и после обновления страницы сайта мы видим подсказки при наведении курсора на нужное слово.

Всплывающие подсказки

Всплывающая галерея изображений в JCE

С помощью JCE MediaBox можно создать галерею изображений, когда открываешь одну картинку и с помощью стрелок можно просматривать следующие изображения.
Сделать это просто. Создадим для примера ещё одну картинку для всплывания. И у обоих ссылок в поле "Группа" напишем одинаковое название группы латиницей или цифрами. Я записал gruppa.

Всплывающая галерея изображений в JCE

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

Таким обазом к одной картинке можно привязать галерею из картинок, которые можно просматривать с помощью стрелок.

Клацни по картинкеAB350footer350

В следующей статье я Вам расскажу о наиболее удобном для добавления всплывающих изображений плагине JCE Image Manager Extended.

↓↓↓ Понравилась статья? Жми на кнопки! ↓↓↓

Тэги: Плагины Joomla!, JCE MediaBox, lightbox, всплывающие окна

Комментарии   

Юрий
0 # Юрий 08.06.2016 10:31
Здравствуйте. Я не понял как с помощью этого плагина сделать всплывающее окно, которое будет появляться при открытии сайта?
Ответить | Ответить с цитатой | Цитировать
Алексей
0 # Алексей 08.08.2016 08:04
Цитирую Юрий:
Здравствуйте. Я не понял как с помощью этого плагина сделать всплывающее окно, которое будет появляться при открытии сайта?

Для этого в настройках всплывания JCE MediaBox есть специальное поле Авто-окна. В этой настройке есть 2 типа:

Одинарные - если выбрать этот пункт, то окно всплывет при загрузке этой страницы только 1 раз для 1 пользователя. Т.е. человек переходит на страницу, на которой расположена ссылка на форму, и это всплывающее окно появляется автоматически после загрузки страницы. То что окно всплыло хранится в сессии браузера пользователя, и пока сессия браузера хранится, окно больше не всплывет для этого пользователя.
Постоянные - если выбрать этот пункт, то окно будет всплывать ВСЕГДА, когда пользователь открывает страницу, на которой расположена ссылка на эту форму. Ни в какие сессии не сохраняется.. (обратите внимание на то, что такое всплывание может раздражать пользователей)
Ответить | Ответить с цитатой | Цитировать
Anton
0 # Anton 09.08.2016 09:59
Здравствуйте. Подскажите пожалуйста, возможно ли сделать задержку появления автоматически всплывающего окна?
Ответить | Ответить с цитатой | Цитировать
Владимир
0 # Владимир 05.01.2017 11:06
Хорошая статья. Спасибо. А как вывести модуль в всплывающем окне?
Ответить | Ответить с цитатой | Цитировать
Pasha
0 # Pasha 13.01.2017 15:35
Спасибо за подробные пояснения!!! :lol:
Ответить | Ответить с цитатой | Цитировать
Павел
0 # Павел 13.01.2017 15:38
К сожалению ссылка на закачку модуля не работает.
Но это не умаляет заслуги автора!
Ответить | Ответить с цитатой | Цитировать
Андрей
0 # Андрей 02.07.2017 03:15
Подскажите, а как настроить чтоб окно открывалось при уходе со страницы сайта?
Ответить | Ответить с цитатой | Цитировать

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


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