- Главная страница
- Карта сайта McHome.ru
- Информация о организации
- Наши работы - сайты
- Услуги и цены
- Base4you
- -----------------------------
- Cофт, Crack, UpDate
- Joomla, плагины, модули
- Статьи, информация. материалы
- Заметки, новости, картинки
- -----------------------------
- Каталог ссылок
- -----------------------------
- RSS Главной страницы
- RSS Канал заметок
- RSS Канал статей
- RSS Канал ПО (soft)
- -----------------------------
- Канал ProFFight на youtube
- Я в Google +
- Я вКонтакте
- Я в фейсбуке
- Я и youtube
- Я в моём мире
- -----------------------------
- Поиск по сайту
Yooeffects - настройка плагина для joomla
Увеличение по клику и другие эффекты с изображениями в 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 или на любой другой сайт. А вместо миниатюры, у нас обычный текст.
Обратите внимание, что в данном примере добавились параметры 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)
Наведите курсор на изображение:
Делается такой эффект следующим образом:
Т.е. создается пустой блок DIV, на фон которого ставится требуемое изображение. Причем размеры блока должны совпадать с размерами изображения.
Затем блоку задается class="spotlight" .
Теперь несколько нюансов. Во-первых, в той директории, где лежит основное изображение(фон блока), должно лежать и изображение, на которое будет произведена замена при наведении.
Если, к примеру, основное изображение называется mini2.jpg , то второе(на которое производится замена) - должно иметь название mini2_spotlight.jpg . Это очень важно, иначе ничего работать не будет.
Во-вторых, стандартный визуальный редактор Joomla, даже в режиме html-кода, не позволит вставить стиль внутрь блока div. Он его попросту будет удалять.
Чтобы сделать это, нужно вообще выключить редактор (Панель управления- Сайт - Общие настройки - Визуальный редактор по умолчанию - Без редактора).
Также, следует сказать, что если Вы решите заключить блок с эффектом плавной подмены изображения в ссылку, то, чтобы код прошел валидацию, его нужно немного изменить.
Как видите, вместо тега DIV , используется тег span, для которого вводится дополнительное стилевое правило display:block .
Ну вот в принципе и все :)
взято в сети... скопировано для личного использования. ссылку потерял где взял. найду обязательно поставлю.
На сайте работает система коррекции ошибок. Для исправления выделите текст и нажмите Shift+Enter.
|