jQuery панорама

Автор: Евгений Рыжков Дата публикации:

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

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

Что качать?

библиотеку jQuery
(5Kb)
(1Kb)

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

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

<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="комната" 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();
});

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

Материалы

сайт авторов плагина

По теме

Вращение фото объекта

Xiper