SOURCE

$(document).ready(function() {
            $('div.small_pic a').fancyZoom({scaleImg: true, closeOnClick: true});
        });

<div class="small_pic">
    <!--每一张图片都要单独定义一个id-->
    <a href="#pic_one">
        <img src="http://7xnyc4.com1.z0.glb.clouddn.com/nao.png" />
    </a>
</div>

<!-- 要放大显示的div -->
<!--每一张图片都要单独定义一个id-->
<div id="pic_one" style="display:none;"><img src="http://7xnyc4.com1.z0.glb.clouddn.com/lin.jpg" /></div>

body{padding:0; margin:0; font-size:84%; background:#eeeeee; color:#333333; font-family:'宋体',Verdana, Geneva, sans-serif;}
        ul,li,form,h1,h2,h3,h4,h5,h6,p{padding:0; margin:0; list-style-type:none;}
        i,cite{font-style:normal;}
        body,td,th {font-family: "宋体", Verdana, Geneva, sans-serif;}
        a{color:#34538b; text-decoration:underline;}a:hover{color:#F30; text-decoration:underline;}
        .small_pic{display:inline-block; width:100%; height:150px; padding-top: 80px; font-size:120px; text-align:center; *display:inline; zoom:1; vertical-align:middle;}
        .small_pic img{padding:3px; background:#ffffff; border:1px solid #cccccc; vertical-align:middle;}
        #zoom_close{ display: none;}