Gallery 灯箱画廊

Fancybox介绍 PLUGIN

Fancybox是非常好用的图集插件,在Github上人气很高,她不仅支持单图和多图显示,也只是弹窗引用网页和视频多媒体,更重要的是该插件完美适配移动终端,详细查看插件官网,或者Github。本框架目前使用的版本是v3.5.7,修改了若干样式。

该插件依赖Jquery,基本使用方法如下:

                                <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
                                <script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
                                <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>

                                <a href="https://src.axui.cn/examples/images/china01.jpg" data-fancybox data-caption="图片介绍">
                                    <img src="https://src.axui.cn/examples/images/china01.jpg" alt="伟大的中国" style="width:200px;"/>
                                </a>
                                <a href="https://src.axui.cn/examples/images/china02.jpg" data-fancybox data-caption="图片介绍">
                                    <img src="https://src.axui.cn/examples/images/china02.jpg" alt="伟大的中国" style="width:200px;"/>
                                </a>
                        

正文插入图片

在使用编辑器上传图片通常只会生成img标签,以下演示效果模拟编辑上传图片情况下使用本插件。

伟大的中国 伟大的中国
  •         <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>
            <script type="text/javascript">
            $(".img-in-text img").click(function() {
                $.fancybox.open({
                    src  : $(this).attr("src"),
                    type : 'image',
                });
    
            });
            </script>
                            
  •                                 <div class="img-in-text">
                                        <img src="https://src.axui.cn/examples/images/china01.jpg" alt="伟大的中国" />
                                        <img src="https://src.axui.cn/examples/images/china02.jpg" alt="伟大的中国" />
                                    </div>
                                        
  •                         <style>
                                .img-in-text img{
                                    width:120px;
                                }
                            </style>
                                        

隐藏图片信息

伟大的中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

伟大的中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。

  •         <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>
            <script type="text/javascript">
            $.fancybox.defaults.btnTpl.info = '<button data-fancybox-info class="fancybox-button fancybox-button--info"><svg viewBox="0 0 40 40"><circle  cx="10.3734" cy="19.9997" r="3.01147"></circle><circle  cx="19.9988" cy="19.9997" r="3.01147" ></circle><circle  cx="29.6243" cy="19.9997" r="3.01147"></circle></svg></button>';
    
            $('[data-fancybox="info"]').fancybox({
                baseClass: "ax-open-info",
                idleTime : 0,
                buttons : [
                    'thumbs','info', 'close'
                ],
                preventCaptionOverlap: false,
                caption : function( instance, obj ) {
                    return '<div class="ax-fancy-caption"><p class="ax-fancy-nav"><a data-fancybox-prev title="Previous" tabindex="1">‹</a> <a data-fancybox-next title="Next" tabindex="2">›</a>   <span data-fancybox-index></span> of <span data-fancybox-count></span></p><div class="ax-caption-more">' + $(this).find("div").html() + '</div></div>';
                },
                onInit: function(instance) {
                    instance.$refs.container.on('touchstart', '[data-fancybox-info]', function(e) {
                        e.stopPropagation();
                        e.preventDefault();
                        instance.$refs.container.toggleClass('fancybox-vertical-caption');
                    });
                    instance.$refs.container.on('mouseenter', '[data-fancybox-info]', function(e) {
                        instance.$refs.container.addClass('fancybox-vertical-caption');
                        $(".fancybox-toolbar .fancybox-button").addClass('fancybox-button-grey');
                        instance.$refs.caption.one('mouseleave', function(e) {
                            instance.$refs.container.removeClass('fancybox-vertical-caption');
                            $(".fancybox-toolbar .fancybox-button").removeClass('fancybox-button-grey');
                        });
                    });
                }
            });
            </script>
                            
  •                                 <a href="https://src.axui.cn/examples/images/china01.jpg" data-fancybox="info">
                                        <img src="https://src.axui.cn/examples/images/china01-sm.jpg" alt="伟大的中国" />
                                        <div style="display: none">
                                            <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                            <p>  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p>
                                        </div>
                                    </a>
                                    <a href="https://src.axui.cn/examples/images/china02.jpg" data-fancybox="info">
                                        <img src="https://src.axui.cn/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                        <div style="display: none">
                                            <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                            <p>  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p>
                                            <p>  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。</p>
                                        </div>
                                    </a>
                                        

