imgBox - 一个可实现图像的点击放大效果的jQuery插件
  • 分享到微信朋友圈
    X
查看演示

关于imgBox

imgBox是一个jQuery 插件，可实现图像的平滑缩放效果。可实现点击图片查看大图的效果，通常在相册页面使用。

如何使用imgBox

1.引用必要的文件：

<script type="text/javascript" src="jquery/jquery.min.js"></script> 
<script type="text/javascript" src="imgBox/jquery.imgbox.js"></script> 
<link rel="stylesheet" href="imgBox/imgbox.css" />

2.添加一些图像：

<a class="example1" title="图片介绍" href="images/1.jpg">
    <img alt="图片介绍" src="images/1.jpg" />
    <h4>
        图片介绍</h4>
</a>
<a class="example1" title="图片介绍" href="images/2.jpg">
    <img alt="图片介绍" src="images/2.jpg" />
    <h4>
        图片介绍</h4>
</a>
<a class="example1" title="图片介绍" href="images/3.jpg">
    <img alt="图片介绍" src="images/3.jpg" />
    <h4>
        图片介绍</h4>
</a>

注意：这是最简单的形式，imgBox 设计用于更复杂的 html 结构（例如 ul > li > a > img 等）。

3.引用imgBox：

$(document).ready(function () { 
    $(".example1").imgbox({
        'speedIn': 0,
        'speedOut': 0,
        'alignment': 'center',
        'overlayShow': true,
        'allowMultiple': false
    });
});

参数说明

$ (".example1").imgbox ({ 
  padding :  10 ,                //设置图像周围的填充/透明边框。
  border :  2 ,                  //设置图像周围的实线边框。
  alignment :  'center' ,        //位置-可以是自动或居中。
  allowMultiple :  false ,       //允许打开多个imgBox。
  autoScale :  true ,            //缩放图像以适合可用空间。
  speedIn :  500 ,               //放大动画的速度（以毫秒为单位）（如果设置为 0，则会淡入）
  speedOut :  500,              // 缩小动画的速度（以毫秒为单位）（如果设置为 0，则会淡出）
  easingIn :  'swing' ,          // 设置放大动画。
  easingOut :  'swing' ,         // 设置缩小动画。
  zoomOpacity :  false ,         // 如果为 true ，则在缩放时更改图像透明度。
  overlayShow :  true ,          // 在 imgBox 下方显示叠加层。
  overlayOpacity :  0.7 ,        // 设置叠加层不透明度。
  hideOnOverlayClick :  true ,   // 单击叠加层时隐藏 imgBox。
  hideOnContentClick :  false,  // 单击图像时隐藏 imgBox。
  slideshow :  true ,            // 显示下一个/上一个控件。
  theme :  'light'              // 选择配色方案（浅色/黑色）。
});

下载地址：https://github.com/tsi/jQuery.imgBox/zipball/master