jquery.fancybox.js-3.x响应式相册弹出层插件使用方法-HTML源码网

Fancybox的特点如下：

可以支持图片、html文本、flash动画、iframe以及ajax的支持
可以自定义播放器的CSS样式
可以以组的形式进行播放
如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片

Fancybox播放器支持投影，更有立体的感觉

如何使用

用数据属性初始化

使用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>

版权声明

文章来源： https://www.uihtm.com/jquery/8258.html

版权说明：仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。我们非常重视版权问题，如有侵权请邮件(44784009#qq.com)与我们联系处理。敬请谅解！

jquery.fancybox.js插件 fancybo相册弹出层 fancybo.js插件使用方法

关键词搜索

jquery.fancybox.js-3.x响应式相册弹出层插件使用方法

详情内容

版权声明

可能喜欢的Jquery特效

最简单的响应式jQuery轮播图插件

支持ajax的jquery自动完成插件

jQuery模拟水果机特效插件

jQuery和css3全屏导航菜单特效插件

jquery和css3方向感知鼠标滑过图片遮罩效果

Skippr-最简洁实用的jQuery幻灯片插件

jQuery炫酷3d画廊

纯js超酷消息提示框插件notice.js

jQuery和css3简单的文字3d翻转和3d旋转动画特效

jQuery和css3固定右下角的最小化导航菜单插件

js消息通知框、对话框、确认框和Loading插件

jquery仿360猜你喜欢隐藏悬浮窗口特效

最新源码

下载排行榜

热门标签

提示信息

选择支付方式

关键词搜索

会员登录

注册会员

忘记密码

jquery.fancybox.js-3.x响应式相册弹出层插件使用方法

详情内容

版权声明

可能喜欢的Jquery特效

最新源码

下载排行榜

热门标签

提示信息

选择支付方式