This gallery code snippet offers a straightforward solution for incorporating product image zoom and interactive features into your website. By leveraging popular plugins like xzoom, hammer.js, Fancybox, and Magnific Popup, you can effortlessly enable image zooming, gallery navigation, and touch device interactions. Whether you want to enhance your product images or create captivating image galleries, this code provides a flexible and user-friendly implementation. Just integrate it into your website and provide an engaging visual experience for your visitors.
How to Create a Product Gallery With Image Zoom
First of all, load the following assets into the head tag of your HTML document.
<link rel='stylesheet' href='https://unpkg.com/xzoom/dist/xzoom.css'> <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css'>
Create the HTML structure for gallery and add your products images as follows:
<div class="container">
<!-- default start -->
<section id="default" class="padding-top0">
<div class="row">
<div class="large-12 column"><h3>Product Zooming</h3></div>
<hr>
<div class="large-5 column">
<div class="xzoom-container">
<img class="xzoom" id="xzoom-fancy" src="path/to/image.jpg" xoriginal="path/to/full-image.jpg" />
<div class="xzoom-thumbs">
<a href="path/to/image.jpg"><img class="xzoom-gallery" width="80" src="path/to/image.jpg" xpreview="path/to/image.jpg" title="The description goes here"></a>
<a href="path/to/image.jpg"><img class="xzoom-gallery" width="80" src="path/to/image.jpg" title="The description goes here"></a>
<a href="path/to/image.jpg" title="The description goes here"></a>
<a href="path/to/image.jpg"><img class="xzoom-gallery" width="80" src="path/to/image.jpg" title="The description goes here"></a>
</div>
</div>
</div>
</div>
</section>
<!-- default end -->
</div>
</body>
Style using the following CSS styles:
#default{
text-align:center;
}
Load the following scripts before closing the body tag:
<script src='https://code.jquery.com/jquery-2.1.1.js'></script> <script src='https://unpkg.com/xzoom/dist/xzoom.min.js'></script> <script src='https://hammerjs.github.io/dist/hammer.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js'></script>
Add the following JavaScript function to activate the image gallery:
(function ($) {
$(document).ready(function() {
$('.xzoom, .xzoom-gallery').xzoom({zoomWidth: 400, title: true, tint: '#333', Xoffset: 15});
$('.xzoom2, .xzoom-gallery2').xzoom({position: '#xzoom2-id', tint: '#ffa200'});
$('.xzoom3, .xzoom-gallery3').xzoom({position: 'lens', lensShape: 'circle', sourceClass: 'xzoom-hidden'});
$('.xzoom4, .xzoom-gallery4').xzoom({tint: '#006699', Xoffset: 15});
$('.xzoom5, .xzoom-gallery5').xzoom({tint: '#006699', Xoffset: 15});
//Integration with hammer.js
var isTouchSupported = 'ontouchstart' in window;
if (isTouchSupported) {
//If touch device
$('.xzoom, .xzoom2, .xzoom3, .xzoom4, .xzoom5').each(function(){
var xzoom = $(this).data('xzoom');
xzoom.eventunbind();
});
$('.xzoom, .xzoom2, .xzoom3').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
xzoom.eventleave = function(element) {
element.hammer().on('tap', function(event) {
xzoom.closezoom();
});
}
xzoom.openzoom(event);
});
});
$('.xzoom4').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
var counter = 0;
xzoom.eventclick = function(element) {
element.hammer().on('tap', function() {
counter++;
if (counter == 1) setTimeout(openfancy,300);
event.gesture.preventDefault();
});
}
function openfancy() {
if (counter == 2) {
xzoom.closezoom();
$.fancybox.open(xzoom.gallery().cgallery);
} else {
xzoom.closezoom();
}
counter = 0;
}
xzoom.openzoom(event);
});
});
$('.xzoom5').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
var counter = 0;
xzoom.eventclick = function(element) {
element.hammer().on('tap', function() {
counter++;
if (counter == 1) setTimeout(openmagnific,300);
event.gesture.preventDefault();
});
}
function openmagnific() {
if (counter == 2) {
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var i, images = new Array();
for (i in gallery) {
images[i] = {src: gallery[i]};
}
$.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
} else {
xzoom.closezoom();
}
counter = 0;
}
xzoom.openzoom(event);
});
});
} else {
//If not touch device
//Integration with fancybox plugin
$('#xzoom-fancy').bind('click', function(event) {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
$.fancybox.open(xzoom.gallery().cgallery, {padding: 0, helpers: {overlay: {locked: false}}});
event.preventDefault();
});
//Integration with magnific popup plugin
$('#xzoom-magnific').bind('click', function(event) {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var i, images = new Array();
for (i in gallery) {
images[i] = {src: gallery[i]};
}
$.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
event.preventDefault();
});
}
});
})(jQuery);
That’s all! hopefully, you have successfully integrated this Product Gallery into your project. If you have any questions or suggestions, feel free to comment below.
