Лого www.SiteHere.ru

Интерактивная панорама с помощью jQuery

Интерактивная панорама с помощью 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".

Вывод

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

Успехов!

Источник: http://www.onextrapixel.com/2014/02/20/embed-an-interactive-panoramic-photo-with-jquery-panorama-viewer/

Интерактивная панорама с помощью jQuery 4.50/5 (90.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

4 комментария к записи
  • Вячеслав

    Прикольно…Спасибо Юрий.А если jquery уже подключен уже?

     
    • Юрий

      Рад что вам понравилось! Если jQuery уже подключен, то нет необходимости подключать еще одну, только следите за последней версией jQuery.

       
  • ZeroXor

    Фотографам, согласен, будет интересно. Но даже и им… не знаю, какой смысл показывать панорамную фотографию таким вот образом.

     
  • ToxicEKB

    А что если панорама стоит скажем на главной, работает, проходим дальше по сайту (на другие страницы). возвращаемся на главную и тут вот панорама почему-то перестает работать. В чем может быть причина? 0о

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *