JCE MediaBox - плагин для визуального редактора JCE. Плагин позволяет показывать изображения, видео и флэш во всплывающем окне (эффект lightbox).
Подключение и работа с плагином JCE MediaBox
§1. Установка JCE MediaBox
Описание установки приводится для визуального редактора JCE версии 2 и выше.
Скачиваем самую новую версию плагина JCE MediaBox и сохраняем во временную папку своей системы. Открываем Компоненты -> Редактор JCE -> Установка дополнений. Нажимаем кнопку Обзор и в появившемся файловом браузере выбираем сохраненный во временной папке файл плагина JCE MediaBox. Жмем кнопку Открыть и далее кнопку Установить пакет. Если все сделано правильно, то появится информация об установленном дополнении System - JCE MediaBox. Теперь его нужно активировать. Для этого открываем Расширения -> Менеджер плагинов и находим в списке System - JCE MediaBox. В колонке Состояние нажимаем на красный кружок, который изменится на зеленый кружок с галочкой. Таким образом плагин JCE MediaBox активирован. Теперь открываем Компоненты -> Редактор JCE и видим - появилась новая вкладка Параметры JCE MediaBox.
§2. Эффект Lightbox для изображения
Допустим, мы написали статью и вставили в нее изображение. Для того, чтобы страница грузилась быстро, мы это изображение сделали маленьким. Но на изображении есть мелкие детали, которые не просматриваются при таком размере. У нас есть картинка побольше, которая должна всплывать при нажатии на маленькое изображение и показывать детали.
Чтобы получить для изображения эффект всплывающего окна нужно сделать следующее:
- Открыть для редактирования статью, в которой содержится мини-изображение.
- В визуальном редакторе JCE выделить мини-изображение и нажать кнопку
Добавить/Изменить ссылку. - В появившемся окне ввести ссылку к изображению или нажать кнопку
и в открывшемся Браузере файлов найти нужное изображение на сайте или у себя на компьютере и нажать кнопку Вставить. - Во второй вкладке Расширенные (Advansed) в поле Список классов (Class list) выбрать jcepopup.
- В третьей вкладке Всплывающие окна в поле Тип всплывающего окна выбрать JCE MediaBox Popups.
- Ниже в полях Название и Заголовок можно указать информацию, которая будет появлятся снизу всплывающего окна.
- Затем, внизу окна Ссылок, нажать кнопку Вставить. Теперь данное мини-изображение обладает эффектом lightbox.
§3. Всплывающие подсказки
- Выделить картинку (или текст)
- В панели редактора JCE нажать кнопку добавления атрибутов
. - В поле Класс (Class) нажать на выпадающий список и выбрать jcetooltip. Если там нет такого значения, то нажать на
Add Value и ввести в поле Класс (Class) - jcetooltip. - В поле Заголовок (Title) написать текст, который будет показан в подсказке. Внизу окна нажать кнопку Update.
§4. Галерея изображений
С помощью JCE MediaBox несложно создать галерею изображений (это когда открываешь одну картинку и с помощью стрелок можно просматривать следующие). Для этого нужно, для каждого изображения создаваемой галереи, выполнить следующее:
- Выполнить шаги из §2.1-5
- В третьей вкладке Всплывающие окна в поле Группа указать любое имя для группы всплывающих изображений. Таким образом, все картинки, для которых вы укажите одинаковое имя группы, будут просматриватья в одном всплывающем окне.
- Далее закончить выполнять шаги §2.6-7.
Настройки плагина JCE MediaBox
Параметры настроек плагина позволяют изменить эффекты показа изображения во всплывающем окне.
Настройка плагина JCE MediaBox
Чтобы изменить параметры плагина JCE Mediabox, открываем Компоненты -> Редактор JCE -> Панель управления -> Параметры JCE. Эти же параметры можно настраивать и через Менеджер плагинов: Расширения -> Менеджер плагинов - в списке названий плагинов находим System - JCE MediaBox, нажав на который откроется окно с настройками плагина JCE MediaBox.
- Popup Theme - выбор темы показа всплывающего изображения (Standart, Squeeze, Shadow, Light, )
- Icon path - путь к файлам иконок для JCE Mediabox
Настройки всплывающего окна:
- Fade Speed - скорость появления и исчезания изображения
- Scale Speed - скорость масштабирования окна изображения
- Overlay - включить/отключить затемнение объектов за окном изображения
- Overlay Opacity - прозрачность затемненных объектов
- Overlay Color - цвет затемнения за окном всплывающего изображения
- Width/Height - ширина/высота всплывающего окна
- Resize Popups - включить/отключить изменение размера изображения
- Close Action - выбор закрытия изображения (по щелчку за окном или по кнопке Х)
- Zoom/Popup Icons - показывать или нет иконки увеличения внизу изображений
- Hide Objects - скрывать или нет объекты за изображением
- Scrolling - изображение будет перемещаться вместе с прокруткой на сайте (Fixed) или оставаться на месте (Scroll)
- Exclude Components - внести компоненты для исключения использования JCE mediabox
- Dynamic Theme Switching - вкл/выкл динамическое переключение тем
Настройки всплывающей подсказки
- Tooltip Class - имя класса всплывающей подсказки
- Tooltip Opacity - коэффициент прозрачности всплывающей подсказки (0=прозрачный, 1=непрозрачный)
- Tooltip Speed - скорость появления окна подсказки в миллисекундах
- Tooltip Position - положение всплывающей подсказки относительно курсора мыши (сверху-слева, сверху-справа, сверху-в_центре, снизу-слева, снизу-справа, снизу-в_центре)
- X Offset - смещение подсказки по оси X в пикселях относительно курсора мыши
- Y Offset - смещение подсказки по оси Y в пикселях относительно курсора мыши
Продолжение следует...
Комментарии
Но теперь не пойму как настроить размеры всплывающего окна и убрать на ссылке значок? Просто размеры в CSS подправить не подходит, т.к. у всех 3-х окон разные размеры
Если можете подсказать - стукните в асю 473737041, скайп portall.com.ua, e-mail: rabota
Действительно - все очень доходчиво и просто. В инете очень мало толковых инструкций на эту тему. Спасибо )))
Очень помогла! :)
RSS лента комментариев этой записи