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 для изображения

Допустим, мы написали статью и вставили в нее изображение. Для того, чтобы страница грузилась быстро, мы это изображение сделали маленьким. Но на изображении есть мелкие детали, которые не просматриваются при таком размере. У нас есть картинка побольше, которая должна всплывать при нажатии на маленькое изображение и показывать детали.
add link m
Чтобы получить для изображения эффект всплывающего окна нужно сделать следующее:

  1. Открыть для редактирования статью, в которой содержится мини-изображение.
  2. В визуальном редакторе JCE выделить мини-изображение и нажать кнопку link Добавить/Изменить ссылку.
  3. В появившемся окне ввести ссылку к изображению или нажать кнопку browser и в открывшемся Браузере файлов найти нужное изображение на сайте или у себя на компьютере и нажать кнопку Вставить.
  4. Во второй вкладке Расширенные (Advansed) в поле Список классов (Class list) выбрать jcepopup.
  5. В третьей вкладке Всплывающие окна в поле Тип всплывающего окна выбрать JCE MediaBox Popups.
  6. Ниже в полях Название и Заголовок можно указать информацию, которая будет появлятся снизу всплывающего окна.
  7. Затем, внизу окна Ссылок, нажать кнопку Вставить. Теперь данное мини-изображение обладает эффектом lightbox.

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

  1. Выделить картинку (или текст)
  2. В панели редактора JCE нажать кнопку добавления атрибутов attribs.
  3. В поле Класс (Class) нажать на выпадающий список и выбрать jcetooltip. Если там нет такого значения, то нажать на  editable Add Value и ввести в поле Класс (Class) - jcetooltip.
  4. В поле Заголовок (Title) написать текст, который будет показан в подсказке. Внизу окна нажать кнопку Update.

§4. Галерея изображений

С помощью JCE MediaBox несложно создать галерею изображений (это когда открываешь одну картинку и с помощью стрелок можно просматривать следующие). Для этого нужно, для каждого изображения создаваемой галереи, выполнить следующее:

  1. Выполнить шаги из §2.1-5
  2. В третьей вкладке Всплывающие окна в поле Группа указать любое имя для группы всплывающих изображений. Таким образом, все картинки, для которых вы укажите одинаковое имя группы, будут просматриватья в одном всплывающем окне.
  3. Далее закончить выполнять шаги §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 в пикселях относительно курсора мыши

 

Продолжение следует...

Комментарии   

+2 #1 Александр 05.04.2013 05:19
Толковая статья, я решил попробовать свои силы, с такими подсказками всё просто, респект автору ;-)
+1 #2 Виктор 19.07.2013 17:13
Поддерживаю Александра )))
Действительно - все очень доходчиво и просто. В инете очень мало толковых инструкций на эту тему. Спасибо )))
+1 #3 Дмитрий 19.11.2013 09:19
Спасибо за эту статью!
Очень помогла! :)
0 #4 Калян 03.12.2013 03:47
Спасибо!!! ПОМОГЛО!!! :-)
0 #5 Елена 19.10.2015 16:03
ну вот, нашла ! а то на двух популярных сайтах по джумле так заумно.. Возьму на заметку этот ресурс)
0 #6 AlexMurr 28.06.2016 12:58
Добрый день! не очень понятно как настроить галерею, если в материале одна картинка должна быть, но если на нее нажать должны листаться все. как же настроить остальные картинки без добавления в материал? подскажите пожалуйста.

You have no rights to post comments

Форма входа

Яндекс.Метрика