Galleria 360 con jQuery touchSwipe

Oggi vediamo come implementare una galleria a 360° con jQuery touchSwipe.

In questo modo la gallery sarà utilizzabile anche sui dispositivi mobile.

La prima cosa che dobbiamo fare è avere le foto rinominate in sequenza; ad esempio:

• camicia-1.jpg
• camicia-2.jpg
• ecc

La sequenza servirà per dare l'effetto 360°.

Dopo di che scaricate il plugin dal sito e includetelo nella pagina; ovviamente vi serve anche jQuery:

<script src="js/jquery.touchSwipe.min.js"></script>

Questo il nostro codice Javascript:

$(function () {
	var num = 12;
	for (let i = 1; i <= num; i++) {
		let img = document.createElement('img');
		img.src = 'img/prodotto-' + i + '.jpg';
		document.getElementById('preload-imgs').appendChild(img);
	}

	$(function () {
		let swipeOptions = {
			triggerOnTouchEnd: true,
			swipeStatus: doSwipe,
			allowPageScroll: "vertical",
			threshold: 75
		}
		imgs = $(".img-container");
		imgs.swipe(swipeOptions);
	});

	function doSwipe(event, phase, direction, distance) {
		if (direction === "left") {
			goToLeft(distance);
		} else if (direction === "right") {
			goToRight(-distance);
		}
	}

	function goToLeft(imgNum) {
		imgNum = Math.floor(imgNum / 8);
		if (imgNum < 1) {
			imgNum += num;
		}
		if (imgNum > num) {
			imgNum -= num;
		}
		document.getElementById("img_art360").src = "img/prodotto-" + imgNum + ".jpg";
	}

	function goToRight(imgNum) {
		imgNum = Math.floor(imgNum / 8);
		let num2 = -Math.abs(num);
		if (imgNum > num2) {
			imgNum += num;
		}
		if (imgNum <= num2) {
			imgNum += num * 2;
		}
		document.getElementById("img_art360").src = "img/prodotto-" + imgNum + ".jpg";
	}
})

La variabile num, corrisponde al numero di foto da mettere per l'effetto 360°; ovviamente più ne hai e più sarà fluida "l'animazione".

Questo il codice HTML:

<div class="img-container">
	<div class="img360">
		<img id="img_art360" src="img/prodotto-1.jpg" alt="prodotto 1">
	</div>
</div>
<div id="preload-imgs"></div>

Infine 2 regole CSS:

#img_art360 {
    width: 100%;
    margin: 0;
    padding: 0;
}

#preload-imgs {
    display: none;
}

Enjoy!