В этой статье я расскажу о нескольких способах, позволяющих создавать всплывающие изображения с помощью JCE.
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»

JCE

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

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

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

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

JCE

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

JCE

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

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

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

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

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

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

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

JCE

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

JCE

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

JCE

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

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

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

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

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях ниже.

4.5454545454545 1 1 1 1 1 4.55

Комментарии  

0 # Красный фонMiheich 05.06.2013 20:52
Красный фон в редакторе не пойму почему, пробовал удалял полностью и по новой ставил не помогло.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Красный фонWedal 06.06.2013 02:51
Miheich, это применяются какие-то CSS-стили шаблона. Посмотрите этот фон через Firebug. Там будет понятно, где искать.
Ответить | Ответить с цитатой | Цитировать
0 # Красный фонMiheich 06.06.2013 07:21
Спасибо, я всё равно шаблон менять буду так что не буду искать.
Ответить | Ответить с цитатой | Цитировать
0 # нет кнопкиBoing 23.05.2012 09:23
Установил плагин hsexpander, но кнопка в jce не появилась
Ответить | Ответить с цитатой | Цитировать
0 # RE: нет кнопкиАндрей 23.05.2012 10:56
Цитирую Boing:
Установил плагин hsexpander, но кнопка в jce не появилась


Компоненты -> Администрирование JCE -> Панель управления -> Профили редактора -> Default -> Особенности

Уф ))) Вот так далеко они засунули установку возможных кнопок. Если Вы все установили правильно, то кнопка должна быть там, в табличке "Доступные кнопки"
Ответить | Ответить с цитатой | Цитировать
0 # RE: нет кнопкиMarina 08.07.2012 12:58
Цитирую Андрей:
Цитирую Boing:
Установил плагин hsexpander, но кнопка в jce не появилась


Компоненты -> Администрирование JCE -> Панель управления -> Профили редактора -> Default -> Особенности

Уф ))) Вот так далеко они засунули установку возможных кнопок. Если Вы все установили правильно, то кнопка должна быть там, в табличке "Доступные кнопки"

Супер! спасибо огромное. Коротко, четко, ясно и по делу!
Ответить | Ответить с цитатой | Цитировать
0 # как листать?Софья 30.04.2012 17:39
А как сделать так, чтобы пр клике на превью первое большое фото всплывало, и следующие можно было бы смотреть кликая на стрелочку, а не закрывать каждый раз всплывшее изображение, чтобы посмотреть следующее? так например вконтакте сейчас фотки просматриваются.
Ответить | Ответить с цитатой | Цитировать
0 # RE: как листать?Wedal 02.05.2012 04:33
Софья, используйте другой скрипт, а лучше плагин mavik Thumbnails.
Ответить | Ответить с цитатой | Цитировать
0 # LANGUAGE FILE MISSINGВиктор 23.04.2012 17:51
Установит Hsexpander, но ничего не работает, пишет "PLUGIN NOT LOADED : LANGUAGE FILE MISSING - Hsexpander" как исправить?
Джумла - 1.7
Версия JCE - 2.0.14
Используемый язык - русский
Ответить | Ответить с цитатой | Цитировать
0 # RE: LANGUAGE FILE MISSINGWedal 24.04.2012 02:21
Виктор, статья писалась еще под старую версию JCE. В новой эти плагины могут не работать. Используйте mavik Thumbnails.
Ответить | Ответить с цитатой | Цитировать
0 # RE: LANGUAGE FILE MISSINGВиктор 24.04.2012 02:37
Просто на французской версии сайта все работает отлично, но там язык стоит по умолчанию французский. а mavik Thumbnails не подойдет для джумлы 1.7
Ответить | Ответить с цитатой | Цитировать
0 # RE: LANGUAGE FILE MISSINGWedal 25.04.2012 01:38
Виктор, mavik Thumbnails подойдет для Joomla 1.7 и для 2.5 тоже.
Ответить | Ответить с цитатой | Цитировать
0 # RE: LANGUAGE FILE MISSINGАндрей 21.05.2012 11:56
Цитирую Виктор:
Установит Hsexpander, но ничего не работает, пишет "PLUGIN NOT LOADED : LANGUAGE FILE MISSING - Hsexpander" как исправить?
Джумла - 1.7
Версия JCE - 2.0.14
Используемый язык - русский


Решение простое. Нужно в папке language - ru-RU удалить файл ru-RU.com_jce.xml и всё заработает.
Ответить | Ответить с цитатой | Цитировать
0 # RE: LANGUAGE FILE MISSINGdepp 19.08.2012 19:58
Цитирую Виктор:
Установит Hsexpander, но ничего не работает, пишет "PLUGIN NOT LOADED : LANGUAGE FILE MISSING - Hsexpander" как исправить?
Джумла - 1.7
Версия JCE - 2.0.14
Используемый язык - русский

/components/com_jce/editor/tiny_mce/plugins/hsexpander/langs

там есть два файла en и en_dlg. скопируйте их в эту же папку, тока заменив en на ru. при этом у вас останется русифицированный редактор, и будет работать Hsexpander.
Ответить | Ответить с цитатой | Цитировать
0 # не видно кнопки плагина JCE HsExpanderАнжелика 03.03.2012 14:04
Установила плагин JCE HsExpander,но кнопка в редакторе не появилась. Подскажите,пожалуйста, в чем причина?
Ответить | Ответить с цитатой | Цитировать
0 # Каракули вместо буквЕвгенний 21.12.2011 10:34
Привет!
Замечательная подборка статей по суперскому расширению для Joomla!

У меня вот возникла проблемка, аж мозги на изнанку.

Joomla 1.5.25
JCE 2.0.15 русифицированый
кодировка и на сайте и в MySQL - utf-8

когда нажимаю кнопку, например, добавить фото, всплывает окошко для выбора и вот именно в этом окошке вместо букв каракули

Если знаете в чем проблема подскажите пож.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Каракули вместо буквАндрей 21.07.2012 19:47
Попробуй в файл jce.php (находится по адресу /administrator/components/com_jce/) после строчки defined('_JEXEC') or die('RESTRICTED'); вставить header('Content-type: text/html; charset=utf-8');
Ответить | Ответить с цитатой | Цитировать
0 # каракули в редактореAлександр 19.08.2012 08:05
Цитирую Андрей:
Попробуй в файл jce.php (находится по адресу /administrator/components/com_jce/) после строчки defined('_JEXEC') or die('RESTRICTED'); вставить header('Content-type: text/html; charset=utf-8');

Андрей, благодарю за наводку на решение вопроса, мне помогло ,супер!!! Просидел весь день, не мог понять в чем прикол пока не увидел твое сообщение. Спасибище!!!
Ответить | Ответить с цитатой | Цитировать
0 # не устанавливается JCE HsExpanderDimon_777 20.12.2011 12:49
Не могу понять как добиться того что появился значок JCE HsExpander. Установил. Я новичок, пока что, подскажите, пожайлуста, что где настроить!!! Заранее, спасибо!
Ответить | Ответить с цитатой | Цитировать
+1 # MavikDorfman 01.11.2011 01:42
А как по мне - так больше рулит Mavik Thumbnails. Вставляем картинку стандартным редактором картинок из JCE и указывает уменьшенные размеры. Всё, забыли за всё! Теперь идём на сайт, жмакаем на миниатюрку - и она вырастает! Хоть в хайслайде, хоть в чём! Никаких лишних телодвижений! Не нужно ни на какие вкладки переходить и чё-то там настраивать.
Ответить | Ответить с цитатой | Цитировать
0 # RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.Darkne$$ 18.07.2011 10:28
Проблема как у всех - открывается в новом окне. Что делать?
Ответить | Ответить с цитатой | Цитировать
+1 # RE: RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.RoonI 18.07.2011 11:16
Цитирую Darkne$$:
Проблема как у всех - открывается в новом окне. Что делать?

