XZoom

XZoom for product page

Documentation

XZoom install files:

Styles
Scripts
Images (folder example should be in root folder)

PHP

<div class="xzoom_wrap">
	<div class="product_zoom hidden_slider" data-slider="product_zoom">
		<div>
			<img class="xzoom" src="/imagephp/width=418&image=/img/phone_1.jpg" xoriginal="/imagephp/width=1000&image=/img/phone_1.jpg" />
		</div>
	</div>
	<div class="product_zoom_nav hidden_slider xzoom-thumbs" data-slider="product_zoom_nav">
		<?php for ($i = 1; $i < 7; $i++) :?>
			<div>
				<a href="/imagephp/width=1000&image=/img/phone_<?= $i ?>.jpg" class="slider_item">
					<img class="xzoom-gallery" width="100" src="/imagephp/width=418&image=/img/phone_<?= $i ?>.jpg" <?= $i == 0 ? 'xpreview="/imagephp/width=1000&image=/img/phone_'. $i .'.jpg"' : '' ?>>
				</a>
			</div>
		<?php endfor ;?>
	</div>
</div>

CSS

.xzoom_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:50%}

.product_zoom{width:-webkit-calc(100% - 8.1rem);width:-moz-calc(100% - 8.1rem);width:calc(100% - 8.1rem);-webkit-box-ordinal-group:2;-webkit-order:1;-moz-box-ordinal-group:2;-ms-flex-order:1;order:1;}
.product_zoom img{width:100%;-o-object-fit:contain;object-fit:contain;font-family:'object-fit: contain;'}
.product_zoom .slick-slide.slick-active{opacity:1!important}

.product_zoom_nav {width: 6.1rem;margin: 0 2rem 0 0;-webkit-box-ordinal-group: 1;-webkit-order: 0;-moz-box-ordinal-group: 1;-ms-flex-order: 0;order: 0;}
.product_zoom_nav .slider_item {width: 6rem;height: 6rem;padding: .5rem;margin: .5rem 0;border: .1rem solid #e7e7e7;-webkit-border-radius: .7rem;-moz-border-radius: .7rem;border-radius: .7rem;display: block;cursor: pointer;}
.product_zoom_nav .slider_item img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;font-family:"object-fit: contain;";margin:0;border:none}
.product_zoom_nav .slick-current .slider_item{border-color:#ff4001}

.xzoom{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
.xactive{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:none}

/* z-index fix */
.z_index_column{position:relative;z-index:0}

SCSS

.xzoom_wrap {
	display: flex;
	flex-wrap: wrap;
	width: 50%;
}

.product_zoom{
	width: calc(100% - 8.1rem);
	order: 1;
	
	img{
		width: 100%;
		object-fit: contain;
		font-family: 'object-fit: contain;';
	}
	
	.slick-slide.slick-active {
		opacity: 1 !important;
	}
}

.product_zoom_nav {
	width: 6.1rem;
	margin: 0 2rem 0 0;
	order: 0;
	
	.slider_item {
		width: 6rem;
		height: 6rem;
		padding: .5rem;
		margin: .5rem 0;
		border: .1rem solid #e7e7e7;
		border-radius: .7rem;
		display: block;
		cursor: pointer;
		
		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			font-family: "object-fit: contain;";
			margin: 0;
			border: none;
		}
	}
	
	.slick-current {
		.slider_item {
			border-color: #ff4001;
		}
	}
}

.xzoom {
	box-shadow: none;
}
.xactive {
	box-shadow: none;
	border: none;
}

/* z-index fix */
.z_index_column {
	position: relative;
	z-index: 0
}

JavaScript

/* XZoom */
$(".xzoom, .xzoom-gallery").xzoom({
	zoomWidth: 400,
	defaultScale: -1,
	tint: '#f4f4f4',
	Xoffset: 15,
	scroll: false,
});

/* Sliders */
$('.product_zoom').slick({
	arrows: false,
	slidesToShow: 1,
	slidesToScroll: 1,
	fade: true,
	draggable: false,
	asNavFor: '.product_zoom_nav'
});

$('.product_zoom_nav').slick({
	arrows: false,
	slidesToShow: 6,
	slidesToScroll: 1,
	infinite: false,
	dots: false,
	focusOnSelect: true,
	draggable: false,
	vertical: true,
	verticalSwiping: true,
	asNavFor: '.product_zoom',
	responsive: [
		{
			breakpoint: 1101,
			settings: {
				slidesToShow: 5,
				slidesToScroll: 1
			}
		},
		{
			breakpoint: 993,
			settings: {
				slidesToShow: 7,
				slidesToScroll: 1
			}
		},
		{
			breakpoint: 601,
			settings: {
				slidesToShow: 5,
				slidesToScroll: 1
			}
		}
	]
});