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 – работа с несколькими картинками.

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

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

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

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

8 thoughts on “swfIR – Магические картинки

  1. опа.. сори, что-то я загнался..
    а про эту фичу я не знал.. буду изучать.. ;)

  2. А как и где скачать на этом сайте?!!!Там только описание!

Leave a Reply

Your email address will not be published. Required fields are marked *