几行代码jquery实现图片放大预览

2016-02-22    编辑:tong_21     点击(
一款效果很好的响应式图片放大浏览特效,引用文件:jquery.fancybox.css、jquery-1.8.2.min.js、jquery.fancybox.js (没有大家可以直接百度搜索下载)

效果如下

 

'几行代码jquery实现图片放大预览'

具体方法我已经整理成文件,可以预览查看效果,也可以直接下载浏览源码:

 代码如下 复制代码

<!DOCTYPE html>
<html>
<head>
 <title>图片放大浏览</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   
 <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.2" media="screen" />
 
 <style type="text/css">
  .fancybox-custom .fancybox-skin {
   box-shadow: 0 0 50px #222;
  }
 </style>
</head>
<body>

 <p>
  <a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>

  <a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>

  <a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>

  <a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
 </p>

 
</body>
 <script type="text/javascript" src="../lib/jquery-1.8.2.min.js"></script>
 <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.3"></script>
 <script type="text/javascript">
  $(document).ready(function() {
   $('.fancybox-buttons').fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    prevEffect : 'none',
    nextEffect : 'none',
    closeBtn  : false,
    helpers : {
     title : {
      type : 'inside'
     }
    },
    afterLoad : function() {
     this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    }
   });
   
  });
 </script>
</html>