VTEM ImageHover плагин эффектов для изображений.

 

Старый, но тем не менее интересный плагин для Joomla добавляющий различные визуальные эффекты к картинкам размещаемым на сайте используя библиотеку JQuery. Эффекты срабатывают при наведении курсора мыши на изображение. Подобные эффекты как правило можно встретить на логотипах или баннерах.

Установка производится стандартными средствами Joomla.

После установки плагин нужно активировать. Для этого в меню "Расширения > Плагины" найдем плагин VTEM ImageHover.

Настройки плагина достаточно просты:

Поле Start Effect - предлагает выбрать один из доступных эффектов (Normal, Transparent, Overlay и Grayscale). Данное поле влияет на начальное отображение изображения, т.е. до наведения курсора мыши.

Поле Hover Effect - эффекты при наведении курсора мыши, предлагается выбрать один из предложенных вариантов (Normal, Popout, sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpRandom, sliceUpDown, sliceUpDownLeft, fold, foldLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse).

Поле Duration - продолжительность эффекта перехода при наведении курсора на изображение.

Поле Opacity - непрозрачность изображения. Выберите значения от 0,1 до 1.

Поле jQuery library - возможность загрузки jquery скрипта на ваш сайт.

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


{vtemimagehover images=[images/01.jpg]}

{vtemimagehover images=[images/01.png;images/02.png] links=[images/big01.png;images/big02.png] startEffect=[normal] hoverEffect=[popout] lightBox=[1]}

{vtemimagehover images=[images/01.png;images/02.png] links=[https://dsaa.ru; https://dsaa.ru] startEffect=[overlay] hoverEffect=[sliceDown]}

{vtemimagehover images=[images/01.png;images/02.png]links=[https://dsaa.ru; https://dsaa.ru] startEffect=[transparent] hoverEffect=[boxRandom]}

{vtemimagehover images=[images/01.png;images/02.png] links=[https://dsaa.ru; https://dsaa.ru] startEffect=[overlay] hoverEffect=[foldLeft]}

{vtemimagehover images=[images/01.png;images/02.png] links=[https://dsaa.ru; https://dsaa.ru] startEffect=[transparent] hoverEffect=[boxRainGrowReverse]}

{vtemimagehover images=[images/01.png;images/02.png] links=[https://dsaa.ru; https://dsaa.ru] startEffect=[grayscale] hoverEffect=[normal]}

Примеры эффектов

 

Печать

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

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