=========================================![]()
===========================================================================================
ONE IMAGE ZOOM
=========================================![]()
===========================================================================================
<div id="shopify-section-ProductTemplate" class="shopify-section">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script>
<style>
/* CODE IS TAKEN FROM bootstrap.min.css */
.container {
position: absolute;
left: 18px;
top:0px;
height: 300px;
width: 411px;
}
/* CODE IS TAKEN FROM timber.css */
html, body {
padding: 0;
margin: 0;
}
img {
border: 0 none;
}
img, iframe {
max-width: 100%;
}
.zoomLens{
background-position: 0px 0px;
border: 4px solid rgb(136, 136, 136);
width: 200px;
height: 200px;
background-repeat: no-repeat;
position:relative;
border-radius:100%;
display: none;
}
</style>
<div class="container">
<img class="product-zoom"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhheyoQKe5nS_kikg5sgp4B5O78DV2PMV8VyAt-YziGPM8LXWhxve3APgWkjVvRLEcTukrRSd611sI1cEBrBnv26zrKd5yMrrG55bay7ssHK4pO19jH9s-ebqq0_4NFy5IKKckorQi7mCBL/s1600/product-template.liquid.png"></div>
<script>
function productZoom(){
$(".product-zoom").elevateZoom({
gallery: 'ProductThumbs',
galleryActiveClass: "active",
zoomWindowWidth:411,
zoomWindowHeight:274,
zoomWindowOffetx: 10,
scrollZoom: true,
zoomType: "inner",
cursor: "crosshair"
});
};
function productZoomDisable(){
if( $(window).width() < 767 ) {
$('.zoomContainer').remove();
$(".product-zoom").removeData('elevateZoom');
$(".product-zoom").removeData('zoomImage');
} else {
productZoom();
}
};
productZoomDisable();
$(window).resize(function() {
productZoomDisable();
});
</script>
</div>
