Плагин jQuery - Reel

Reel - плагин jQuery, который берет тег изображения и делает его живой 3D "проекцией" объекта или вида местности с помощью подготовленных кадров. Он предназначен для создания возможности обзора на 360° для объекта или местности. Отличная альтернатива для Flash и Java. 

 

Особенности

  • Интуитивно понятное управление. Поддерживает колесико мыши и сенсорные экраны (iPad, iPhone и тому подобное).
  • Анимация вращения и перемещения камеры.
  • Комбинированные установки для горизонтали и вертикали позволяют организовать полноценный обзор со всех сторон.
  • Спрайт CSS - всего лишь одна из возможностей для подачи изображений.
  • Совместим с iPhoneOS.
  • Сочетается с вашим существующим кодом CSS.
  • Поддерживает различные браузеры и операционные системы.
  • Нет необходимости в специальных дополнениях к браузеру. используются только изображения...
  • Простой, построенный на использовании событий, код, который хорошо протестирован.

 

Как использовать

1. Определите объект, для которого надо организовать круговой обзор.

2. Соберите все кадры вращения объекта в спрайт или сделайте последовательность файлов с именами, определяемыми по вычисляемому алгоритму.

3. Присоедините jquery.reel.js к документу.

4. Установите в теле документа изображение одного кадра, оно будет местом вывода панорамы.

5. Вызовите плагин для установленного изображения:

$('#изображение').reel([опции])

 

Опции

Опция Значение по умолчанию Описание
  area undefined Используйте jQuery для расширения области действия управления. Используется область изображения, если значение остается undefined.
  brake 0.5 Торможение, которое используется при перемещении вида.
  clickfree false Привязка управления осуществляется к событиям mouseleave/mouseenter.
  cw false Если порядок следования изображений не соответствует направлению перемещения курсора мыши (движение заснято в обратную сторону), установите данную опцию в значение true, чтобы указать, что используется движение по часовой стрелке.
  delay -1 Задержка перед началом автоматического вращения в секундах (по умолчанию автопроигрывания нет (-1)).
 draggable true Разрешение пермещения вида с помощью указателя мыши.
  footage 6 Количество кадров в строке  (для горизонтальных видов) или в столбце (для вертикальных).
  frame 1 Начальный кадр. Плагин начинает работу с данного кадра. Кадр 1 располагается в левом верхнем углу изображения.
  frames 36 Общее количество кадров.
  graph undefined Пользовательская графическая функция.
  hint   Текст всплывающей подсказки.
 horizontal true Порядок следования кадров. По умолчанию - строка за строкой. Значение flalse соответствует порядку следования столбец за столбцом.
  image undefined Позволяет изменять разрешение спрайта, которое устанавливается по умолчанию на основе файла, передаваемого через тег img. Передает путь к спрайту непосредственно в плагин.
  images [] Массив изображений, которые будут использоваться вместо спрайта.
  inversed false Указывает на инверсированный порядок кадров для орбитальных панорам.
  indicator 0 Определяет вывод индикатора прогресса на изображении. Положительное значение в пикселах соответствует размеру черного квадрата, который будет выводиться на нижней и/или левой грани изображения. Цвет индикатора можно изменить в CSS с помощью класса jquery-reel-indicator (используйте !important для перезаписи черного цвета)
  klass   Вы можете передать свой собственный класс CSS использования плагином.
  laziness 8  На медленных машинах значение tempo делится на значение данной опции для улучшения характеристик.
  loops true Используется для предотвращения циклического проигрывания последовательности кадров.
  monitor undefined При разработке можно выводить любое значение в левом верхнем углу окна просмотра, если указать в данной опции его имя. Можно использовать CSS для изменения внешнего вида с помощью класса jquery-reel-monitor.
  orbital 0 Определяет кадр с центральным изображением для двух осевых панорам.
  path undefined Путь URL к подготовленным изображениям.
 preloader 4 Высота изображения индикатора (в пикселях) загрузки изображения. Индикатор появляется на нижней грани изображения плагина  Reel когда загружается очередной кадр. Можно изменять внешний вид с помощью CSS с использованием класса jquery-reel-preloader
  rebound 0.5 Время задержки у края нецикличной панорамы (в секундах) перед обратным ходом.
 revolution undefined Расстояние, которое должен переместиться курсор мыши, чтобы произошел полный поворот (когда значение устновлено в undefined, по умолчанию определяется удвоенная ширина окна просмотра или половина значения опции `stitched`).
  row 1 Начальная строка для многострочных панорам.
  rows 0 Количество строк для многострочных панорам ( 0 означает однострочную панораму).
  saves false Разрешает пользователю загрузить изображение (с помощью команды Сохранить как... ).
  spacing 0 Расстояние между кадрами (в пикселях).
  speed 0 Скорость анимации вращения в количестве оборотов в секунду (Hz).
  step undefined Начальный шаг.
  steps undefined Количество шагов в обороте (по умолчанию равно значению `frames`).
  stitched undefined Ширина сшитой панорамы в пикселях.
  suffix "-reel" Часть имени файла, которая вставлена непосредственно перед расширением. Например, изображение /путь/к/image.jpg будет соответствовать спрайту /путь/к/image-reel.jpg.
  tempo 25 Количество тактов в секунду. Не влияет на скорость.
  timeout 2 Время простоя, после которого начинается анимация панорамы (в секундах).
 throwable true Разрешает перемещение по панораме.
  vertical false Преключает орбитальные панорамы в режим просмотра по вертикали.
 wheelable true Разрешает использовать колесико мыши при перемещении панорамы.

Сайт проекта

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 21 Марта 2011 16:19
    notbot
    Очень прикольно!
  • 21 Марта 2011 17:13
    a_si_lex
    Супер! Спасибо!
  • 21 Марта 2011 17:55
    profesor08
    Чтоб организовать подоюное, надо иметь кучу подходящих кодров. А имея их, можно справиться за несколько минут, без этого плагина. Вообщем вещь бесполезная.
  • 21 Марта 2011 18:03
    alvik48
    Больше всего понравилась морда, выглядывающая из-за занавески во втором примере:)
    • 21 Марта 2011 19:56
      Zedamin
      Хах мне тоже)
  • 22 Марта 2011 02:03
    alexxhub
    Ох как оно кстати то а. А то уже во флеше устал делать нечто подобное (ну не мое флеш).
  • 22 Марта 2011 09:11
    mikfake
    Зашибись, То что искал!
  • 23 Марта 2011 12:37
    SonikAbstain
    Отлично! только сегодня искала подобную прогу для флэш :) но так даже лучше!
  • 2 Апреля 2011 00:46
    es20099
    Супер! То что нужно!
  • 23 Октября 2011 15:14
    tron
    Мне очень пригодится!
^ Наверх ^