Наверняка вы знаете что в некоторых телефонах есть возможность делать панорамные изображения. И смотрятся они очень красиво. А с помощью плагина, который мы сегодня рассмотрим, можно сделать панораму интерактивной. Ее можно будет перетаскивать с помощью мыши и любоваться красивыми видами. Также плагин имеет ряд настроек, с помощью которых вы можете настроить панораму на своё усмотрение.
Пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться?
HTML часть
Для начала нужно скачать библиотеку jQuery(здесь) и плагин jQuery.panorama_viewer.js со стилями(здесь), а затем подключить:
1 2 3 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.panorama_viewer.js"></script> <link rel="stylesheet" type="text/css" href="css/panorama_viewer.css" /> |
HTML код очень простой:
1 2 3 4 5 6 7 8 9 10 | <body> .. <div class="panorama"> <img src="your-panorama-1.jpg"> </div> <div class="panorama"> <img src="your-panorama-2.jpg"> </div> .. </body> |
jQuery часть
А для того чтобы мы смогли управлять плагином, пропишем небольшую Javascript функцию:
1 2 3 4 5 6 7 | $(".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".
Вывод
Первым делом данный плагин будет интересен тем, кто занимается фотографиями, чтобы сделать на своём сайте прекрасную панорамную галерею. Но, возможно, и просто тому, кто ведет свой блог, вызовет интерес данный плагин.