This popular article was updated on 1st September, 2016 to reflect the current state of image panorama plugins.
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!
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
disableSpin, which allow users to craft a completely custom experience.
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.
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
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
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.
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.
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:
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
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.
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
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
easing options. To learn more about the options for this library, check here.
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!
Thomas Greco is a web developer based out of New York City specializing in full-stack development with the M.E.A.N. stack technologies. Before web development, Thomas worked as a graphic designer, and he continues to utilize his background in design when building web applications. Have a question for Thomas ? You can reach him on Twitter.
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
The Principles of Beautiful Web Design, 4th Edition
Learn PHP in One Day and Learn It Well
Docker for Web Developers