jQuery панорама

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

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

Что качать?

• библиотеку jQuery
• плагин jquery.panorama.js (5Kb)
• jquery.panorama.css (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);
• в некоторых браузерах может наблюдаться небольшое подергивание картинки. Но это скорей недостаток движков рендеринга определенных браузеров, чем самого плагина.

Параметры

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

<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();
});

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

Материалы

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

По теме

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