Эта популярная статья была обновлена 1 сентября 2016 года, чтобы отразить текущее состояние плагинов панорамы изображений.
Позвольте вашим посетителям наслаждаться 360-градусным обзором изображений вашего веб-сайта с помощью этих замечательных плагинов jQuery Panorama Image Display. Возможные варианты использования: виртуальные туры, просмотр панорам / прокрутка, кубы изображений, бесконечные слайдеры фотографий и многое другое. Наслаждайтесь!
Похожие сообщения:
1. Тридцать шесть лет назад
Threesixtyslider — это плагин для создания 360-градусных изображений с помощью jQuery. Те, кто использует этот плагин, будут рады узнать, что он поддерживается во всех основных браузерах (включая IE6 +), а также полностью адаптивен!
Это, наряду с библиотекой SpriteSpin, обеспечивает схожую функциональность, благодаря которой пользователь может полностью поворачивать изображение. Это особенно эффективно при отображении изображений на веб-сайте электронной коммерции, где полный обзор на 360 градусов полезен для пользователей.
Для конфигурации 360slider предоставляет несколько опций в диапазоне от height и width до playSpeed и disableSpin , которые позволяют пользователям создавать совершенно индивидуальные disableSpin .
Домашняя страница Threesixtyslider
2. Асфальтоукладчик
Следующим в нашем списке является Paver, плагин jQuery, созданный для того, чтобы сделать панорамные и широкоэкранные изображения более доступными. Терри Мун, создатель Paver, перешел с iPhone 4 на iPhone 6 и был потрясен способностью телефона захватывать панорамные изображения.
Хотя он был увлечен панорамными изображениями, Мун расстроился, увидев искаженный способ отображения этих изображений на iPhone. Что хорошего в панорамном снимке, если его нельзя показать?
Чтобы обеспечить правильное отображение изображений, Paver делает акцент на предоставлении совместимых форматов изображения для всех устройств, чтобы широкоэкранные и панорамные изображения отображались так, как должны.
Фактически, Paver делает такую хорошую работу, что новостной сайт The Verge использовал плагин для отображения широкоэкранных изображений первой леди США Мишель Обамы в статье о ее освоении социальных сетей .
3. jQuery сферическая панорама просмотра
jQuery Spherical Panorama View — первая из двух библиотек от Open Studio Labs. Сферическая панорама jQuery позволяет пользователям полностью просматривать изображение на 360 градусов, что делает этот плагин идеальным для демонстрации ресторанов, квартир и т. Д.
Использовать этот плагин чрезвычайно просто, так как он даже не требует написания JavaScript. Все, что вам нужно сделать, это добавить класс panorama к любому изображению, к которому вы хотите применить эффект. Важно отметить, что класс .panorama зарезервирован для этой библиотеки.
Если вы хотите настроить этот плагин, вы должны использовать новое имя класса в целом, например, img или panoramaImage . Отсюда вы можете указать количество созданных представлений, а также столбцы столбцов вида изображения (количество просмотров для каждой строки).
Домашняя страница jQuery Easy Panorama
4. Виртуальный тур по jQuery
Библиотека jQuery Virtual Tour является расширением плагина, описанного выше, и функционирует на основе вышеупомянутой библиотеки. Тем не менее, этот плагин делает еще один шаг вперед, предоставляя пользователям возможность создавать интерактивные, виртуальные туры. Для этого библиотека использует HTML-теги <map> и <area> для добавления интерактивных координат на страницу. Опираясь на эти HTML-элементы, можно отображать туры в браузерах, где отключен JavaScript!
При просмотре примера для этого плагина мы видим, что он создает эффект, аналогичный просмотру улиц на картах Google. Это позволяет нам щелкнуть конкретную точку на фотографии и перейти к координатам этой точки, чтобы мы смотрели изображение из раздела, который мы только что щелкнули.
Домашняя страница виртуального тура jQuery
Демонстрация виртуального тура jQuery
5. SpriteSpin
SpriteSpin — это плагин jQuery, который создает анимацию из каталога изображений или сшитого спрайт-листа. Как только анимация будет создана, она будет циклически проходить между ними, как флипбук.
Целью этого плагина является предоставление 360-градусного обзора любого вида продукта, аналогичного ползунку 360. SpriteSpin делает еще один шаг вперед, предоставляя несколько дополнительных функций, которые позволяют пользователям настраивать поведение и представление анимации.
6. Пано
Pano — это надежная, простая библиотека для создания панорамных изображений. Эта унифицированная кодовая база содержит менее 250 строк, что делает использование Pano чрезвычайно легким ресурсом для встраивания изображений. Чем меньше кода, тем меньше функциональности, поэтому неудивительно, что панорама предоставляет только три опции: img, interval , speed .
7. Панорама 360 ° jQuery плагин
Далее следует плагин Panorama 360 jQuery. Разработанный как форк другого плагина, создатель библиотеки Panorama 360 был недоволен эффектом прокрутки и создал эту библиотеку с акцентом на возможность плавного перемещения с одного слайда изображения. к следующему.
Плагин может легко создать потрясающий раздел веб-страницы, а также целые страницы, которые состоят только из панорамы, как демонстрационная ссылка ниже.
Панорама 360 ° jQuery Домашняя страница
8. JQuery Image Cube
Следующая в нашем списке — библиотека изображений jQuery, плагин, уникальный среди остальных в этом списке. Как следует из названия, он позволяет пользователям отображать изображения в форме куба.
Более того, есть более десятка вариантов, которые можно легко настроить с минимальным количеством строк кода. Среди этих опций — beforeRotate и afterRotate которые являются функциями обратного вызова и предоставляют пример элемента управления, который эта библиотека предоставляет разработчикам. Кроме того, пользователи могут изменять направление, скорость, ускорение куба и настраивать способ отображения куба изображения с помощью ряда параметров .
Домашняя страница jQuery Image Cube
9. Циклотрон
Циклотрон получил свое название благодаря своей способности отображать панорамные изображения, которые вращаются из стороны в сторону. При использовании Cyclotron мы можем щелкнуть мышью и перетащить ее в одном направлении, а затем посмотреть, как изображение вращается в этом направлении. Скорость мыши или перетаскивания пальца задает скорость вращения; после первоначального перетаскивания циклотрон будет непрерывно вращаться через изображение, сохраняя при этом одинаковую скорость.
Cyclotron предоставляет такие параметры, как dampingFactor и dampingFactor для настройки поведения вращения циклотрона, о котором вы можете прочитать подробнее здесь .
10. jQuery Simple Panorama Viewer
Последний плагин в нашем списке — это Simple Panorama Viewer. Как и Cyclotron, пользователи могут перемещаться по изображениям, отображаемым с помощью этого плагина, однако он не предназначен для отображения постоянно вращающихся изображений.
Вместо этого зрители будут прокручивать влево или вправо (или вверх и вниз) в зависимости от скорости прокрутки плагина. По умолчанию плагин будет выполнять 700ms анимацию, которая будет прокручиваться справа налево со скоростью 700ms . Чтобы изменить это, пользователи могут передавать пользовательские значения в animationTime и параметры easing . Чтобы узнать больше об опциях для этой библиотеки, проверьте здесь .
Домашняя страница jQuery Simple Panorama Viewer
jQuery Simple Panorama Viewer Демо
Последние мысли
Надеемся, что к настоящему времени вы узнали о некоторых новых плагинах jQuery для создания панорамных изображений. Вы знаете что-нибудь, о чем я не упомянул? Не стесняйтесь комментировать их имена ниже, в дополнение к любым вопросам, которые могут у вас возникнуть!