Посмотри тут, вроде все что можно разжевали)
http://wedal.ru/forum/JCE/402-Kak-sdelat-chtoby-izobrazhenie-plavno-uvelichivalos-pri-klike-po-nemu.html
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.Darkne$$ 18.07.2011 12:37
Огромное спасибо за ссылочку.
помогла установка ce_imgmanager_ext_155.zip и lknlightbox_2011-06-26.zip плюс аккуратная проверка параметров.
Ответить | Ответить с цитатой | Цитировать
0 # RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.RoonI 19.06.2011 15:49
Пробовал и по 3-му и по 4-му методу - результат один, картинка открывается в новом окне, или, если поменять настойки в єтом же, но вместо странички. А всплывающей нету :cry:
Помогите, плиз, так хочеться!

И первым способом пробовал, всеравно в новом окне открывается картинка((
Ответить | Ответить с цитатой | Цитировать
0 # JCE Image Manager ExtendedЮрий 14.05.2011 17:43
Когда выбираю Lightbox/Slimbos пишет следующее: Requires 3rd party frontend script.
И попап не работает. Подскажите, пожалуйста, чего не хватает? Заранее благодарю.
Ответить | Ответить с цитатой | Цитировать
0 # RE: JCE Image Manager ExtendedWedal 16.05.2011 01:37
Юрий, о каком из вышеописанных методов вы говорите?
Ответить | Ответить с цитатой | Цитировать
0 # Другие варианты всплывающих картинокromapad 09.05.2011 17:35
Я использую для просмотра изображений во всплывающем окне плагин "mavik-thumbnail".
Его один раз настраиваешь, и после этого все картинки на сайте автоматически отображаются в лайтбоксе. Другой хороший плагин: yoogallery, но он платный, хотя можно найти и нуленую версию. Он тоже позволяет автоматически выводить картинки в лайтбоксе. Есть еще несколько подобных разработок.
Ответить | Ответить с цитатой | Цитировать
+1 # Не работает HighslideАлексей 05.05.2011 20:32
Всем привет! Сделал все как написал автор по методу 3 и 4. Но большое изображение открывается в новой вкладке, плавного увеличения не происходит, хотя в html все вроде норм. прописано. Такое ощущение что нет самого скрипта Highslide и поэтому не увеличивается...I need help.....
Ответить | Ответить с цитатой | Цитировать
0 # RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.bionetinfo 03.05.2011 15:58
Цитирую bionetinfo:
Спасибо за статью, устаноил плагин JCE HsExpander, но картинка выводится не в виде lightbox поверх сайта (как здесь: joomlanook.com/index.php?option=com_content&view=article&id=85:how-to-use-the-hsexpander&catid=34:highslide-js-for-joomla&Itemid=59, а на отдельной странице по адресу, в виде http://мой сайт/imiges/picture.jpg без эффектов LightBox. Довольно неудобно получается. Может кто знает в чем прокол?


Нашел ответ на собственный вопрос и вопрос Galyanoff.

После установки плагина по сценарию, описанном в статье, нужно сделать следующее по отношению к изображению (используя редактор JCE):

вставить/редактировать ссылку - дополнительно - отношение страницы к цели - выбираем "LightBox".
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.Che 10.05.2011 17:14
Да, эти манипуляции не спасают. Во "вставить/редактировать ссылку" все это прописывается автоматически через Image Manager Extended. Здесь что-то с самим лайтбоксом - его просто нет. Странно...
Ответить | Ответить с цитатой | Цитировать
0 # Overlib эффектРоман 29.04.2011 20:53
А с помощью какого плагина можно создать Overlib эффект, как на Вашем, как здесь - Похожие статьи: или здесь Следующие статьи:
Нужно в виртумарте сделать вывод всплывающего окошка с увеличенным изображением, при наведении мышки Спасибо :-)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Overlib эффектWedal 03.05.2011 02:21
Роман, http://wedal.ru/seo/seo-optimizaciya-joomla-chast3-auto-relink-joomla-pages.html
Ответить | Ответить с цитатой | Цитировать
0 # RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.Сергей 30.03.2011 14:39
Вопрос по самому редактору.
С недавнего времени начал подглючивать. на некоторых страницах вообще ни на что не реагирует, даже закрыть не возможно. На остальных в режиме редактора не подсвечивает ошибки в словах и к примеру при выделении текста в тег , при нажатии на В - весь текст сбивается в кучу и съезжают абзацы.
Обновился до последней версии.
Никто не сталкивался?
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.che-jack 05.04.2011 01:41
попробуй нажать кнопку hide/show в редакторе - проблема с отображением текста при нажатии B исчезнет
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.Сергей 05.04.2011 07:04
Исчезает, до следующего нажатия B
Так же не подсвечиваются ошибки, а при вставке флеш кода админка виснет и только нужно закрывать окно в браузере
Ответить | Ответить с цитатой | Цитировать
0 # RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.Vetal 30.03.2011 09:59
Wedal, отключить скрипт и титлы вообще не будут отображаться, так не подходит. А шаблон (jv dilo) на локальном...
Если тут глянуть, поможет?
http://joomla15.zootemplate.com/jv_dilo/
я пока и с Firebug не могу найти ((
Ответить | Ответить с цитатой | Цитировать
+1 # RE: RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.Wedal 31.03.2011 01:33
Vetal, а, вы про эти подсказки. Это обычный html-атрибут title="ххх". Найдите его в коде меню(можно поиском по php-файлам по фразе "title=" или "title") и удалите.
Ответить | Ответить с цитатой | Цитировать
+2 # RE: RE: RE: JCE - визуальный редактор для Joomla. Часть 4. Методы создания всплывающих изображений.Vetal 31.03.2011 10:52
УРА! спасибо!
БЛАГОДАРЮ!
Ответить | Ответить с цитатой | Цитировать
0 # Всплывающая подсказкаVetal 29.03.2011 21:14
Wedal
Я понимаю, что не совсем в данную тему, но последняя надежда на Вас )) Помогите.
Как убрать в шаблоне Всплывающую подсказку (tooltip). А именно в Меню, когда наводишь на пункты меню не должно быть этой всплывающей дряни...
Сам не могу найти ((
Ответить | Ответить с цитатой | Цитировать
+2 # RE: Всплывающая подсказкаWedal 30.03.2011 04:36
Vetal, либо отключить один из скриптов, подключенных в заголовке шаблона, либо подправить меню, убрав из него атрибут, вызывающий выполнение скрипта. А вообще хорошо бы увидеть этот шаблон.
Ответить | Ответить с цитатой | Цитировать
+2 # JCE HsExpanderbionetinfo 27.03.2011 11:20
Спасибо за статью, устаноил плагин JCE HsExpander, но картинка выводится не в виде lightbox поверх сайта (как здесь: joomlanook.com/index.php?option=com_content&view=article&id=85:how-to-use-the-hsexpander&catid=34:highslide-js-for-joomla&Itemid=59, а на отдельной странице по адресу, в виде http://мой сайт/imiges/picture.jpg без эффектов LightBox. Довольно неудобно получается. Может кто знает в чем прокол?
Ответить | Ответить с цитатой | Цитировать
-1 # RE: JCE HsExpanderWedal 28.03.2011 03:44
bionetinfo, вопрос на форум с кодом, который выводит картинку.
Ответить | Ответить с цитатой | Цитировать
+2 # RE: JCE HsExpanderGalyanoff 14.04.2011 12:23
У меня то же самое, открывает в отдельном окне, а не в всплывающем боксе. Как решить это?
Ответить | Ответить с цитатой | Цитировать

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

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх