Cyclotron: как вставить панорамное фото на веб-сайт с помощью JavaScript


Cyclotron — это скрипт JavaScript, который позволит вставить на веб-страницу простую цилиндрическую панораму. Кроссбраузерный. Лицензия: Open Source. Сайт: github.com/mahonnaise/cyclotron


UPD. В связи с переходом на Markdown и всеобщим злоупоnреблением скриптами на веб-сайтах автор статьи потерял интерес к JavaScript. Тем не менее ограниченное использование JavaScript вполне допустимо.

Панорамные круговые фотоснимки сейчас позволяют создавать даже многие недорогие фотоаппараты. Также такие цилиндрические фотопанорамы можно склеить из нескольких обычных, снятых последовательно с поворотом камеры. Получается в результате такое вот «длинное» фото.

Рис. Приимер фотопанорамы photocentra.ru/work/97322
Рис. Приимер фотопанорамы photocentra.ru/work/97322

Проблема лишь в том, как эти фотопанорамы вставить на веб-страничку, чтобы её можно было поворачивать вправо- влево. Для этого часто используются различные java-апплеты или Adobe Flash. Но более кроссбраузерным решением, которое будет работать на большинстве браузеров, является интерпретатор JavaScript, который включен в большинстве браузеров.

Наиболее простым способом, который можно использовать для интерактивных панорам на веб-странице, надо назвать скрипт Cyclotron, который можно скачать с домашней странички скрипта на github.com. Этот скрипт — дополнение к библиотеке jquery, и их нужно использовать совместно.

Не работает с мобильной Opera 12. Возможно не работает и в других мобильных браузерах.

Пример интерактивной фотопанорамы с помощью Cyclotron. Поворачивайте изображение, нажав левую кнопку мыши. (фото взято с photocentra.ru)

Возможности Cyclotron минимальны: скрипт позволяет интерактивно вращать панораму, зажав левую кнопку мыши, вправо-влево. А большего для большинства панорам и не нужно.

Чтобы вставить цилиндрическую панораму на веб-страницу, нужно определить для неё специальный элемент div.

<div class="cycle"> </div>

Этому элементу нужно сопоставить правила CSS, где указывается картинка фотопанорамы как фоновое изображение для этого элемента, а также — размер видимого окошка панорамы по вертикали и горизонтали. Высота изображения должна быть равна указанной высоте блока

<style>

.cycle {  

background-image: url(cyclotron.jpg);  

height: 512px;  

width:800px;  

cursor: move;  

}

</style>

Также на вебстранице нужно прописать загрузку скриптов jquery-min.js и cyclotron.js.

<script src="jquery-1.11.0.min.js"> </script>  

<script src="jquery.cyclotron.js"> </script>

И соответственно тут же на этой странице нужно вставить код для непосредственной работы cyclotron.js

<script>  

$(document).ready(function ($) {  

$('.cycle').cyclotron();  

});  

</script> 

Ⓜ ⬇ 27-03-2014