Just like “panorama” these jQuery 360 degrees Image Display Plugins amazingly can display a 360 degree view of your object/landscape from all angles. (hey – it’s definitely more fun to look at stuff from all the angles!).
Let your visitors enjoy the 360 degrees view of your website images by integrating these cool jQuery Panorama Image Display plugins.
Possible uses include Virtual Tours, Panorama Viewers/Scrolling, Image cubes, Endless Photo Sliders and more. Enjoy!
1. Threesixtyslider
Threesixtyslider is a plugin for creating 360 degree images using jQuery. Those using this plugin will be happy to find that it is supported across all major browsers (IE6+ Included), and is also fully responsive!
This, along with the SpriteSpin library, both provide similar functionality through which a user can fully rotate an image. This is particularly effective when displaying images on an eCommerce website where a full 360 degree view is beneficial to the users.
For configuration, the 360slider provides a handful of options ranging from height and width to playSpeed anddisableSpin, which allow users to craft a completely custom experience.
2. Paver
Next on our list is Paver, a jQuery plugin created to make panoramic and widescreen images more accessible. Terry Mun, the creator of Paver, upgraded from an iPhone 4 to an iPhone 6 and was blown away by the phone’s ability to capture panoramic images.
Although he was infatuated with panoramic images, Mun became frustrated of seeing the skewed way in which these images are displayed on an iPhone. What good is a panoramic photo if it can not be shown off?
To ensure images render correctly, Paver focuses on providing compatible aspect ratios across devices so that widescreen and panoramic images will render as they should.
In fact, Paver does such a good job that news website The Verge relied on the plugin to display wide-screen images of the United States’ First Lady, Michele Obama in an article about her mastering social media.
3. jQuery Spherical Panorama Viewer
jQuery Spherical Panorama View is the first of two libraries from Open Studio Labs. The jQuery spherical panorama allows users to show a completely 360 degree view of an image, making this plugin great for showing off restaurants, apartments, etc.
Using this plugin is extremely simple as it does not even require any JavaScript to be written. All you have to do is add the class of panorama to any image where you want the effect applied. It’s important to note that the .panorama class is reserved for this library.
If you want to customize this plugin, you must use a new class name altogether, such as img or panoramaImage. From there, you can specify the number of views generated with, as well as the image’s view columns columns (number of views for each row).
4. jQuery Virtual Tour
The jQuery Virtual Tour library is an extension of the plugin above, and it relies upon the aforementioned library to function. That said, this plugin takes it one step further by providing users the ability to create interactive, virtual tours. To perform this, the library utilizes the <map> and <area> HTML tags to add interactive coordinates to the page. By relying on these HTML elements, it possible for tours to render in browsers where JavaScript is turned off!
When viewing the example for this plugin, we see that it creates a similar effect to google maps street view. It allows us to click on a specific point in the photo and navigate to the coordinates of that point, so that we are viewing the image from the section that we just clicked.
5. SpriteSpin
SpriteSpin is a jQuery plugin that creates animations from a directory of images or a stitched sprite-sheet. Once an animation is created it will then loop through these frame by frame, like a flip book.
The aim of this plugin is to provide a 360 degree view of any kind of product, similar to the 360 slider. SpriteSpin takes it a step further by providing a handful of additional features, all of which allow users to customize the behavior and presentation of the animations.
6. Pano
Pano is a reliable, straightforward library for creating panoramic images. It’s unminified codebase contains less than 250 lines, making using Pano an extremely light-weight resource for embedding images. With less code comes less functionality, so it should be no surprise that the pano provides only three options: img, interval, speed.
7. Panorama 360° jQuery Plugin
Next up is the Panorama 360 jQuery Plug in. Developed as a fork of another plugin, the creator of the Panorama 360 library was displeased with the scrolling effect and created this library with a focus on the ability to move smoothly from one slide of an image to the next.
The plugin can easily create a stunning section of a webpage, as well as entire pages that consist of nothing but the panorama like the demo link below.
8. jQuery Image Cube
Next on our list is the jQuery image cube library, a plugin unique from the rest on this list. As its name suggests, it allows users to display images in a cube-like manner.
Better yet, there are more than a dozen options that can be easily customized with minimal lines of code. Among these options are beforeRotate and afterRotate which are both callback functions, and provide an example of the control this library provides developers with. Additionally, users can modify the cube’s direction, speed, easing, and really customize the way the image cube is displayed through a number of options.
9. Cyclotron
Cyclotron gets it name from its ability to display panoramic images that rotate from side to side. When using Cyclotron, we can click and drag the mouse to one direction, and then watch as the image rotates in that the direction. The speed of the mouse, or finger drag sets the speed of rotation; after the initial drag, Cyclotron will rotate though an image continuously while maintaining the same speed throughout.
Cyclotron provides options like dampingFactor and autorotation for configuring cyclotron’s rotation behavior, which you can read more about here.
10. jQuery Simple Panorama Viewer
The last plugin on our list is the Simple Panorama Viewer. Like Cyclotron, users can move through images displayed with this plugin, however it is not intended to display continuously rotating images.
Instead, viewers will scroll to either the left or right (or up and down) depending on the scroll-speed of the plugin. By default, the plugin will perform an ease-in animation that will scroll from either right to left at a speed of 700ms. To change this, users can pass in custom values to the animationTime and easing options. To learn more about the options for this library, check here.
Final Thoughts
Hopefully by now, you have learned about some new jQuery plugins for creating panoramic images. Do you know of any I haven’t mentioned? Feel free to comment with their names below, in addition to any questions that you may have!
This post originally appeared on Sitepoint
The post 10 Best jQuery 360 degrees Image Display Plugins appeared first on Free Web Design Tutorials.