JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.

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

Для начала небольшое вступление. Способов создания всплывающих изображений  существует несколько. В сущности, способ только один – javascript. Но нас, в первую очередь, интересует удобство создания этих изображений. Да, можно подключить к шаблону скрипт и затем в коде к каждой картинке добавлять определенный тег. Все будет работать, но это неудобно, т.к. даже в одной статье изображений может быть достаточно много. Ниже я приведу несколько методов создания всплывающих изображений с помощью JCE, упорядочивая их по удобству, т.е. самый неудобный, на мой взгляд, метод будет первым в списке, самый удобный – последним.

Метод 1. Ручное создание всплывающих изображений

Начнем с некоторых базовых вещей, которые нужно понимать для того, чтобы создавать всплывающие изображения. Всплывающее изображение – это как бы два изображения в одном: превью(маленькая картинка) и полноразмерная картинка. При чем вторая появляется только после клика по первой. С точки зрения html-кода обычное изображение будет выглядеть так:

1

<img src="images/stories/key.jpg" width="150" height="112" />

Здесь подразумевается, что изображение уменьшенное, т.к. жестко заданы требуемые размеры. Еще раз: само изображение имеет размеры, скажем, 300х224px, но т.к. в коде задана ширина и высота, на странице оно будет отображаться в размере 150х112px.

А вот как будет выглядеть всплывающее изображение:

1

<a href="images/stories/key.jpg" rel="lightbox"> <img src="images/stories/key.jpg " width="150" height="112" /> </a>

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

Зная это можно переходить к описанию первого способа. Заключается он в том, что коды изображений в виде, примерно таком, как описано выше, добавляются прямо в основной код. Естественно, сначала нужно подключить к основному шаблону Joomla скрипт, который будет увеличивать изображения и узнать атрибут, который будет указывать скрипту на необходимость увеличения. О том, как  подключается скрипт, а также об атрибуте обычно написано в документации к скрипту.  Хотя все это имеет мало отношения к JCE. Да и удобство такого способа оставляет желать лучшего.

Метод 2. Создание всплывающих изображений с помощью плагина JCE Mediabox

Этот метод удобнее предыдущего, но также требует совершения лишних действий. Плагин JCE Mediabox является бесплатным и может быть скачан с оф. сайта разработчиков JCE, по этой ссылке. Устанавливается плагин через менеджер расширений Joomla и после установки должен быть активирован.

Работает JCE Mediabox так:

1. Открываем менеджер изображений JCE и добавляем на страницу изображение, которое будет служить превью(мини-изображением). Подробно про добавление изображений я писал в предыдущей статье серии.
2. Выделяем добавленное изображение и кликаем по инструменту добавления гиперссылки.
3. Далее, используя браузер файлов JCE указываем путь к изображению, которое будет  появляться после клика по превью.
4. Тут же открываем вкладку «Дополнительно» и в опции «Список классов» выбираем «jcepopup»

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

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

Метод 3. Создание всплывающих изображений с помощью плагина JCE HsExpander

Данный плагин для JCE я считаю более удобным, чем Mediabox. Кроме того, он позволяет немного ускорить процесс создания всплывающих изображений. Скачать плагин можно на этой страничке. Устанавливается он через менеджер плагинов JCE(не Joomla!). После установки в JCE появится вот такая кнопка:

При клике по ней открывается окно:

Здесь множество всяких настроек, но нас интересуют только некоторые из них. Как мы можем видеть, окно разделено на 2 раздела: Popup Image и Thumbnail Image. В первом задаются настройки изображения, которое будет всплывать, а во втором – настройки мини-изображения. Из всех настроек нужно указать:

1. Пути к большому и мини – изображениям. Эти пути могут быть выбраны через менеджер файлов(иконка справа от поля ввода) и могут совпадать.
2. Ширину и высоту мини-изображения. Это актуально, если в предыдущем пункте выбраны одинаковые пути, т.е. мы не имеем двух изображений: большого и маленького, а имеем только большое. В этом случае, задав ширину и высоту, мы превратим его в мини-изображение, а после клика оно будет всплывать в полном размере.
3. Альтернативный текст для изображения. Этот текст будет появляться в том случае, когда у пользователя отключено отображение картинок браузером, также этот текст индексируется поисковыми системами.

После того, как все настройки заданы, нажимаем кнопку «вставить», сохраняем материал и наслаждаемся всплывающей картинкой.

Прочитать подробную инструкцию к плагину и посмотреть демо можно на этой страничке.

Этот метод бесплатен и достаточно удобен, но все же есть еще один, еще удобнее.

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

Сразу хочу предупредить – данный плагин относится к разряду платных(на официальном сайте для скачивания требует платной подписки), но я считаю его наиболее удобным для добавления всплывающих изображений. Скачать плагин можно на официальном сайте JCE. Устанавливается он через менеджер плагинов JCE и после установки выглядит в панели инструментов JCE следующим образом:

При клике по кнопке плагина в редакторе открывается следующее окно:

Как видите, первоначально он практически не отличается от стандартного менеджера изображений JCE. Достаточно кликнуть по файлу изображения внизу окна, как появится его превью, в нужные строки автоматически вставится путь до изображения и его размеры. Все, что необходимо сделать для создания всплывающего изображения – перейти на вкладку «Popup», поставить галочку «Включить», выбрать эффект всплывания в опции «Compatability» и внизу окна снова кликнуть по нужному изображению для автоматической вставки пути до него.

Что касается размеров мини-изображения, то тут все сделано очень удобно. На сайте определяющим фактором является ширина страницы, высота может быть любой. Достаточно один раз подобрать приемлемую ширину для мини-изображений и вписывать ее в поле размеров, которое показано на первой вкладке Image Manager Extended. Кроме того, по умолчанию там установлена галочка «Пропорциональный», что позволяет не заморачиваться с правильным изменение высоты при смене ширины, она выставится автоматически.

На этом сайте я принял для себя максимальную ширину мини-изображений в 500px. При добавлении изображений большего размера к статье, я выставляю в поле Ширина значение в 500px, высота при этом изменяется автоматически. Если изображение в ширину меньше 500px, то я вообще ничего не меняю. После этого все мини-изображения в статье имеют одинаковые размеры и плавно увеличиваются до оригинальных размеров при клике.

Данный плагин позволяет создавать всплывающие изображения с минимальными затратами времени. Единственным его недостатком является платность. Правда подписка, в которую входит около десятка отличных JCE-плагинов стоит всего 30$. Цена не большая, учитывая то, столько времени позволит сэкономить это решение. Для тех, кто не готов расстаться с кровными вечно зелеными президентами предлагаю выполнить квест по поиску данного плагина в открытом доступе. Наводок не дам. Скажу только, что в Интернете есть его последняя версия.

Подводя итог, хочу сказать, что лучшим решением оказался плагин JCE Image Manager Extended. Хотя многое зависит от задачи. Если вам необходимо вставить более десяти рисунков, то удобнее первый создать с помощью вышеописанного плагина, а остальные –копированием кода первого, изменяя названия изображений. Если все они названы однотипно, например, img1, img2, img3, и.т.д., то добавить их копированием будет гораздо проще. Да, сначала способы создания всплывающих изображений кажутся достаточно сложными и неудобными, но это дело привычки. Знаю по себе.

P.S.: Если кто-нибудь знает более удобные способы создания всплывающих изображений – делитесь в комментариях.