Куда идем?

Многих читателей интересует вопрос: можно ли с помощью 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.: Если кто-нибудь знает более удобные способы создания всплывающих изображений – делитесь в комментариях.

Об авторе
Wedal
(Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.
Добавить комментарий

Комментарии  
2
Спасибо за статью, устаноил плагин 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
bionetinfo, вопрос на форум с кодом, который выводит картинку.
2
У меня то же самое, открывает в отдельном окне, а не в всплывающем боксе. Как решить это?
0
Wedal
Я понимаю, что не совсем в данную тему, но последняя надежда на Вас )) Помогите.
Как убрать в шаблоне Всплывающую подсказку (tooltip). А именно в Меню, когда наводишь на пункты меню не должно быть этой всплывающей дряни...
Сам не могу найти ((
2
Vetal, либо отключить один из скриптов, подключенных в заголовке шаблона, либо подправить меню, убрав из него атрибут, вызывающий выполнение скрипта. А вообще хорошо бы увидеть этот шаблон.
0
Wedal, отключить скрипт и титлы вообще не будут отображаться, так не подходит. А шаблон (jv dilo) на локальном...
Если тут глянуть, поможет?
http://joomla15.zootemplate.com/jv_dilo/
я пока и с Firebug не могу найти ((
1
Vetal, а, вы про эти подсказки. Это обычный html-атрибут title="ххх". Найдите его в коде меню(можно поиском по php-файлам по фразе "title=" или "title") и удалите.
2
УРА! спасибо!
БЛАГОДАРЮ!
0
Вопрос по самому редактору.
С недавнего времени начал подглючивать. на некоторых страницах вообще ни на что не реагирует, даже закрыть не возможно. На остальных в режиме редактора не подсвечивает ошибки в словах и к примеру при выделении текста в тег , при нажатии на В - весь текст сбивается в кучу и съезжают абзацы.
Обновился до последней версии.
Никто не сталкивался?
0
попробуй нажать кнопку hide/show в редакторе - проблема с отображением текста при нажатии B исчезнет
0
Исчезает, до следующего нажатия B
Так же не подсвечиваются ошибки, а при вставке флеш кода админка виснет и только нужно закрывать окно в браузере
0
А с помощью какого плагина можно создать Overlib эффект, как на Вашем, как здесь - Похожие статьи: или здесь Следующие статьи:
Нужно в виртумарте сделать вывод всплывающего окошка с увеличенным изображением, при наведении мышки Спасибо :-)
0
Роман, http://wedal.ru/seo/seo-optimizaciya-joomla-chast3-auto-relink-joomla-pages.html
0

Цитирую 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
Да, эти манипуляции не спасают. Во "вставить/редактировать ссылку" все это прописывается автоматически через Image Manager Extended. Здесь что-то с самим лайтбоксом - его просто нет. Странно...
1
Всем привет! Сделал все как написал автор по методу 3 и 4. Но большое изображение открывается в новой вкладке, плавного увеличения не происходит, хотя в html все вроде норм. прописано. Такое ощущение что нет самого скрипта Highslide и поэтому не увеличивается...I need help.....
0
Я использую для просмотра изображений во всплывающем окне плагин "mavik-thumbnail".
Его один раз настраиваешь, и после этого все картинки на сайте автоматически отображаются в лайтбоксе. Другой хороший плагин: yoogallery, но он платный, хотя можно найти и нуленую версию. Он тоже позволяет автоматически выводить картинки в лайтбоксе. Есть еще несколько подобных разработок.
0
Когда выбираю Lightbox/Slimbos пишет следующее: Requires 3rd party frontend script.
И попап не работает. Подскажите, пожалуйста, чего не хватает? Заранее благодарю.
0
Юрий, о каком из вышеописанных методов вы говорите?
0
Пробовал и по 3-му и по 4-му методу - результат один, картинка открывается в новом окне, или, если поменять настойки в єтом же, но вместо странички. А всплывающей нету :cry:
Помогите, плиз, так хочеться!

И первым способом пробовал, всеравно в новом окне открывается картинка((
0
Проблема как у всех - открывается в новом окне. Что делать?
1

Цитирую Darkne$$:

Проблема как у всех - открывается в новом окне. Что делать?


Посмотри тут, вроде все что можно разжевали)
http://wedal.ru/forum/JCE/402-Kak-sdelat-chtoby-izobrazhenie-plavno-uvelichivalos-pri-klike-po-nemu.html
0
Огромное спасибо за ссылочку.
помогла установка ce_imgmanager_ext_155.zip и lknlightbox_2011-06-26.zip плюс аккуратная проверка параметров.
1
А как по мне - так больше рулит Mavik Thumbnails. Вставляем картинку стандартным редактором картинок из JCE и указывает уменьшенные размеры. Всё, забыли за всё! Теперь идём на сайт, жмакаем на миниатюрку - и она вырастает! Хоть в хайслайде, хоть в чём! Никаких лишних телодвижений! Не нужно ни на какие вкладки переходить и чё-то там настраивать.
0
Не могу понять как добиться того что появился значок JCE HsExpander. Установил. Я новичок, пока что, подскажите, пожайлуста, что где настроить!!! Заранее, спасибо!
0
Привет!
Замечательная подборка статей по суперскому расширению для Joomla!

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

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

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

Если знаете в чем проблема подскажите пож.
0
Попробуй в файл jce.php (находится по адресу /administrator/components/com_jce/) после строчки defined('_JEXEC') or die('RESTRICTED'); вставить header('Content-type: text/html; charset=utf-8');
0

Цитирую Андрей:

Попробуй в файл jce.php (находится по адресу /administrator/components/com_jce/) после строчки defined('_JEXEC') or die('RESTRICTED'); вставить header('Content-type: text/html; charset=utf-8');


Андрей, благодарю за наводку на решение вопроса, мне помогло ,супер!!! Просидел весь день, не мог понять в чем прикол пока не увидел твое сообщение. Спасибище!!!
0
Установила плагин JCE HsExpander,но кнопка в редакторе не появилась. Подскажите,пожалуйста, в чем причина?
0
Установит Hsexpander, но ничего не работает, пишет "PLUGIN NOT LOADED : LANGUAGE FILE MISSING - Hsexpander" как исправить?
Джумла - 1.7
Версия JCE - 2.0.14
Используемый язык - русский
0
Виктор, статья писалась еще под старую версию JCE. В новой эти плагины могут не работать. Используйте mavik Thumbnails.
0
Просто на французской версии сайта все работает отлично, но там язык стоит по умолчанию французский. а mavik Thumbnails не подойдет для джумлы 1.7
0
Виктор, mavik Thumbnails подойдет для Joomla 1.7 и для 2.5 тоже.
0

Цитирую Виктор:

Установит Hsexpander, но ничего не работает, пишет "PLUGIN NOT LOADED : LANGUAGE FILE MISSING - Hsexpander" как исправить?
Джумла - 1.7
Версия JCE - 2.0.14
Используемый язык - русский



Решение простое. Нужно в папке language - ru-RU удалить файл ru-RU.com_jce.xml и всё заработает.
0

Цитирую Виктор:

Установит 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
А как сделать так, чтобы пр клике на превью первое большое фото всплывало, и следующие можно было бы смотреть кликая на стрелочку, а не закрывать каждый раз всплывшее изображение, чтобы посмотреть следующее? так например вконтакте сейчас фотки просматриваются.
0
Софья, используйте другой скрипт, а лучше плагин mavik Thumbnails.
0
Установил плагин hsexpander, но кнопка в jce не появилась
0

Цитирую Boing:

Установил плагин hsexpander, но кнопка в jce не появилась



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

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

Цитирую Андрей:


Цитирую Boing:

Установил плагин hsexpander, но кнопка в jce не появилась



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

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


Супер! спасибо огромное. Коротко, четко, ясно и по делу!
0
Красный фон в редакторе не пойму почему, пробовал удалял полностью и по новой ставил не помогло.
0
Miheich, это применяются какие-то CSS-стили шаблона. Посмотрите этот фон через Firebug. Там будет понятно, где искать.
0
Спасибо, я всё равно шаблон менять буду так что не буду искать.
0
Добрый день подскажите как стандартном бесплатном Jce сделать так что б при наведении курсора на картинку она изменялась на альтернативную
0
Александр, чтобы картинка менялась на альтернативную одним JCE, боюсь, не отделаться. Есть 2 варианта:

1) Через CSS. Картинки должны быть выведены как background и в css добавлен стиль с :hover, при котором этот background будет меняться. Это годится, если такая смена - единичные случаи.

2) Вам нужно вставлять обычную картинку и добавлять к ней дополнительный атрибут, который будет содержать путь к альтернативной картинке. Например: data-altimg="путь". Далее в JS нужно будет один раз добавить обработчик, который при наведении будет менять пути местами. Не знаю, может быть в JCE уже реализован такой скрипт - он простейший. Но я никогда не сталкивался с ним. Можно попробовать задать вопрос на форуме разработчика. Или, если знания позволяют, написать самостоятельно. Там буквально 3-4 строчки.