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

亦凉 2022-10-10 04:45 82阅读 0赞

**一、jquery.fancybox 介绍**

源代码地址：

[https://github.com/fancyapps/fancybox][https_github.com_fancyapps_fancybox]

官网展示地址：[https://fancyapps.com/][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>
    
    	
    	<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
    </head>
    <body>
    
    	
    
    	
    	<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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 1][]

**三、大小图分组案例**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 3][]

## [原创 网页在线打开PDF\_网站中在线查看PDF之TouchPDF][PDF_PDF_TouchPDF] ##

## [JS 自定义实现数字滚动处理][JS] ##

## [ Echarts 开源，免费商用图表控件使用整理][Echarts] ##

[https_github.com_fancyapps_fancybox]: https://github.com/fancyapps/fancybox
[https_fancyapps.com]: https://fancyapps.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70]: /images/20221005/09ffae3570a64619baf771725b0f7bfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 1]: /images/20221005/1f6101b920f249a7945c038efa15632c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 2]: /images/20221005/b8f4d85ca64d405b8b3a0729fce84de3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 3]: /images/20221005/d707864f055f4da1819ece076220f2b0.png
[PDF_PDF_TouchPDF]: https://blog.csdn.net/u011127019/article/details/116195154
[JS]: https://blog.csdn.net/u011127019/article/details/112844526
[Echarts]: https://blog.csdn.net/u011127019/article/details/111404485