Октябрь 25, 2019 Запись была обновлена
Интерактивная панорама с помощью jQuery
Наверняка вы знаете что в некоторых телефонах есть возможность делать панорамные изображения. И смотрятся они очень красиво. А с помощью плагина, который мы сегодня рассмотрим, можно сделать панораму интерактивной. Ее можно будет перетаскивать с помощью мыши и любоваться красивыми видами. Также плагин имеет ряд настроек, с помощью которых вы можете настроить панораму на своё усмотрение.
Пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться?
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".
Вывод
Первым делом данный плагин будет интересен тем, кто занимается фотографиями, чтобы сделать на своём сайте прекрасную панорамную галерею. Но, возможно, и просто тому, кто ведет свой блог, вызовет интерес данный плагин.
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Прикольно…Спасибо Юрий.А если jquery уже подключен уже?
Рад что вам понравилось! Если jQuery уже подключен, то нет необходимости подключать еще одну, только следите за последней версией jQuery.
Фотографам, согласен, будет интересно. Но даже и им… не знаю, какой смысл показывать панорамную фотографию таким вот образом.
А что если панорама стоит скажем на главной, работает, проходим дальше по сайту (на другие страницы). возвращаемся на главную и тут вот панорама почему-то перестает работать. В чем может быть причина? 0о