Fancybox的特点如下:
可以支持图片、html文本、flash动画、iframe以及ajax的支持
可以自定义播放器的CSS样式
可以以组的形式进行播放
如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
Fancybox播放器支持投影,更有立体的感觉
官方网址:http://fancyapps.com/fancybox/3/
如何使用
用数据属性初始化
使用fancybox的最基本方法是将data-fancybox属性添加 到元素中。这将自动绑定将启动fancybox的click事件。使用 href或 data-src属性指定内容的来源。例:
<a href="image.jpg"data-fancyboxdata-caption="单个图片的标题"> <img src =“ thumbnail.jpg” alt =“” /> </a>
如果您有一组项目,则可data-fancybox以为每个项目使用相同的属性 值来创建图库。每个组应具有唯一的值。例:
<a href="image_1.jpg"data-fancybox="gallery"data-caption="字幕#1"> <img src =“ thumbnail_1.jpg” alt =“” /> </a> <a href="image_2.jpg"data-fancybox="gallery"data-caption="字幕#2"> <img src =“ thumbnail_2.jpg” alt =“” /> </a>
如果选择此方法,将应用默认设置。有关如何通过更改默认值,使用属性或通过JavaScript进行自定义的示例,请参见 选项部分 。 data-options
有时,您有多个指向同一来源的链接,这些链接会在图库中创建重复项。为了避免这种情况,只需将 data-fancybox-trigger属性与data-fancybox其他链接的属性使用相同的值即可 。(可选)使用 data-fancybox-index属性指定起始元素的索引:
<a data-fancybox-trigger="gallery" href="javascript:;"> <img src="thumbnail_1.jpg" alt="" /> </a>
用JavaScript初始化
使用jQuery选择器选择元素(可以使用任何有效的选择器)并调用 fancybox方法:
$('[data-fancybox="gallery"]').fancybox({ // Options will go here });
有时您可能需要将fancybox绑定到动态添加的元素。使用 selector选项为当前或将来存在的元素附加单击事件侦听器。所有选定的项目将自动在图库中分组。例:
$().fancybox({ selector : '.imglist a:visible' });
与Javascript搭配使用
您还可以以编程方式打开和关闭fancybox。这是几个示例,请访问 API部分以获取更多信息和演示。
显示简单消息:
$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');
显示iframed页面:
$.fancybox.open({ src : 'link-to-your-page.html', type : 'iframe', opts : { afterShow : function( instance, current ) { console.info( 'done!' ); } } });
fancybox尝试根据给定的URL自动检测内容的类型。如果无法检测到,则还可以使用data-type属性(或 type选项)手动设置类型 。例:
<a href="images.php?id=123"data-type="image"data-caption="标题"> 显示图片 </a>
媒体类型
fancybox旨在显示图像,视频,iframe和任何HTML内容。为了您的方便,内置了对内联内容和Ajax的支持。
图片
使用fancybox的标准方法是使用许多链接到较大图像的缩略图:
<a href="image.jpg" data-fancybox="images" data-caption="My caption"> <img src="thumbnail.jpg" alt="" /> </a>
默认情况下,fancybox在显示图像之前会完全预加载图像。您可以选择立即显示图像。接收数据时,它将渲染并显示完整尺寸的图像。为此,一些属性是必需的:
data-width -图片的实际宽度
data-height -图片的实际高度
<a href="image.jpg" data-fancybox="images" data-width="2048" data-height="1365"> <img src="thumbnail.jpg" /> </a>
您还可以使用这些 width和 height属性来控制图像的大小。这可用于使图像在视网膜显示器上看起来更清晰。例:
$('[data-fancybox="images"]').fancybox({ afterLoad : function(instance, current) { var pixelRatio = window.devicePixelRatio || 1; if ( pixelRatio > 1.5 ) { current.width = current.width / pixelRatio; current.height = current.height / pixelRatio; } } });
fancybox支持“ srcset”,因此它可以基于视口宽度显示不同的图像。您可以使用它来缩短移动用户的下载时间,并随着时间的推移节省带宽。例:
<a href="medium.jpg" data-fancybox="images" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w"> <img src="thumbnail.jpg" /></a>
也可以通过右键单击来保护图像免于下载。虽然这不能防止真正确定的用户受到攻击,但应该阻止绝大多数人窃取您的文件。(可选)将水印放在图像上。
$('[data-fancybox]').fancybox({ protect: true });
视频
仅提供页面URL,即可将YouTube和Vimeo视频与fancybox一起使用。直接链接到MP4视频或使用触发元素显示隐藏的<video>元素。
使用 data-width和 data-height属性来自定义视频尺寸和 data-ratio宽高比。
<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk"> YouTube video </a> <a data-fancybox href="https://vimeo.com/191947042"> Vimeo video </a> <a data-fancybox data-width="640" data-height="360" href="video.mp4"> Direct link to MP4 video </a> <a data-fancybox href="#myVideo"> HTML5 video element </a> <video width="640" height="320" controls id="myVideo" style="display:none;"> <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4"> <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm"> <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg"> Your browser doesn't support HTML5 video tag. </video>
通过URL参数控制YouTube和Vimeo视频:
<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1&rel=0&controls=0&showinfo=0"> YouTube video - hide controls and info</a> <a data-fancybox href="https://vimeo.com/191947042?color=f00"> Vimeo video - custom color</a>
通过JavaScript:
$('[data-fancybox]').fancybox({ youtube : { controls : 0, showinfo : 0 }, vimeo : { color : 'f00' } });
iframe
如果需要显示其他页面的内容, 请在链接中添加data-fancybox和data-type="iframe"属性。这将创建<iframe>允许将整个Web文档嵌入到模式中的元素。
<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;"> Webpage</a> <a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;"> Sample PDF file </a>
如果您尚未禁用iframe预加载(使用 preload选项),则脚本将尝试计算内容尺寸,并将调整其宽度/高度<iframe>以适合其中的内容。请记住,由于 相同的原产地政策,存在一些限制。
本示例将禁用iframe预加载,并在iframe旁边而不是工具栏上显示一个小的关闭按钮:
$('[data-fancybox]').fancybox({ toolbar : false, smallBtn : true, iframe : { preload : false } })
iframe尺寸可由CSS控制:
.fancybox-slide--iframe .fancybox-content { width : 800px; height : 600px; max-width : 80%; max-height : 80%; margin: 0; }
如果需要,这些CSS规则可以被JS覆盖:
$("[data-fancybox]").fancybox({ iframe : { css : { width : '600px' } } });
如何从iframe内部访问和控制父窗口中的fancybox:
// Close current fancybox instance parent.jQuery.fancybox.getInstance().close(); // Adjust iframe height according to the contents parent.jQuery.fancybox.getInstance().update();
排队
fancybox可用于在页面上显示任何HTML元素。首先,创建一个具有唯一ID的隐藏元素:
<div style="display: none;" id="hidden-content"> <h2>Hello</h2> <p>You are awesome.</p> </div>
然后,只需创建一个具有data-src与您要打开的元素的ID匹配的属性的链接 (在井号(#)之前;在此示例中- #hidden-content):
<a data-fancybox data-src="#hidden-content" href="javascript:;"> Trigger the fancybox</a>
该脚本将附加一个小的关闭按钮(如果尚未通过禁用 smallBtn:false),并且除了居中之外将不应用任何样式。因此,您可以使用CSS轻松设置自定义尺寸。
信息如有必要,您可以通过在CodePen上添加其他包装元素和一些CSS视图演示来使元素(以及类似的其他任何html内容)可滚动 。
AJAX
要通过AJAX加载内容,您需要data-type="ajax"在链接中添加一个 属性:
<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;"> AJAX content </a>
另外,可以使用data-filter属性定义选择器, 以仅显示响应的一部分。选择器可以是任何字符串,即有效的jQuery选择器:
<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#two" href="javascript:;"> AJAX content </a>
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!