固定图片信息

伟大的中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

伟大的中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。

  •         <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>
            <script type="text/javascript">
            $('[data-fancybox="info-fix"]').fancybox({
                baseClass: 'ax-open-info-fix',
                infobar: false,
                thumbs: {
                    hideOnClose: false
                },
                touch: {
                    vertical: false
                },
                buttons: [
                    'close',
                    'thumbs',
                    'share'
                ],
                preventCaptionOverlap: false,
                animationEffect: "fade",
                transitionEffect: false,
                idleTime: false,
                gutter: 0,
                caption : function( instance, obj ) {
                    return '<div class="ax-fancy-caption"><p class="ax-fancy-nav"><a data-fancybox-prev title="Previous" tabindex="1">‹</a> <a data-fancybox-next title="Next" tabindex="2">›</a>   <span data-fancybox-index></span> of <span data-fancybox-count></span></p><div class="ax-caption-more">' + $(this).find('div').html() + '</div></div>';
                }
            });
            </script>
                            
  •                                 <a href="https://src.axui.cn/examples/images/china01.jpg" data-fancybox="info-fix">
                                        <img src="https://src.axui.cn/examples/images/china01-sm.jpg" alt="伟大的中国" />
                                        <div style="display: none">
                                            <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                            <p>  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p>
                                        </div>
                                    </a>
                                    <a href="https://src.axui.cn/examples/images/china02.jpg" data-fancybox="info-fix">
                                        <img src="https://src.axui.cn/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                        <div style="display: none">
                                            <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                            <p>  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p>
                                            <p>  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。</p>
                                        </div>
                                    </a>
                                        

小窗图片信息

伟大的中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

伟大的中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。

