How to make image rotate in 360 degrees in HTML using jQuery / Javascript

If you are developing any e-commerce website, you may need to create feature in which you would like to show 360 degree product view using HTML, but this process cannot be done using HTML5 so you need include some javascript or jQuery, so in this tutorial I will show how to make image rotate in 360 degrees in HTML using Javascript library.

Ways for 360 degrees product view using HTML5 , Javascript and jQuery

360 degrees Image view using Javascript and HTML5 canvas

In this example we will be using https://www.createjs.com/easeljs with HTML5 canvas. Before that you must understand the simple logic of 360 degree image rotation, basically we will be storing all sides images of a product in a folder and then when user scroll or move mouse, we will change image using Javascript and show that particular image.

360 degree image view without HTML5 Canvas using javascript library

In this method, we will be using circlr.js is a lightweight JavaScript library which allows you to create a 360-degree panoramic view from a series of images.

circlr.js allows the visitor to rotate the product images with scroll, mouse and touch events and works on all touch devices without any other touch library support, you can download the library first and include the latest version of circlr.js library at the end of your document.

Now we need to create a div with different angle images of the product , here the HTML for it

360 degree product image view using ThreeSixty jQuery plugin

In the above two example, we were not using jQuery plugin, so here is the example of using jQuery ThreeSixty Plugin.

The jQuery ThreeSixty plugin has three modes of operation

Click – 360 degree image rotation is performed after mouse is clicked on the image and moved.

MouseMove - 360 degree image rotation is performed when mouse is moved over the Image.

Auto - 360 degree image rotation is performed automatically.

So, again we need to place different angle images of the product in the HTML

Once we have the HTML, we need to inherit the JavaScript files jQuery and the 360 degree Product Image plugin. Then inside the jQuery document read event handler, we will apply the plugin to the three product images.