Author: | Jeya-Prakash |
---|---|
Views Total: | 7,207 views |
Official Page: | Go to website |
Last Update: | January 9, 2018 |
License: | MIT |
Preview:

Description:
A simple, plain vanilla JavaScript library to provides a 360°/3D view for your product images. Also supports mouse movement and keyboard navigation.
How to use it:
Prepare your product images with different angles and name them as these:
1.png 2.png 3.png ...
Create the HTML for the 360-degree image viewer and add the first product image like these:
<div class="container" id="pdtViewer"> <div id="loader"> <div class="three-bounce"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> </div> <img src="./img/1.png" id="car" /> <button class="prev">«</button> <button class="nxt">»</button> </div> <div id="dummy"></div>
The CSS to style the image viewer.
#pdtViewer.container { width: 67%; height: 450px; margin: 0 auto; border: 0.5px solid #eee; } #pdtViewer img { padding: 40px 20px; } @media screen and (max-width:1250px) { #pdtViewer img { width: 100%; } } #pdtViewer .nxt { left: 85%; } #pdtViewer .prev { left: 12%; } #pdtViewer button { position: absolute; top: 57%; background: none; border-radius: 30px; padding: 0; font-weight: bold; font-size: 30px; width: 50px; cursor: pointer; height: 52px; box-shadow: 0 6px 15px #aaa; } #pdtViewer button:focus { outline: 0; } #dummy { display: none; } #loader { width: 67%; height: 450px; position: absolute; background: rgba(0,0,0,0.5); } .three-bounce { text-align: center; font-size: 26px; position: absolute; top: 50%; left: 50%; } .three-bounce div { display: inline-block; width: 18px; height: 18px; border-radius: 100%; background-color: #fff; -webkit-animation: bouncedelay 1.4s infinite ease-in-out both; animation: bouncedelay 1.4s infinite ease-in-out both; } .three-bounce .one { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .three-bounce .two { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { transform: scale(1); -webkit-transform: scale(1); } }
The core JavaScript to activate the 360-degree image viewer.
window.addEventListener("load", function () { document.querySelector('#loader').style.display = 'none'; }); //pdt360DegViewer(imgid, count, path, imgType, keyNavigation); pdt360DegViewer('car', 51, './img/', 'png', true); function pdt360DegViewer(id, n, p, t, keys) { var i = 1, j = 0, move = [], img = document.querySelector(`#${id}`); for (var k = 1; k <= n; k++) { document.getElementById('dummy').innerHTML += `<img src="./img/${k}.png">` } img.addEventListener('mousemove', function (e) { j++; var coord = (e.clientX - img.offsetLeft); move.push(coord); var l = move.length, oldMove = move[l - 2], newMove = move[l - 1]; if (!(j % 3)) { if (newMove > oldMove) nxt(this); else if (newMove < oldMove) prev(this); } }); img.addEventListener('mouseleave', function () { move = []; }); function prev(e) { if (i <= 1) { i = n; e.src = `${p}${--i}.${t}`; nxt(e); } else e.src = `${p}${--i}.${t}`; } function nxt(e) { if (i >= n) { i = 1; e.src = `${p}${++i}.${t}`; prev(e); } else e.src = `${p}${++i}.${t}`; } var prevBtn = document.querySelectorAll('.prev'); for (var i = 0; i < prevBtn.length; i++) { prevBtn[i].addEventListener('click', function () { prev(this.parentNode.querySelector('img')); }); } var nxtBtn = document.querySelectorAll('.nxt'); for (var i = 0; i < nxtBtn.length; i++) { nxtBtn[i].addEventListener('click', function () { nxt(this.parentNode.querySelector('img')); }); } if (keys) { window.onkeydown = function (e) { if (e.keyCode == 37) prev(img); else if (e.keyCode == 39) nxt(img); }; } }