伟大的中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

  •         <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>
            <script type="text/javascript">
            $('[data-fancybox="quick-view"]').fancybox({
                baseClass: "quick-view-container",
                infobar: false,
                buttons: false,
                thumbs: false,
                margin: 0,
                touch: {
                    vertical: false
                },
                animationEffect: false,
                transitionEffect: "slide",
                transitionDuration: 500,
                idleTime: false,
                preventCaptionOverlap: false,
                baseTpl: '<div class="fancybox-container" role="dialog">' +
                '<div class="fancybox-bg"></div>' +
                '<div class="fancybox-inner">' +
                '<div class="quick-view-outer">' +
                '<div class="quick-view-content">' +
                '<div class="quick-view-carousel">' +
                '<div class="fancybox-stage"></div>' +
                '</div>' +
                '<div class="quick-view-aside">' +
                '<button data-fancybox-close class="quick-view-close"><svg viewBox="0 0 40 40"><path d="M10,10 L30,30 M30,10 L10,30"></path></svg></button>' +
                '<div class="fancybox-caption"><div class="fancybox-caption__body"></div></div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>',
    
                caption : function( instance, obj ) {
                    return '<div class="ax-fancy-caption"><p class="ax-fancy-nav"><a data-fancybox-prev title="Previous" tabindex="1">‹</a> <a data-fancybox-next title="Next" tabindex="2">›</a>   <span data-fancybox-index></span> of <span data-fancybox-count></span></p><div class="ax-caption-more">' + $(this).find('div').html() + '</div></div>';
                },
                onInit: function(instance) {
                    /*
    
                              #1 Create bullet navigation links
                              =================================
    
                          */
    
                    var bullets = '<ul class="quick-view-bullets">';
    
                    for (var i = 0; i < instance.group.length; i++) {
                        bullets += '<li><a data-index="' + i + '" href="javascript:;"><span>' + (i + 1) + "</span></a></li>";
                    }
    
                    bullets += "</ul>";
    
                    $(bullets)
                        .on("click touchstart", "a", function() {
                            var index = $(this).data("index");
    
                            $.fancybox.getInstance(function() {
                                this.jumpTo(index);
                            });
                        })
                        .appendTo(instance.$refs.container.find(".quick-view-carousel"));
    
                    /*
    
                              #2 Add product form
                              ===================
    
                          */
    
                    var $element = instance.group[instance.currIndex].opts.$orig;
                    var form_id = $element.data("qw-form");
    
                    instance.$refs.container.find(".quick-view-aside").append(
                        // In this example, this element contains the form
                        $("#" + form_id)
                            .clone(true)
                            .removeClass("hidden")
                    );
                },
    
                beforeShow: function(instance) {
                    /*
                              Mark current bullet navigation link as active
                          */
    
                    instance.$refs.container
                        .find(".quick-view-bullets")
                        .children()
                        .removeClass("active")
                        .eq(instance.currIndex)
                        .addClass("active");
                }
    
            });
            </script>
                            
  •                                 <a href="https://src.axui.cn/examples/images/china01.jpg" data-fancybox="quick-view">
                                        <img src="https://src.axui.cn/examples/images/china01-sm.jpg" alt="伟大的中国" />
                                        <div style="display: none">
                                            <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                            <p>  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p>
                                        </div>
                                    </a>
                                    <div style="display: none">
                                        <a href="https://src.axui.cn/examples/images/china02.jpg" data-fancybox="quick-view">
                                            <img src="https://src.axui.cn/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                            <div>
                                                <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                                <p>  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p>
                                                <p>  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。</p>
                                            </div>
                                        </a>
                                        <a href="https://src.axui.cn/examples/images/china03.jpg" data-fancybox="quick-view">
                                            <img src="https://src.axui.cn/examples/images/china03-sm.jpg" alt="伟大的中国" />
                                            <div>
                                                <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                            </div>
                                        </a>
                                    </div>
                                        

按钮打开图集

第一种方式是把图片信息写在js,用按钮触发图集插件;第二种方式是使用data-fancybox-trigger属性调取隐藏的图集。

  •         <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>
            <script type="text/javascript">
             $(".open_thumbs").on('click', function() {
    
                $.fancybox.open([
                    {
                        src  : 'https://source.unsplash.com/IvfoDk30JnI/1500x1000',
                        opts : {
                            caption : '第一张图片信息',
                            thumb   : 'https://source.unsplash.com/IvfoDk30JnI/240x160'
                        }
                    },
                    {
                        src  : 'https://source.unsplash.com/0JYgd2QuMfw/1500x1000',
                        opts : {
                            caption : '第二章图片信息',
                            thumb   : 'https://source.unsplash.com/0JYgd2QuMfw/240x160'
                        }
                    }
                ], {
                    loop : true,
                    thumbs : {
                        autoStart : true
                    }
                });
    
            });
            </script>
                            
  •                                 <a  href="javascript:;" class="ax-btn ax-btn-primary open_thumbs">点击打开JS图集</a>
                                    <a  href="javascript:;" class="ax-btn ax-btn-primary" data-fancybox-trigger="hidecap">显示data-fancybox=hidecap的图集</a>
                                        

封面打开图集

