Fancybox 图片查看器

快捷图片查看插件

官网

fancyBox - Fancy jQuery Lightbox Alternative

在页面中添加插件所需要的js/css文件

1
2
3
<script type="text/javascript" src="${ctx }/assets/plugins/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctx }/assets/plugins/fancybox/js/jquery.fancybox.pack.js"></script>
<link href="${ctx }/assets/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen">

在需要查看的img标签外添加一个a标签

1
2
3
<a class="fancybox" rel="group" href="image1.jpg">
	<img src="image1.jpg" />
</a>

初始化插件

1
$(".fancybox").fancybox();

API

  1. padding
    • 图片距离弹出框的距离
    • 整数或数组
    • 整数表示四个方向的内边距都为该整数
    • 数组则表示各个方向不同的值 [top, right, bottom, left]
    • 默认值:15
  2. margin
    • 弹出框距离浏览器四个方向的距离
    • 整数或数组
    • 整数表示距离四个方向的距离都为该整数
    • 数组则表示各个方向不同的值 [top, right, bottom, left]
    • 默认值:20
  3. width
    • 当auotoSize=false时弹出框的宽度
    • 仅适用于 iframe、swf、inline、ajax和html模式
    • 数字或 auto
    • 默认值:800
  4. height
    • 当auotoSize=false时弹出框的高度
    • 仅适用于 iframe、swf、inline、ajax和html模式
    • 数字或 auto
    • 默认值:600
  5. minWidth
    • 弹出框的最小宽度
    • 数字
    • 默认值:100
  6. minHeight
    • 弹出框的最小高度
    • 数字
    • 默认值:100
  7. maxWidth
    • 弹出框的最大宽度
    • 数字
    • 默认值:9999
  8. maxHeight
    • 弹出框的最大高度
    • 数字
    • 默认值:9999
  9. autoSize
    • 自动尺寸
    • 如果设置为true,则要设置autoHeight和autoWidth为true
    • true或false
    • 默认值:true
  10. autoHeight
    • 自动调整高度
    • 如果设置为true,那么ajax、inline、html模式下的弹出框将自动调整高度
    • true或false
    • 默认值:false
  11. autoWidth
    • 自动调整宽度
    • 如果设置为true,那么ajax、inline、html模式下的弹出框将自动调整宽度
    • true或false
    • 默认值:false
  12. autoResize
    • 自动调整尺寸
    • 设置为true,当浏览器窗口大小改变的时候将自动调整弹出框大小
    • 布尔值
    • 默认值:!isTouch
  13. autoCenter
    • 自动居中
    • 如果设置为true,那么弹出框总是居中的
    • 布尔值
    • 默认值:!isTouch
  14. fitToView
    • 如果设置为true,弹出框将会在打开之前自动适应大小
    • 布尔值
    • 默认值:true
  15. aspectRatio
    • 如果设置为true,那么重置大小将会被图片的比例所影响
    • 布尔值
    • 默认值:false
  16. topRatio
    • 弹出框距离顶部与距离底部的比例
    • 如果为0.5,则表示居中
    • 数字
    • 默认值:0.5
  17. leftRatio
    • 弹出框距离左边与距离右边的比例
    • 如果为0.5,则表示居中
    • 数字
    • 默认值:0.5
  18. scrolling
    • 添加到scrollbars滚动条上的样式
    • auto_yes_no/visible
    • 默认值:auto
  19. wrapCSS
    • 环绕元素的样式
    • 字符串
  20. arrows
    • 如果设置为true,导航箭头将会被显示
    • 布尔值
    • 默认值:true
  21. closeBtn
    • 如果设置为true,将会显示关闭图标
    • 布尔值
    • 默认值:true
  22. closeClick
    • 如果设置为true,当用户点击内容的时候将会关闭弹出框
    • 布尔值
    • 默认值:false
  23. nextClick
    • 如果设置为true,当用户点击内容的时候将会导航到下一页
    • 布尔值
    • 默认值:false
  24. mouseWheel
    • 是否启用鼠标滚动切换
    • 布尔值
    • 默认值:true
  25. autoPlay
    • 是否自动播放弹出框的图片
    • 布尔值
    • 默认值:false
  26. playSpeed
    • 播放毫秒速度
    • 数字
    • 默认值:3000
  27. preload
    • 预加载的图片数
    • 数字
    • 默认值:3
  28. modal
    • 如果设置为true,将会禁止导航和关闭
    • 布尔值
    • 默认值:false
  29. loop
    • 是否循环播放
    • 布尔值
    • 默认值:true
  30. scrollOutside
    • 如果设置为true,将会视图避免垂直方向的滚动条,针对 iframe和html
    • 布尔值
    • 默认值:true
  31. index
    • 重写开始的图片索引
    • 数字
    • 默认值:0
  32. type
    • 重写内容的类型
    • image_inline_ajax_iframe_swf/html
    • 默认值:null
  33. href
    • 重写内容的链接地址
    • 字符串
    • 默认值:null
  34. content
    • 重写被展示的内容
    • 字符串
    • 默认值:null
  35. title
    • 重写标题
    • 字符串
    • 默认值:null