swfIR - Магические картинки

swfIR В последнее время утилиты “расширяющие возможности” HTML с помощью флэша и Javascript становятся весьма популярны. Например sIFR, о котором в Рунете уже не мало сказано и написано. sIFR “расширяет” возможности работы с текстом и делает это вполне успешно, а вот swfIR наоборот, работает с изображениями.

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

Настройка и подключение swfIR субьективно проще чем у sIFR, все что нам нужно это:

1. Скачать swfIR с офф.сайта или у меня.

2. Залить на сервер файлы swfir.js и swfir.swf в одну директорию с HTML файлом где swfIR будет использован. При желании можно заливать файлы и в другую папку, просто нужно будет указать в скрипте в какую.

3. Вызвать скрипт на странице:

<head>
<script type="text/javascript" srс="swfir.js"  ></script>
</head>

4. Указать нужные стили и параметры для отображения. Делать это нужно в самом конце HTML-документа подобным образом:

<script type="text/javascript">
window.onload = function()
{
var sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-color", "fff");
sir.swap("#example img");
}
</script>

Список изменяемых параметров для swfIR:

border-radius = Number
border-width = Number
border-color = CSS Styled Color (i.e. fc600)
shadow-offset = Number
shadow-angle = Number
shadow-alpha = Number between 0 - 100
shadow-blur-x = Number
shadow-blur-y = Number
shadow-strength = Number
shadow-color = CSS Styled Color (i.e. fc600)
shadow-quality = Number between 0 - 1
shadow-inner = Boolean (true or false)
shadow-knockout = Boolean (true or false)
shadow-hide = Boolean (true or false)
rotate = Number between -359 - 359
overflow = expand-x, expand-y or fit
link = String (i.e. http://www.swfir.com)
src = String (path to your swf, if not standard)
wmode = String (opaque, transparent, etc.)
elasticity = String (true), Number (pixel-to-em ratio)

Для затравки приведу немного примеров: 1 - эластичная картинка, 2 - повернутая картинка в тексте, 3 - картинка с закругленными уголками, 4 - работа с несколькими картинками.

Не обошлось и без ложки дегтя:

Форсированое масштабирование в Opera убивает браузер.
alt не сохраняется при замене картинок через swfIR
Контекстное меню изображений не работает.

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

С удовольствием послушаю о вашем опыте работы с swfIR.

(проголосовали: 8, рейтинг: 4 из 5)

Загрузка ...

Рубрика Полезные скрипты. Автор Curly Brace | 4 Март 2007

5 Комментариев »

1 +1
В Опере не работает.

Комментарий by Sam — Март 5, 2007 @ 1:14 pm | Цитировать
2 +1
вот здесь
все расписано по шагам

Комментарий by garA — Июль 16, 2007 @ 10:41 am | Цитировать
3 +1
вот здесь
все расписано по шагам

А причем здесь sifr? Речь то не о нем.

Комментарий by neutrino — Июль 16, 2007 @ 10:46 am | Цитировать
4 0
опа.. сори, что-то я загнался..
а про эту фичу я не знал.. буду изучать..

Комментарий by garA — Июль 16, 2007 @ 11:11 am | Цитировать
5 0
garA

Комментарий by neutrino — Июль 16, 2007 @ 11:12 am | Цитировать