第一种方式是把图片信息写在js,用按钮触发图集插件;第二种方式是使用data-trigger属性调取隐藏的图集。

  •         <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>
            <script type="text/javascript">
             $(".open_thumbs").on('click', function() {
    
                $.fancybox.open([
                    {
                        src  : 'https://source.unsplash.com/IvfoDk30JnI/1500x1000',
                        opts : {
                            caption : '第一张图片信息',
                            thumb   : 'https://source.unsplash.com/IvfoDk30JnI/240x160'
                        }
                    },
                    {
                        src  : 'https://source.unsplash.com/0JYgd2QuMfw/1500x1000',
                        opts : {
                            caption : '第二章图片信息',
                            thumb   : 'https://source.unsplash.com/0JYgd2QuMfw/240x160'
                        }
                    }
                ], {
                    loop : true,
                    thumbs : {
                        autoStart : true
                    }
                });
    
            });
            </script>
                            
  •                         <a href="https://src.axui.cn/examples/images/china01.jpg" data-fancybox="images-preview" data-thumb="examples/images/china01-sm.jpg">
                                <img src="https://src.axui.cn/examples/images/china01-sm.jpg" alt="伟大的中国" />
                            </a>
                            <div style="display: none;">
                                <a href="https://src.axui.cn/examples/images/china02.jpg"  data-fancybox="images-preview" data-thumb="examples/images/china02-sm.jpg"></a>
                                <a href="https://src.axui.cn/examples/images/china03.jpg"  data-fancybox="images-preview" data-thumb="examples/images/china03-sm.jpg"></a>
                                <a href="https://src.axui.cn/examples/images/china04.jpg"  data-fancybox="images-preview" data-thumb="examples/images/china04-sm.jpg"></a>
                                <a href="https://src.axui.cn/examples/images/china05.jpg"  data-fancybox="images-preview" data-thumb="examples/images/china05-sm.jpg"></a>
                            </div>
                                        

隐藏字幕

用同一个div将图片和字幕包裹住。

  •         <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>
            <script type="text/javascript">
             $( '[data-fancybox="hidecap"],[data-fancybox="h5video"]' ).fancybox({
                caption : function( instance, item ) {
                    return $(this).find('div').html();
                }
            });
            </script>
                            
  •                                 <a href="https://src.axui.cn/examples/images/china01.jpg" data-fancybox="hidecap">
                                        <img src="https://src.axui.cn/examples/images/china01-sm.jpg" alt="伟大的中国" />
                                        <div style="display: none">
                                            <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                            <p>  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p>
                                        </div>
                                    </a>
                                    <a href="https://src.axui.cn/examples/images/china02.jpg" data-fancybox="hidecap">
                                        <img src="https://src.axui.cn/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                        <div style="display: none">
                                            <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                        </div>
                                    </a>
                                        

图集在底部

注意有img标签才能显示图集,这可能是该插件的一个缺陷。

  •         <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>
            <script type="text/javascript">
             $('[data-fancybox="btmthumbs"]').fancybox({
                baseClass: "btmthumbs",
                thumbs : {
                    autoStart : true,
                    axis      : 'x'
                },
                caption : function( instance, item ) {
                    return $(this).find('div').html();
                }
            });
            </script>
                            
  •                                 <a href="https://src.axui.cn/examples/images/china01.jpg" data-fancybox="btmthumbs">
                                        <img src="https://src.axui.cn/examples/images/china01-sm.jpg" alt="伟大的中国" />
                                        <div style="display: none">
                                            <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                            <p>  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p>
                                        </div>
                                    </a>
                                    <a href="https://src.axui.cn/examples/images/china02.jpg" data-fancybox="btmthumbs">
                                        <img src="https://src.axui.cn/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                        <div style="display: none">
                                            <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                        </div>
                                    </a>
                                        

打开和关闭属性

注意有img标签才能显示图集,这可能是该插件的一个缺陷。

默认打开小图
伟大的中国 伟大的中国
加上水印
伟大的中国
  •         <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>
            <script type="text/javascript">
             //默认打开小图
            $('[data-fancybox="all2"]').fancybox({
    
                thumbs : {
                    axis: "y",
                    autoStart : true//打开立即显示图集
                },
                lang: "cn"
            });
            //水印图
            $('[data-fancybox="mark"]').fancybox({
                protect    : true,//大图上禁止使用右键
                slideClass : 'watermark',
                toolbar    : false,//隐藏所有的侧边按钮
                smallBtn   : true//显示右上角关闭按钮
            });
            (new Image()).src = "src/images/crpic.png";
            </script>
                            
  •                                 默认打开小图
                                     <div class="ax-clear"></div>
                                    <a href="https://src.axui.cn/examples/images/china01.jpg" data-fancybox="all2">
                                        <img src="https://src.axui.cn/examples/images/china01-sm.jpg" alt="伟大的中国" />
                                    </a>
                                    <a href="https://src.axui.cn/examples/images/china02.jpg" data-fancybox="all2">
                                        <img src="https://src.axui.cn/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                    </a>
                                    <div class="ax-break-md"></div>
                                    加上水印
                                    <div class="ax-clear"></div>
                                    <a href="https://src.axui.cn/examples/images/china01.jpg" data-fancybox="mark">
                                        <img src="https://src.axui.cn/examples/images/china01-sm.jpg" alt="伟大的中国" />
                                    </a>
                                        

其他操作

