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&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;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>