wordpress主题运用fancybox的方式弹出播放视频

fancybox是一款基于jquery开发的插件fancybox特点：1.可以支持图片、html、flash动画、iframe、ajax；2.可以自定义播放器的css样式；3.可以以组的形式播放；4.如果将鼠标滚动插件包含进来的话还能支持鼠标滚动来翻阅图片；5.fancybox播放器支持投影，更有立体的感觉；fancy…

fancybox是一款基于jquery开发的插件

fancybox特点：

1.可以支持图片、html、flash动画、iframe、ajax；

2.可以自定义播放器的css样式；

3.可以以组的形式播放；

4.如果将鼠标滚动插件包含进来的话还能支持鼠标滚动来翻阅图片；

5.fancybox播放器支持投影，更有立体的感觉；

fancybox可以弹出很多窗体，甚至一个swf格式的小视频。但这样的swf视频播放的时候并没有任何的控件。只能重头看到尾，或者关闭。我们可以利用fancybox弹出div盒子的方式配合html5很快的写出弹出一个小视频的代码。首先，效果如下图所示。点击播放的图片，弹出播放视频。背景自动虚化。

好了，废话不多，下面请看具体事例

第一步，首先要把该引用的js,css引用进来（可去官网自行下载）

<link rel=”stylesheet” type=”text/css” href=”css/fancybox.css” /> <script type=”text/javascript” src=”js/jquery-1.11.3.js”></script> <script type=”text/javascript” src=”js/jquery.fancybox-1.3.1.pack.js”></script> <script type=”text/javascript” src=”js/main.js”></script> 第二步，html部分

<a id=”showdiv1″ href=”#box1″ title=”测试”><img src=”images/play.PNG” /></a><!–存放播放的图标，可以是img，button等等–!> <div style=”display:none”><!–先让div隐藏–!> <div id=”box1″> <video id=”movie” src=”movie/1.MP4″ controls=”controls” preload=”meta”></video> </div> </div> 第三步，js部分

$(document).ready(function(){ $(“#showdiv1&#8221😉.fancybox({ padding:0, hideOnOverlayClick:false, fitToView:false, autoSize:true, closeClick:true, openEffect:”none”, closeEffect:”none”, “onClosed”:function(){window.document.location.reload(true)}, centerOnScroll:true }) }); 自己可以自行修改css，达到自己想要的效果

附上fancybox参数如下：

属性值默认值描述padding10播放器内边距的值margin20播放器外边距的值opacityfalse如果为 true，则 fancybox 在动画改变的时候透明度可以跟着改变modalfalse如果为 true，则 ‘overlayShow’ 会被设成 ‘true’，’hideOnOverlayClick’，’hideOnContentClick’，’enableEscapeButton’，’showCloseButton’ 会被设成 ‘false’cyclicfalse如果为 true，相册会循环播放scrolling‘auto’设置 overflow 的值来创建或隐藏滚动条，可以设置成 ‘auto’，’yes’ 或 ‘no’width560设置 iframe 和 swf 的宽度，如果 ‘autoDimensions’ 为 ‘false’，这也可以设置普通文本的宽度height340设置 iframe 和 swf 的高度，如果 ‘autoDimensions’ 为 ‘false’，这也可以设置普通文本的高度autoScaletrue如果为 true，fancybox 可以自适应浏览器窗口大小autoDimensionstrue在内联文本和 ajax 中，设置是否动态调整元素的尺寸，如果为 true，请确保你已经为元素设置了尺寸大小centerOnScrollfalse如果为 true，当你滚动滚动条时，fancybox将会一直停留在浏览器中心ajax{ }和 jquery 的 ajax 调用选项一样。注意：’error’ 和 ‘success’ 这两个回调事件会被 fancybox 重写swf{wmode: ‘transparent’}swf 的设置选项hideOnOverlayClicktrue如果为 true，则点击遮罩层关闭 fancyboxhideOnContentClickfalse如果为 true，则点击播放内容关闭 fancyboxoverlayShowtrue如果为 true，则显示遮罩层overlayOpacity0.3遮罩层的透明度（范围0-1）overlayColor‘#666’遮罩层的背景颜色titleShowtrue如果为 true，则显示标题titlePosition‘outside’设置标题显示的位置，可以设置成 ‘outside’，’inside’ 或 ‘over’titleFormatnull可以自定义标题的格式transitionIn，transitionOut‘fade’设置动画效果，可以设置为 ‘elastic’，’fade’ 或 ‘none’speedIn，speedOut300fade 和 elastic 动画切换的时间间隔，以毫秒为单位changeSpeed300切换时 fancybox 尺寸的变化时间间隔（即变化的速度），以毫秒为单位changeFade‘fast’切换时内容淡入淡出的时间间隔（即变化的速度）easingIn，easingOut‘swing’为 elastic 动画使用 EasingshowCloseButtontrue如果为 true，则显示关闭按钮showNavArrowstrue如果为 true，则显示上一张下一张导航箭头enableEscapeButtontrue如果为 true，则启用 esc 来关闭 fancyboxonStartnull回调函数，加载内容时触发onCancelnull回调函数，取消加载内容后触发onCompletenull回调函数，加载内容完成后触发onCleanupnull回调函数，关闭 fancybox 前触发onClosednull回调函数，关闭 fancybox 后触发