注意有img标签才能显示图集,这可能是该插件的一个缺陷。

  •         <link href="https://src.axui.cn/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>
            <script type="text/javascript">
             //默认打开小图
            $('[data-fancybox="all2"]').fancybox({
    
                thumbs : {
                    axis: "y",
                    autoStart : true//打开立即显示图集
                },
                lang: "cn"
            });
            //水印图
            $('[data-fancybox="mark"]').fancybox({
                protect    : true,//大图上禁止使用右键
                slideClass : 'watermark',
                toolbar    : false,//隐藏所有的侧边按钮
                smallBtn   : true//显示右上角关闭按钮
            });
            (new Image()).src = "src/images/crpic.png";
            </script>
                            
  •                         <a data-fancybox data-src="http://www.baidu.com" href="javascript:;" data-type="iframe" data-fancybox="iframe-page" data-caption="Hello, World!" class="ax-btn ax-btn-primary">打开iframe</a>
    
                                    <a data-fancybox data-src="examples/ax-login.php" href="javascript:;" data-type="ajax" data-title="图片标题" class="ax-btn ax-btn-primary">打开ajax</a>
                                    <a data-fancybox data-src="examples/ax-login.php" href="javascript:;" data-type="ajax" data-filter="#two" data-title="图片标题" class="ax-btn ax-btn-primary">打开ajax截取</a>
                                    <a data-fancybox data-options='{"src": "#hidecon", "baseClass": "ax-info-tip","touch": false, "smallBtn" : true}' href="javascript:;" class="ax-btn ax-btn-primary">打开隐藏文章</a>
                                    <a data-fancybox data-options='{"src": "#hidecon-form","baseClass": "ax-info-tip", "touch": false, "smallBtn" : true}' href="javascript:;" class="ax-btn ax-btn-primary">打开隐藏表单</a>
                                    <a data-fancybox data-options='{"src": "#hidecon-sim", "baseClass": "ax-info-tip","touch": false, "smallBtn" : true}' href="javascript:;" class="ax-btn ax-btn-primary">打开提示窗</a>
                                    <a data-fancybox href="#myVideo" class="ax-btn ax-btn-primary">打开隐藏视频</a>
                                    <a data-fancybox="h5video" data-width="640" data-height="360" href="examples/media/video.mp4" data-options='{"buttons": ["download","close"]}' class="ax-btn ax-btn-primary">打开AJAX视频</a>
    
                                    <video width="640" height="320" controls id="myVideo" style="display:none;">
                                <source src="examples/media/video.mp4" type="video/mp4">
                            </video>
                            <div id="hidecon-sim" style="display: none;">
                                <div class="ax-window-tips">
                                    <div class="ax-tips-icon ax-result ax-success"><i class="ax-iconfont ax-icon-check-o"></i></div>
                                    <div class="ax-tips-title">操作成功!</div>
                                    <div class="ax-tips-des">支付信息将通过短信发送给您,注意查收!</div>
                                    <div class="ax-tips-btn">
                                        <a href="###" class="ax-btn ax-btn-longer ax-btn-primary ax-window-close"  data-fancybox-close>我知道了</a>
                                    </div>
                                </div>
                            </div>
                            <div id="hidecon" style="display: none;">
                                <div class="ax-window-title">关于中国</div>
                                <div class="ax-window-content">
                                    <div class="ax-padding">
                                        <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                        <p>  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p>
                                        <p>  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。</p>
                                    </div>
                                </div>
                                <div class="ax-padding ax-window-operate ax-align-center">
                                    <a href="###" class="ax-btn ax-btn-primary ax-btn-longer" data-fancybox-close>我知道了</a>
                                </div>
                            </div>
                            <div id="hidecon-form" style="display: none;">
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">姓名:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称"  type="text"></div>
                                            </div>
                                            <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-fill"></span>
                                        </div>
                                    </div>
    
                                    <div class="ax-break-md"></div>
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">选择房子:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-row">
                                                        <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text"><span class="ax-pos-right">室</span></div>
                                                        <span class="ax-gutter-md"></span>
                                                        <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
                                                        <span class="ax-gutter-md"></span>
                                                        <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="ax-break-md"></div>
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">手机验证码:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div>
                                                <div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span>填写完成</div>
                                            </div>
                                            <a href="###" class="ax-form-btn ax-btn ax-btn-primary">获取验证码</a>
                                        </div>
                                    </div>
    
                                    <div class="ax-break-md"></div>
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">名称(头像):</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                            </div>
                                            <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(core/images/loading.gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                        </div>
                                    </div>
    
                                    <div class="ax-break-md"></div>
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">选择文件:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <input onchange="document.getElementById('file-view').value=this.value;" id="file-upload" class="ax-input-file" type="file">
                                                    <input name="username" placeholder="点击选择头像" onmouseout="document.getElementById('file-upload').style.display='none';" id="file-view" type="text">
                                                    <span onmouseover="document.getElementById('file-upload').style.display='block';" class="ax-file-btn">选择图片</span>
                                                </div>
                                            </div>
                                            <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/examples/images/head01.jpg),url(core/images/loading.gif);"></a>
                                        </div>
                                    </div>
    
                                    <div class="ax-break-md"></div>
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">选择城市:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <select class="ax-select-modal">
                                                        <option value="北京">北京</option>
                                                        <option value="上海">上海</option>
                                                        <option value="重庆" selected="">重庆</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="ax-break-md"></div>
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">单选:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-row">
                                                        <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="0" checked="" type="radio"><span>军事类</span></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="1" type="radio"><span>人物志类</span></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="ax-break-md"></div>
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">复选:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-row">
                                                        <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="0" checked="" type="checkbox"><span>军事类</span></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="1" type="checkbox"><span>人物志类</span></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div>
                                                        <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="ax-break-md"></div>
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">数量:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input"><div class="ax-increase"><input name="username" placeholder="数量" value="2" type="text"><a href="###" class="ax-minus"><i class="ax-iconfont ax-icon-minus"></i></a><a href="###" class="ax-plus"><i class="ax-iconfont ax-icon-plus"></i></a></div></div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="ax-break-md"></div>
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">评论:</div>
                                            <div class="ax-flex-block">
                                                <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="ax-break-md"></div>
    
                                <div class="ax-break-line"></div>
                                <div class="ax-row ax-window-operate">
                                    <a href="###" class="ax-col ax-col-12 ax-color-ignore" data-fancybox-close>取消</a>
                                    <span class="ax-gutter-line"></span>
                                    <a href="###" class="ax-col ax-col-12" data-fancybox-close>确定</a>
                                </div>
    
                            </div>