360°/3D Image Viewer In Vanilla JavaScript

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">&laquo;</button>
  <button class="nxt">&raquo;</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);
      };
  }
}