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
Let's discuss few ways to create 360 degree image or product view using HTML5 canvas, javascript library and jQuery library.
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.
Here is the HTML part, which contains canvas element and required JS
<script type="text/javascript" src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<canvas id='canvas' width="1000" height="465"></canvas>Javascript
var stage;
function init() {
var canvas = document.getElementById("canvas");
if (!canvas || !canvas.getContext) return;
stage = new createjs.Stage(canvas);
stage.enableMouseOver(true);
stage.mouseMoveOutside = true;
createjs.Touch.enable(stage);
var imgList = [
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/1.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/2.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/3.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/4.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/5.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/6.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/7.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/8.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/10.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/11.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/12.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/13.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/14.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/15.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/16.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/17.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/18.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/19.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/20.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/21.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/22.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/23.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/24.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/25.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/26.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/27.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/28.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/29.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/30.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/31.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/32.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/33.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/34.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/35.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/36.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/37.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/38.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/39.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/40.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/41.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/42.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/43.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/44.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/45.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/46.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/47.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/48.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/49.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/50.png",
"https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/51.png"];
var images = [], loaded = 0, currentFrame = 0, totalFrames = imgList.length;
var rotate360Interval, start_x;
var bg = new createjs.Shape();
stage.addChild(bg);
var bmp = new createjs.Bitmap();
stage.addChild(bmp);
var myTxt = new createjs.Text("360 Car", '24px Ubuntu', "#ffffff");
myTxt.x = myTxt.y =20;
myTxt.alpha = 0.08;
stage.addChild(myTxt);
function load360Image() {
var img = new Image();
img.src = imgList[loaded];
img.onload = img360Loaded;
images[loaded] = img;
}
function img360Loaded(event) {
loaded++;
bg.graphics.clear()
bg.graphics.beginFill("#222").drawRect(0,0,stage.canvas.width * loaded/totalFrames, stage.canvas.height);
bg.graphics.endFill();
if(loaded==totalFrames) start360();
else load360Image();
}
function start360() {
document.body.style.cursor='none';
// 360 icon
var iconImage = new Image();
iconImage.src = "";
iconImage.onload = iconLoaded;
// update-draw
update360(0);
// first rotation
rotate360Interval = setInterval(function(){ if(currentFrame===totalFrames-1) { clearInterval(rotate360Interval); addNavigation(); } update360(1); }, 25);
}
function iconLoaded(event) {
var iconBmp = new createjs.Bitmap();
iconBmp.image = event.target;
iconBmp.x = 20;
iconBmp.y = canvas.height - iconBmp.image.height - 20;
stage.addChild(iconBmp);
}
function update360(dir) {
currentFrame+=dir;
if(currentFrame<0) currentFrame = totalFrames-1;
else if(currentFrame>totalFrames-1) currentFrame = 0;
bmp.image = images[currentFrame];
}
//-------------------------------
function addNavigation() {
stage.onMouseOver = mouseOver;
stage.onMouseDown = mousePressed;
document.body.style.cursor='auto';
}
function mouseOver(event) {
document.body.style.cursor='pointer';
}
function mousePressed(event) {
start_x = event.rawX;
stage.onMouseMove = mouseMoved;
stage.onMouseUp = mouseUp;
document.body.style.cursor='w-resize';
}
function mouseMoved(event) {
var dx = event.rawX - start_x;
var abs_dx = Math.abs(dx);
if(abs_dx>5) {
update360(dx/abs_dx);
start_x = event.rawX;
}
}
function mouseUp(event) {
stage.onMouseMove = null;
stage.onMouseUp = null;
document.body.style.cursor='pointer';
}
function handleTick() {
stage.update();
}
document.body.style.cursor='progress';
load360Image();
// TICKER
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(60);
createjs.Ticker.useRAF = true;
}
// Init
window.addEventListener('load', init, false);Here is the Codepen demo
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
<div style="width:300px">
<div id="circlr" >
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/1.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/2.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/3.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/4.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/5.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/6.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/7.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/8.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/10.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/11.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/12.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/13.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/14.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/15.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/16.png">
<img data-src= "https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/17.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/18.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/19.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/20.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/21.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/22.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/23.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/24.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/25.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/26.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/27.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/28.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/29.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/30.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/31.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/32.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/33.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/34.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/35.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/36.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/37.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/38.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/39.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/40.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/41.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/42.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/43.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/44.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/45.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/46.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/47.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/48.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/49.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/50.png">
<img data-src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/51.png">
<div id="loader"></div>
</div>
</div>
and initialize the circlr.js
<script type="text/javascript">
var crl = circlr('circlr', {
scroll : true,
loader : 'loader'
});
</script>Here is the fiddle example
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.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th>
Mouse Click
</th>
<th>
Mouse Move
</th>
<th>
Automatic
</th>
</tr>
<tr>
<td style="width:300px; height:300px">
<img alt="" src="" id="product1" />
</td>
<td style="width:300px; height:300px">
<img alt="" src="" id="product2" />
</td>
<td style="width:300px; height:300px">
<img alt="" src="" id="product3" />
</td>
</tr>
</table>
<div id="dvImages" style="display: none" style="width:300px; height:300px">
<img data-src="http://jsrun.it/assets/N/b/D/X/NbDXj.jpg">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/1.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/2.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/3.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/4.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/5.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/6.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/7.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/8.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/10.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/11.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/12.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/13.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/14.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/15.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/16.png">
<img src= "https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/17.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/18.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/19.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/20.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/21.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/22.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/23.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/24.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/25.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/26.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/27.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/28.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/29.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/30.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/31.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/32.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/33.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/34.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/35.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/36.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/37.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/38.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/39.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/40.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/41.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/42.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/43.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/44.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/45.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/46.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/47.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/48.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/49.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/50.png">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/51.png">
</div>A loop is executed over all the Image elements in the hidden DIV and the source of each image element is loaded into a JavaScript Array.
Then the source of all the three product images is set to the first element in the array and one by one the 360 degree Product Image jQuery plugin is applied to each Product image.
Click mode- This mode has following properties.
- method – value must be set to “click”.
- sensibility – it is used to adjust rotation speed. You can increase and decrease this value to adjust the rotation speeds.
MouseMove mode- This mode has following properties.
- method – value must be set to "mousemove".
- sensibility – it is used to adjust rotation speed. You can increase and decrease this value to adjust the rotation speed.
Auto mode -This mode has following properties.
- method – value must be set to “auto”.
- direction – it is used to set the direction of rotation. The values are forward and backward.
- Autoscrollspeed – It is to adjust the speed. The lower number gives faster rotation.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/matdumsa/jQuery.threesixty/master/jquery.threesixty.js"></script>
<script type="text/javascript">
$(function () {
//Load the image URLs into an Array.
var arr = new Array();
$("#dvImages img").each(function () {
arr.push($(this).attr("src"));
});
//Set the first image URL as source for the Product.
$("#product1, #product2, #product3").attr("src", arr[0]);
//Click mode.
$("#product1").threesixty({ images: arr,
method: 'click',
sensibility: 1
});
//MouseMove mode.
$("#product2").threesixty({ images: arr,
method: 'mousemove',
sensibility: 1
});
//Automatic mode.
$("#product3").threesixty({ images: arr,
method: 'auto',
direction: 'forward',
autoscrollspeed: 100
});
});
</script>Fiddle demo
That's it, hope it helps.
You may also like to read:
Read or Generate QR Code using Javascript
Using Google Translate to translate language using HTML- Javascript
Google places autocomplete example without Map in Javascript
Buy us a coffee
Become a Patron