放大图片组缩略图大图展示 fancybox 图片组浏览-freejs.net代码演示

首页>>Jquery图片>>放大图片组缩略图大图展示 fancybox 图片组浏览(2013-10-31)

放大图片组缩略图大图展示 fancybox 图片组浏览

一般用于产品详情展示，例如京东,易迅都是类似的效果

css文件和js请到演示页面查看

XML/HTML Code

<div class="zoom-wrapper">
<div class="zoom-left">
<div style="height:274px;width:411px;" class="zoomWrapper"><img style="border: 1px solid rgb(232, 232, 230); position: absolute;" id="zoom_03" src="images/image1.png" data-zoom-image="images/image1.jpg" width="411"></div>
<div id="gallery_01" style="width:500px; padding-left:88px;">
<a href="#" class="elevatezoom-gallery active" data-update="" data-image="images/image1.png" data-zoom-image="images/image1.jpg">
<img src="images/image1.png" width="100"></a>
<a href="#" class="elevatezoom-gallery" data-image="images/image2.png" data-zoom-image="images/image2.jpg"><img src="images/image2.png" width="100"></a>
<a href="http://www.elevateweb.co.uk/image-zoom/tester" class="elevatezoom-gallery" data-image="images/image3.png" data-zoom-image="images/image3.jpg">
<img src="images/image3.png" width="100">
</a>
<a href="http://www.elevateweb.co.uk/image-zoom/tester" class="elevatezoom-gallery" data-image="images/image4.png" data-zoom-image="images/image4.jpg"><img src="images/image4.png" width="100"></a>
</div>
</div>
</div>

JavaScript Code

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active", imageCrossfade: true, loadingIcon: "images/spinner.gif"});
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
ez.closeAll(); //NEW: This function force hides the lens, tint and window
$.fancybox(ez.getGalleryList());
return false;
});
});
</script>