SiteHeart

Yooeffects - настройка плагина для joomla

Рейтинг пользователей: / 2
ХудшийЛучший 

Увеличение по клику и другие эффекты с изображениями в Joomla (плагин YOOeffects).

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

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

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

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

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

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

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

а) Одиночная картинка

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

rel="shadowbox" title="картинка">


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

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

 

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

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

rel="shadowbox[group1]" title="Описание 1-ой картинки">

rel="shadowbox[group1]" title="Описание 2-й картинки">

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

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

 

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

Пример с Youtube

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

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

Пример с Youtube

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

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

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

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

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

Close заменяем на Закрыть

Next заменяем на Следующий

Previous заменяем на Предыдущий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


взято в сети... скопировано для личного использования. ссылку потерял где взял. найду обязательно поставлю.

 

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


Защитный код
Обновить

На сайте работает система коррекции ошибок. Для исправления выделите текст и нажмите Shift+Enter.

счетчик посещений IT аутсорсинг

Яндекс.Метрика
Ваш персональный технический отдел
Санкт-Петербург +7-921-3130022
ИП Яхно Кирилл Константинович
ОГРНИП 309784727300653