1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

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

Тема в разделе "Web Coding", создана пользователем D@nil, 22 июл 2007.

Статус темы:
Закрыта.
Модераторы: latteo
  1. D@nil

    D@nil

    Регистр.:
    1 окт 2006
    Сообщения:
    338
    Симпатии:
    122
    [​IMG]

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

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

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

    1. Скачать swfIR с офф.сайта

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

    3. Вызвать скрипт на странице:
    HTML:
    <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.
    (c) www.webmakerslounge.com
     
  2. nerik

    nerik Прохожие

    Неплохая библиотека, бум пользоваться))
     
Статус темы:
Закрыта.