markup-javascript.com

JavaScript библиотека для работы с изображениями

Последнее время очень модна тенденция web 2.0, и поэтому очень часто слышу пожелания заказчиков максимально приблизить к этому стандарту дизайн и функционал web-сайта.

web 2.0 привнес в жизнь верстальщиков как много интересных решений, так и много каверзных нюансов.

Часто на страницах встречаются картинки на которые применены множество различных эффектов – закругленные уголки, тени, рамки, отражения и т.п. Большинство из этого можно реализовать и с помощью html/css, но т.к. на странице, обычно в большинстве случаев, изображения разных размеров, то верстка крайне затрудняется, нужно применять множество html/css элементов, что приводит к громоздкости кода.

Поэтому сегодня хочу Вас познакомить с прекрасной библиотекой Кристиана Эффенбергера CVI, которая помогает решит ряд проблем с версткой эффектов для изображений.

Библиотека имеет около десятка js плагинов для различных эффектов, наиболее интересные я покажу в примерах.

1. 
   shiftzoom – плагин добавляющий к изображению функционал зумирования.
2. 
   busy – плагин добавления и удаление индикатора загрузки.
3. 
   sphere – плагин для отображения эффекта сферы.
4. 
   corner – плагин позволяет добавить эффекты закругленных углов, внутреннею и внешнею тень.
5. 
   glossy – плагин позволяет добиться эффекта стекла с отражением света, а также тень и закругление углов.
6. 
   instant – плагин добавляет рамку, позволяет делать наклоны изображения и подписи.
7. 
   bevel – этот плагин очень похож на glossy, но в нем можно менять цвета теней и вид внутренней рамки.
8. 
   slided – название плагина говорит само за себя, он добавляет рамку в виде слайда, ее можно настраивать изменяя цвет, тень и положение слайда.
9. 
   filmed – плагин добавляет рамку стилизованную под кадр фильма, цвет и положения рамки настраиваются.
10. 
    mapper – плагин используя поле ссылок изображения (image map), добавляет эффект подсветки поля.
11. 
    curl – если вы хотите добавить эффект завернутого уголка, этот плагин для Вас.
12. 
    edge – текстурная рамка.
13. 
    reflex – плагин добавляет эффект отражения, размеры и прозрачность настраиваются.
14. 
    loupe – Лупа для изображения.

По плагину можно отметить:

Начну сразу с минуса, т.к. он существенен – библиотека является платной для сайтов приносящих какую либо прибыль. Стоимость использования одного из плагинов для одного доменного имени начинается от 20 евро.

Сайты не имеющие прибыли библиотекой могут пользоваться бесплатно. Детальнее по этому поводу можно почитать в лицензии продукта.

Теперь по плюсам:

• Хорошая кроссбраузерность (Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+)
• Минимум для инициализации (подключить плагин, указать нужный класс в изображении)
• Отличная документация (англ.)

Примеры:

Отражение (reflex):

Открыть пример в новом окне

Glossy:

Открыть пример в новом окне

Tags: CSS, HTML, JavaScript, JS Plugins