Joomla

29 Июль 2008

Как использовать YOOeffects

Опубликовано в Обучение, Joomla

Сегодня я расскажу тебе, что такое YooEffects, зачем он нужен и почему я им пользуюсь.
YOOeffects – это коммерческий плагин (или мамбот для ранних версий) CMS системы Joomla. Этот плагин накладывает различные эффекты на изображения используя библиотеку Mootools.

Что бы увидеть действие этого плагина на моем сайте, необходимо залогиниться. Так как он включен только для зарегистрированных пользователей. Можно зарегиться с нуля или же ввести логин и пароль от Gmail’a и не мучаться.

Установка

Буду описывать установку на версию Joomla 1.5.xx (аналогично устанавливается и 1.0.xx).
Administrator -> Extensions -> Install/Uninstall
Upload Package File -> Выбираете архив с плагином -> Upload file & Install
Успешная установка.
Administrator->Plugin Manager ->YOOeffects -> Разрешаем к публикации
Поздравляю, наш плагин готов к работе!

В этот плагин встроено 3 эффекта:

Lightbox

При нажатии на объект (текст, картинка и т.п.) отрывает объект в специальном Лайтбокс окне. Объяснить сложно, поэтому вот пример:
Логотип этого сайта (фон у картинки получается черный, потому что она прозрачная, делай выводы)



Итак, что бы использовать этот эффект, нам нужно в тэг <a> вписать rel=”lightbox;width=xxx;height=yyy;” (где xxx – значение ширины, yyy – значение высоты), например <a rel=”lightbox;width=300;height=200;” >.
Если хочешь сделать галерее подобный пост, нужно вместо lightbox вписывать lightbox[xxx], где xxx- некое название. Например: rel=”lightbox[tanki];”. После этого под окном лайтбокса появятся надписи Previous и Next.

 

Spotlight

Эффект spotlight заключается в том, что одно изображение плавно заменяется другим. Примером может послужить логотип этого сайта, который изменится на фотографию Артемия Лебедева, если ты, конечно, залогинен.
Этот эффект накладывается на теги <div> и <span> в которых может быть прописан фон.
Пример:


Пример <div> тэга:
<div class="spotlight" style="background: url(http://www.kolyan.cz/images/logo2.png); “ width=”420” height= “120" ></div>

Пример <span> тэга:
<span class="spotlight" style="background: url(http://www.kolyan.cz/images/logo2.png); display: block;" width=”420” height= “120"></span>

Вторая картинка, на которую заменяется фон, должна называться так же, как и первая, только с добавлением _spotlight. Например: logo2.png и logo2_spotlight.png.

 

Reflection

Этот эффект представляет собой генерацию отражения к изображению программными средствами.

Что бы воспользоваться этим эффектом, необходимо прописать в тэг <img> класс: class=”reflect”.
Enjoy!

<<  1 2 3 [4