Інтерактивна панорама за допомогою jquery

Напевно ви знаєте що в деяких телефонах є можливість виконувати панорамні зображення. І виглядають вони дуже красиво. А за допомогою плагіна, який ми сьогодні розглянемо, можна зробити панораму інтерактивною. Її можна буде перетягувати за допомогою миші і милуватися красивими видами. Також плагін має ряд налаштувань, за допомогою яких ви можете налаштувати панораму на свій розсуд.

Приклад можна побачити тут:

Подивитися прімерСкачать

Як користуватися?

HTML частина

Для початку потрібно скачати бібліотеку jQuery (тут) І плагін jQuery.panorama_viewer.js зі стилями (тут), А потім підключити:

123

lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.panorama_viewer.js"gt; lt;/scriptgt;lt;link rel="Stylesheet" type="Text / css" href="Css / panorama_viewer.css" /gt;

HTML код дуже простий:

12345678910

lt;bodygt; ..lt;div class="Panorama"gt;lt;img src="Your-panorama-1.jpg"gt;lt;/divgt;lt;div class="Panorama"gt;lt;img src="Your-panorama-2.jpg"gt;lt;/divgt; ..lt;/bodygt;

jQuery частина

А для того щоб ми змогли управляти плагіном, пропишемо невелику javascript функцію:

1234567

$(".panorama").panorama_viewer({repeat: false,direction: "Horizontal",animationTime: 700,easing: "Ease-out",overlay: true})-

Властивостей небагато:

• repeat - приклад зі значенням true можна побачити на "Демо 4". Визначає повторювати або не повторювати фон. Якщо ви зробили хороший панорамний знімок в 360 градусів, то можете залишити false.
• direction - ця властивість може приймати значення "horizontal" і "vertical" (як на "Демо 3"). Які відповідають за горизонтальне або вертикальне розташування панорамного зображення.
• animationTime - анімація при русі зображення. Здається в мілісекундах. Якщо виставити в нуль, то буде як на "Демо 4".
• easing - за допомогою даного властивості можна задати анімацію при переміщенні. Приймає наступні властивості: «ease», «linear», «ease-in», «ease-out», «ease-in-out», і «cubic-bezier (...))».
• overlay - для зручності користувача було додано дане властивість, щоб було зрозуміло що це панорамний знімок. Його можна відключити, виставивши значення false і тоді буде виглядати як на на "Демо 4".

висновок

Насамперед даний плагін буде цікавий тим, хто займається світлинами, щоб зробити на своєму сайті прекрасну панорамну галерею. Але, можливо, і просто тому, хто веде свій блог, викличе інтерес даний плагін.

Успіхів!

джерело: https://onextrapixel.com/2014/02/20/embed-an-interactive-panoramic-photo-with-jquery-panorama-viewer/