romang,
тоже самое но с актуальными версиями
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery elevateZoom Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js'></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<style media="screen">
/*set a border on the images to prevent shifting*/
#gallery_01 img{border:2px solid white;}
/*Change the colour*/
.active img{border:2px solid #333 !important;}
</style>
<script>
$(function() {
var options = {
gallery: "gal1",
cursor: "pointer",
galleryActiveClass: "active",
imageCrossfade: true,
loadingIcon: "http://www.elevateweb.co.uk/spinner.gif"
};
var ez = $("#img_01").elevateZoom(options).on("click", function(e) {
$.fancybox(ez.getGalleryList());
return false
}).data("elevateZoom")
});
</script>
</head>
<body>
<h1>Basic Zoom Example</h1>
<img id="img_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
<div id="gal1">
<a href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg">
<img class="img_01" src="images/thumb/image1.jpg" />
</a>
<a href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg">
<img class="img_01" src="images/thumb/image2.jpg" />
</a>
<a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg">
<img class="img_01" src="images/thumb/image3.jpg" />
</a>
<a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">
<img id="img_01" src="images/thumb/image4.jpg" />
</a>
</div>
<script>
</script>
</body>
</html>