В данном уроке мы рассмотрим простой в установке и настройке плагин YOOeffects , который позволяет делать различные эффекты с изображениями: увеличение по клику(эффект lightbox), иммитация эффекта отражения(refection), и подмены изображения при наведении(spotlight) .

Плюс этого плагина еще и в том, что он использует Gzip сжатие CSS/Javascript файлов, что значительно ускоряет работу.

Итак, для установки, скачиваем сам плагин, переходим в администраторскую панель Joomla, выбираем Расширения - Установить/Удалить и через кнопку Обзор указываем расположение архива.

После установки, не забудьте включить плагин. Для этого перейдите в менеджер плагинов, и кликните по инонке крестика напротив плагина YOOeffects.

Ниже демонстрируются основные возможности плагина YOOeffects:

1. Эффект увеличения(lightbox)

а) Одиночная картинка(чтобы увидеть эффект, кликните по картинке);

Для получения эффетка, нужно просто сделать миниатюру, ссылкой на изображение - оригинал, и уже для ссылки задать rel="shadowbox". Приведу пример, только учтите, что у Вас пути к изображениям будут совсем другие :)

<a href="images/stories/original.jpg" rel="shadowbox" title="Рабочее место веб-мастера">
<img src="images/stories/mini.jpg" border="0" title="Нажмите для увеличения">
</a>

В данном примере, original.jpg - это оригинал изображения, а mini.jpg - миниатюра. У ссылки есть атрибут title - текст из него, будет выводится в качестве описания картинки.

Для тех, кто не знает, чтобы внести изменения в html-код страницы в Joomla, нужно кликнуть по иконке с надписью HTML :)

б) Группа картинок;

Если нужно объединить 2 или более изображений в группу(галлерею), то к shadowbox добавляется имя группы в квадратных скобках.

<a href="images/stories/original.jpg" rel="shadowbox[group1]" title="Описание 1-ой картинки">
<img src="images/stories/mini.jpg" border="0" title="Нажмите для увеличения">
</a>
<a href="images/stories/original2.jpg" rel="shadowbox[group1]" title="Описание 2-й картинки">
<img src="images/stories/mini2.jpg" border="0" title="Нажмите для увеличения">
</a>

В данном случае, мы обьединили 2 изображения в групу под названием group1, и при нажатии на одно из них, можно сразу посмотреть и второе.

Можно разносить изображения по разным группам, т.е. часть изображений на странице к одной группе, часть - к другой. Просто у всех картинок, входящих в одну группу, ее название в квадратных скобках должно совпадать.

в) Другое содержимое в окне(Youtube, Rutube, Google Video, произвольный сайт и др.)

Пример с Youtube

Пример с произвольным сайтом

Здесь принцип тот же. Отличие лишь в том, что ссылаемся мы не на оригинал изображения, а на Youtube или на любой другой сайт. А вместо миниатюры, у нас обычный текст.

<a href="http://www.youtube.com/watch?v=B5Txyy4WeNI" rel="shadowbox; width=560;height=340" title="Как сайт zvirec.com показали по MTV"> Пример с Youtube </a>

Обратите внимание, что в данном примере добавились параметры width=560;height=340 , которые говорят плагину о размере окна, в котором будет отображаться содержимое.

Примечание: если Вы хотите заменить стандартные тексты типа: Close, Next, Previous на свои, например: Закрыть, Следующий и Предыдущий, то это делается так:

Открываем(через обычный блокнот) файл по следующему пути:

Ваша Joomla \plugins\system\yoo_effects\lightbox\shadowbox_packed.js

И выполняем команду Заменить(Ctrl+R):

C</span>lose заменяем на З</span>акрыть

N</span>ext заменяем на С</span>ледующий

P</span>revious заменяем на П</span>редыдущий

Теперь обязательно сохраняем файл в кодировке UTF-8 . Для этого жмем Файл - Сохранить как - и в строке кодировка выбираем UTF-8.

2. Эффект отражения(refection)

Обратите внимание на то, что эффект отражения генерируется с помощью плагина. Исходная картинка - без отражения. Такое отражение Вы можете сделать для любого изображения. Для этого нужно обычному изображению задать class="reflect".

<img class="reflect" src="images/stories/example.jpg" width="450" height="40" />

Как видите, все предельно просто.

3. Эффект подмены изображения(spotlight)

Наведите курсор на изображение:

Делается такой эффект следующим образом:

<div class="spotlight" style="background:url(images/stories/mini2.jpg); height:142px; width:200px;"></div>

Т.е. создается пустой блок DIV, на фон которого ставится требуемое изображение. Причем размеры блока должны совпадать с размерами изображения.
Затем блоку задается class="spotlight" .

Теперь несколько нюансов. Во-первых, в той директории, где лежит основное изображение(фон блока), должно лежать и изображение, на которое будет произведена замена при наведении.

Если, к примеру, основное изображение называется mini2.jpg , то второе(на которое производится замена) - должно иметь название mini2_spotlight.jpg . Это очень важно, иначе ничего работать не будет.

Во-вторых, стандартный визуальный редактор Joomla, даже в режиме html-кода, не позволит вставить стиль внутрь блока div. Он его попросту будет удалять.

Чтобы сделать это, нужно вообще выключить редактор (Панель управления- Сайт - Общие настройки - Визуальный редактор по умолчанию - Без редактора).

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

<a href="#"><span class="spotlight" style="background:url(images/stories/mini2.jpg); height:142px; width:200px;display: block;"></span></a>

Как видите, вместо тега DIV , используется тег span, для которого вводится дополнительное стилевое правило display:block .

Ну вот в принципе и все :)