jquery.fancybox图片预览组件使用整理_fancyBox3使用整理

天马3798

于 2021-06-26 11:43:37 发布

阅读量2.1k

点赞数 2

分类专栏： jQuery使用&插件文章标签： jquery.fancybox 图片预览组件 fancyBox3使用整理

本文链接：https://blog.csdn.net/u011127019/article/details/118245191

版权

jQuery使用&插件专栏收录该内容

48 篇文章 2 订阅

订阅专栏

一、jquery.fancybox 介绍

源代码地址：

https://github.com/fancyapps/fancybox

官网展示地址：https://fancyapps.com/

fancyBox是一个JavaScript库，它以优雅的方式展示图片，视频和一些html内容。它包含你所期望的一切特性—支持手势，响应式和高度自定义。

目前版本3.x系列。

支持浏览器：

Chrome
Firefox
IE10/11
Edge
iOS Safari
Android 7.0 Tablet

使用方式，引用jquery，后引入fancy的js，css即可。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My page</title>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

	<!-- Your HTML content goes here -->

	<!-- JS -->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="jquery.fancybox.min.js"></script>
</body>
</html>

支持的媒体类型：

Images

Video

Iframe

Inline

Ajax

二、大小图案例

data-fancybox：组件标识，识别标识

data-caption：媒体的标题介绍

    <!-- 大小图，图片预览 -->
    <a href="http://beijing.gongjuji.net/imgdata/big/639788f1-1c55-4213-928e-efe1c458af49.jpg" data-fancybox="images"
        data-caption="My caption">
        <img src="http://beijing.gongjuji.net/imgdata/small/639788f1-1c55-4213-928e-efe1c458af49.jpg" alt="" />
    </a>
    <a href="http://beijing.gongjuji.net/imgdata/big/4bbe4410-079f-4d38-a3de-fabae1fae428.jpg" data-fancybox="images"
        data-caption="My caption">
        <img src="http://beijing.gongjuji.net/imgdata/small/4bbe4410-079f-4d38-a3de-fabae1fae428.jpg" alt="" />
    </a>

三、大小图分组案例

    <!-- 大小图，图片预览--分组 -->
    <a href="http://beijing.gongjuji.net/imgdata/big/639788f1-1c55-4213-928e-efe1c458af49.jpg" data-fancybox="images"
        data-caption="My caption">
        <img src="http://beijing.gongjuji.net/imgdata/small/639788f1-1c55-4213-928e-efe1c458af49.jpg" alt="" />
    </a>
    <a href="http://beijing.gongjuji.net/imgdata/big/4bbe4410-079f-4d38-a3de-fabae1fae428.jpg" data-fancybox="images"
        data-caption="My caption">
        <img src="http://beijing.gongjuji.net/imgdata/small/4bbe4410-079f-4d38-a3de-fabae1fae428.jpg" alt="" />
    </a>

    <hr>

    <a href="http://beijing.gongjuji.net/imgdata/big/c18a791c-3899-47eb-befa-00177f42ba9a.jpg" data-fancybox="groupTwo"
        data-caption="My caption">
        <img src="http://beijing.gongjuji.net/imgdata/small/c18a791c-3899-47eb-befa-00177f42ba9a.jpg" alt="" />
    </a>
    <a href="http://beijing.gongjuji.net/imgdata/big/38db6f69-9eef-44dc-a30d-60a7ff866d01.jpg" data-fancybox="groupTwo"
        data-caption="My caption">
        <img src="http://beijing.gongjuji.net/imgdata/small/38db6f69-9eef-44dc-a30d-60a7ff866d01.jpg" alt="" />
    </a>

四、视频弹框播放案例

    <!-- 视频 -->
    <a href="http://ad.jnqianle.cn/upload/video/big2.mp4" data-fancybox
        data-caption="自主点餐小程序视频介绍">
        <img src="http://beijing.gongjuji.net/imgdata/small/639788f1-1c55-4213-928e-efe1c458af49.jpg" alt="" />
    </a>