本实例是由开源github网站提供
将demo.html的js代码改成如下就可以实现tmall商品的效果了；
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery elevateZoom Demo</title>
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>
</head>
<body>
<h1>Basic Zoom Example</h1>
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
<br />
see more examples online <a href="http://www.elevateweb.co.uk/image-zoom/examples">http://www.elevateweb.co.uk/image-zoom/examples</a>
<script>
$("#zoom_01").elevateZoom();
</script>
</body>
</html>
效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery elevateZoom Demo</title>
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>
<style>
/*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>
</head>
<body>
<img id="img_01" src="./images/small/image1.jpg" data-zoom-image="./images/large/image1.jpg"/>
<ul id="gal1">
<a href="#" data-image="./images/small/image1.jpg" data-zoom-image="./images/large/image1.jpg">
<img id="img_01" src="./images/thumb/image1.jpg" />
</a>
<a href="#" data-image="./images/small/image2.jpg" data-zoom-image="./images/large/image2.jpg">
<img id="img_01" src="./images/thumb/image2.jpg" />
</a>
<a href="#" data-image="./images/small/image3.jpg" data-zoom-image="./images/large/image3.jpg">
<img id="img_01" src="./images/thumb/image3.jpg" />
</a>
<a href="#" data-image="./images/small/image4.jpg" data-zoom-image="./images/large/image4.jpg">
<img id="img_01" src="./images/thumb/image4.jpg" />
</a>
</div>
<script>
$("#img_01").elevateZoom({gallery:'gal1', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//pass the images to Fancybox
$("#gal1").bind("click", function(e) {
var ez = $('#gal1').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
</script>
</body>
</html>
效果如下
