Visor de imágenes de 360 °/3D en Vanilla JavaScript

Vista prévia

Descripción

Una biblioteca JavaScript simple y sencilla de vainilla que proporciona una vista de 360 Â °/3D para las imágenes de sus productos. También admite el movimiento del ratón y la navegación del teclado.

Funcionamiento

Prepare las imágenes de sus productos con diferentes ángulos y asigne un nombre a estas:

1.png
2.png
3.png
...

Cree el código HTML para el visor de imágenes de 360 grados y agregue la primera imagen de producto como estas:

<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>

El CSS para el estilo del visor de imágenes.

#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);
}
}

El núcleo JavaScript para activar el visor de imágenes de 360 grados.

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);



};

}
}