又发现一款好用的popup插件(jquery.fancybox.js)

短命女 2022-08-05 05:04 190阅读 0赞

由于在项目中,遇到一个场景,就是用户填写的认证信息中,有一个关于扫描件的图片,由于页面太小的原因,无法让审核人员看清楚图片的详情,一开始的思路是,在点击图片的时候,获取到图片的src,然后通过悬浮一个div出来.把选中的图片放大...这是一种办法.也实现了,但是不是很美观..后经同时推荐,发现了这款插件fancybox.

以下摘自:http://www.php100.com/html/program/jquery/2013/0905/5951.html

FancyBox是jquery一款不错的弹出窗口插件,下面我来给各位同介绍介绍有需要了解的同学可参考。

**FancyBox使用方法**：

1、引入jquery核心库和Fancybox插件库

以下为先关的可选部分插件

2.关于图片上的使用

3.关于普通文本的使用

<a id="inline" href="\#data">This shows content of element who has id="data"</a>  
        <div style="display: none;">  
            <div id="data">Lorem i[ps][]um dolor sit amet, consectetur adipiscing elit.</div>  
        </div>

4.关于iframe的使用

<a href="http://www.example?[iframe][]">This goes to iframe</a>      or

<a class="iframe" href="http://www.example">This goes to iframe</a>

5.关于ajax是使用

<a href="http://www.example/data.php">This takes content using ajax</a>

6.关于一组图片.我们可以使用rel来创建相册轮播效果

================================================================================

以下为js部分的使用

$(".grouped\_elements").fancybox();  
            \});  
</script>

Fancybox的API和配置选项说明

<table style="width:100%"> 
 <thead> 
  <tr> 
   <th style="text-align:left"><span style="font-size:13px">属性名</span></th> 
   <th style="text-align:left"><span style="font-size:13px">默认值</span></th> 
   <th style="text-align:left"><span style="font-size:13px">简要说明</span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>padding</td> 
   <td>10</td> 
   <td>浏览框内边距，和css中的padding一个意思</td> 
  </tr> 
  <tr> 
   <td>margin</td> 
   <td>20</td> 
   <td>浏览框外边距，和css中的margin一个意思</td> 
  </tr> 
  <tr> 
   <td>opacity</td> 
   <td>false</td> 
   <td>如果为true，则fancybox在动画改变的时候透明度可以跟着改变</td> 
  </tr> 
  <tr> 
   <td>modal</td> 
   <td>false</td> 
   <td>如果为true，则’overlayShow’ 会被设成 ‘true’ ， ‘hideOnOverlayClick’, ‘hideOnContentClick’, ‘enableEscapeButton’, ‘showCloseButton’ 会被设成 ‘false’</td> 
  </tr> 
  <tr> 
   <td>cyclic</td> 
   <td>false</td> 
   <td>如果为true，相册会循环播放</td> 
  </tr> 
  <tr> 
   <td>scrol<a href="http://www.php100.com/list-198/" rel="nofollow">ling</a></td> 
   <td>‘auto’</td> 
   <td>设置overflow的值来创建或隐藏滚动条，可以设置成 ‘auto’, ‘yes’, or ‘no’</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>560</td> 
   <td>设置iframe和swf的宽度，如果 ‘autoDimensions’为 ‘false’，这也可以设置普通文本的宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>340</td> 
   <td>设置iframe和swf的高度，如果 ‘autoDimensions’为 ‘false’，这也可以设置普通文本的高度</td> 
  </tr> 
  <tr> 
   <td>autoScale</td> 
   <td>true</td> 
   <td>如果为true，fancybox可以自适应浏览器窗口大小</td> 
  </tr> 
  <tr> 
   <td>autoDimensions</td> 
   <td>true</td> 
   <td>在内联文本和ajax中，设置是否动态调整元素的尺寸，如果为true，请确保你已经为元素设置了尺寸大小</td> 
  </tr> 
  <tr> 
   <td>centerOnScroll</td> 
   <td>false</td> 
   <td>如果为true，当你滚动滚动条时，fancybox将会一直停留在浏览器中心</td> 
  </tr> 
  <tr> 
   <td>ajax</td> 
   <td>{ }</td> 
   <td>和jquery的ajax调用选项一样<br> <br> <small><span style="font-size:12px">注意: ‘error’ and ‘success’ 这两个回调事件会被fancybox重写</span></small></td> 
  </tr> 
  <tr> 
   <td>swf</td> 
   <td>{wmode: ‘transparent’}</td> 
   <td>swf的设置选项</td> 
  </tr> 
  <tr> 
   <td>hideOnOverlayClick</td> 
   <td>true</td> 
   <td>如果为true则点击遮罩层关闭fancybox</td> 
  </tr> 
  <tr> 
   <td>hideOnContentClick</td> 
   <td>false</td> 
   <td>如果为true则点击播放内容关闭fancybox</td> 
  </tr> 
  <tr> 
   <td>overlayShow</td> 
   <td>true</td> 
   <td>如果为true，则显示遮罩层</td> 
  </tr> 
  <tr> 
   <td>overlayOpacity</td> 
   <td>0.3</td> 
   <td>遮罩层的透明度（范围0-1）</td> 
  </tr> 
  <tr> 
   <td>overlayColor</td> 
   <td>‘#666′</td> 
   <td>遮罩层的背景颜色</td> 
  </tr> 
  <tr> 
   <td>titleShow</td> 
   <td>true</td> 
   <td>如果为true，则显示标题</td> 
  </tr> 
  <tr> 
   <td>titlePosition</td> 
   <td>‘outside’</td> 
   <td>设置标题显示的位置.可以设置成 ‘outside’, ‘inside’ 或 ‘over’</td> 
  </tr> 
  <tr> 
   <td>titleFormat</td> 
   <td>null</td> 
   <td>可以自定义标题的格式</td> 
  </tr> 
  <tr> 
   <td>transitionIn, transitionOut</td> 
   <td>‘fade’</td> 
   <td>设置动画效果. 可以设置为 ‘elastic’, ‘fade’ 或 ‘none’</td> 
  </tr> 
  <tr> 
   <td>speedIn, speedOut</td> 
   <td>300</td> 
   <td>fade 和 elastic 动画切换的时间间隔, 以毫秒为单位<br> <br> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>changeSpeed</td> 
   <td>300</td> 
   <td>切换时fancybox尺寸的变化时间间隔（即变化的速度），以毫秒为单位</td> 
  </tr> 
  <tr> 
   <td>changeFade</td> 
   <td>‘fast’</td> 
   <td>切换时内容淡入淡出的时间间隔（即变化的速度）</td> 
  </tr> 
  <tr> 
   <td>easingIn, easingOut</td> 
   <td>‘swing’</td> 
   <td>为 elastic 动画使用 Easing</td> 
  </tr> 
  <tr> 
   <td>showCloseButton</td> 
   <td>true</td> 
   <td>如果为true，则显示关闭按钮</td> 
  </tr> 
  <tr> 
   <td>showNavArrows</td> 
   <td>true</td> 
   <td>如果为true，则显示上一张下一张导航箭头</td> 
  </tr> 
  <tr> 
   <td>enableEscapeButton</td> 
   <td>true</td> 
   <td>如果为true，则启用ESC来关闭fancybox</td> 
  </tr> 
  <tr> 
   <td>onStart</td> 
   <td>null</td> 
   <td>回调函数，加载内容是触发</td> 
  </tr> 
  <tr> 
   <td>onCancel</td> 
   <td>null</td> 
   <td>回调函数，取消加载内容后触发</td> 
  </tr> 
  <tr> 
   <td>onComplete</td> 
   <td>null</td> 
   <td>回调函数，加载内容完成后触发</td> 
  </tr> 
  <tr> 
   <td>onCleanup</td> 
   <td>null</td> 
   <td>回调函数，关闭fancybox前触发</td> 
  </tr> 
  <tr> 
   <td>onClosed</td> 
   <td>null</td> 
   <td>回调函数，关闭fancybox后触发</td> 
  </tr> 
 </tbody> 
</table>

[ps]: http://www.php100.com/fw/photo.html
[iframe]: http://www.php100.com/tags.php/iframe/