Главная/ Собираем HTML и CSS приемы/ Веб без flash/ Примеры применения 3d на сайте/ jQuery панорама

jQuery панорама

Дата публикации: 21.04.2011

Простой плагин на jQuery для реализации 3D панорамы без использования флеш:

  • IE 6-8
  • Firefox 3-4
  • Opera 11
  • Safari 5
  • Chrome
  • iPhone 3GS

Что качать?

  • blog.jquery.com/2010/02/19/jquery-142-released/ — библиотеку jQuery
  • библиотеку jquery.panorama.js
  • стили jquery.panorama.css

Быстрый старт

Подключаем необходимые файлы::

<link href="path-to/jquery.panorama.css" rel="stylesheet" />
<script src="path-to/jquery-1.4.2.min.js"></script>
<script src="path-to/jquery.panorama.js"></script>

Готовим панорамное фото:

Не нужно быть большим профессионалом чтобы сделать подобную: современный фотоаппарат поможет сделать панораму без особого труда. Вставляет это изображение в HTML страницу с классом panorama:

<img src="path-to/panorama.jpg" width="2642" height="375" alt="panorama" class="panorama" />

Этих действий достаточно чтобы получить рабочую 3D панораму на своем сайте.

Преимущества

  • кроссбраузерность
  • малый вес плагина (5Kb — это без компрессии)
  • простота (код простой и понятный — легко подстроить под себя)
  • легкость интеграции

Недостатки

  • нет возможности обзора вверх-вниз (эти возможности несложно добавить, если тебе хотя бы немного знаком Javascript и jQuery);
  • в некоторых браузерах может наблюдаться небольшое подергивание картинки. Но это скорей недостаток движков рендеринга определенных браузеров, чем самого плагина.

Параметры

 

Название параметра Описание возможные значения по умолчанию
viewport_width Видимая площадь картинки. Точнее ширина, высота настраивается в стилях и/или зависит от высоты самой картинки. любое целое положительное число 600
speed Скорость анимации. Чем больше число, тем медленнее будет анимация. любое целое положительное число 20000
direction Направление вращения. left или right left
control_display Видимость кнопок управления. auto или yes auto
start_position Начальная позиция картинки. целое положительное число или запись вида x=1000px 0
auto_start Автоматический запуск вращения. true или false true
mode_360 Режим 360°. true или false true

Настраивать параметры плагина можно добавив на страницу следующий код:

<script>
$(document).ready(function(){
	$("img.mypanorama").panorama({
                 viewport_width: 500,
                 speed: 30000,
                 direction: "right",
                 control_display: "yes"
         });
});
</script>

А чтобы не плодить лишний код, эти настройки можно править в коде самого плагина. Нужные стоки находятся в самом вверху.

var settings = {
	viewport_width: 500,
	speed: 30000,
	direction: "left",
	control_display: "auto",
	start_position: 0,
	auto_start: true,
	mode_360: true
};

Ели не хочется добавлять класс картинке только для того чтобы инициализировать панораму, это можно тоже настроить в коде плагина. В конце кода видим инициализацию:

$(document).ready(function(){
	$("img.panorama").panorama();
});

Можно смело изменить на любой другой.

По теме

Теги: , ,