Gallery 灯箱画廊

Fancybox介绍 PLUGIN

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

该插件依赖Jquery，基本使用方法如下：

                                <link href="https://src.axui.cn/v1.0/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/v1.0/src/plugins/fancybox/js/jquery.fancybox.min.js" type="text/javascript"></script>

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

正文插入图片

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

        <link href="https://src.axui.cn/v1.0/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
        <script src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china01.jpg" alt="伟大的中国" />
                                    <img src="https://src.axui.cn/v1.0/examples/images/china02.jpg" alt="伟大的中国" />
                                </div>

                        <style>
                            .img-in-text img{
                                width:120px;
                            }
                        </style>

隐藏图片信息

        <link href="https://src.axui.cn/v1.0/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
        <script src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china01.jpg" data-fancybox="info">
                                    <img src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china02.jpg" data-fancybox="info">
                                    <img src="https://src.axui.cn/v1.0/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                    <div style="display: none">
                                        <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                        <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                        <p>　　中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p>
                                    </div>
                                </a>

固定图片信息

        <link href="https://src.axui.cn/v1.0/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
        <script src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china01.jpg" data-fancybox="info-fix">
                                    <img src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china02.jpg" data-fancybox="info-fix">
                                    <img src="https://src.axui.cn/v1.0/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                    <div style="display: none">
                                        <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                        <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                        <p>　　中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p>
                                    </div>
                                </a>

小窗图片信息

        <link href="https://src.axui.cn/v1.0/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
        <script src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china01.jpg" data-fancybox="quick-view">
                                    <img src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china02.jpg" data-fancybox="quick-view">
                                        <img src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china03.jpg" data-fancybox="quick-view">
                                        <img src="https://src.axui.cn/v1.0/examples/images/china03-sm.jpg" alt="伟大的中国" />
                                        <div>
                                            <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                        </div>
                                    </a>
                                </div>

按钮打开图集

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

点击打开JS图集显示data-fancybox=hidecap的图集

        <link href="https://src.axui.cn/v1.0/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
        <script src="https://src.axui.cn/v1.0/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/v1.0/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
        <script src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china01.jpg" data-fancybox="images-preview" data-thumb="examples/images/china01-sm.jpg">
                            <img src="https://src.axui.cn/v1.0/examples/images/china01-sm.jpg" alt="伟大的中国" />
                        </a>
                        <div style="display: none;">
                            <a href="https://src.axui.cn/v1.0/examples/images/china02.jpg"  data-fancybox="images-preview" data-thumb="examples/images/china02-sm.jpg"></a>
                            <a href="https://src.axui.cn/v1.0/examples/images/china03.jpg"  data-fancybox="images-preview" data-thumb="examples/images/china03-sm.jpg"></a>
                            <a href="https://src.axui.cn/v1.0/examples/images/china04.jpg"  data-fancybox="images-preview" data-thumb="examples/images/china04-sm.jpg"></a>
                            <a href="https://src.axui.cn/v1.0/examples/images/china05.jpg"  data-fancybox="images-preview" data-thumb="examples/images/china05-sm.jpg"></a>
                        </div>

隐藏字幕

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

        <link href="https://src.axui.cn/v1.0/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
        <script src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china01.jpg" data-fancybox="hidecap">
                                    <img src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china02.jpg" data-fancybox="hidecap">
                                    <img src="https://src.axui.cn/v1.0/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                    <div style="display: none">
                                        <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                    </div>
                                </a>

图集在底部

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

        <link href="https://src.axui.cn/v1.0/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
        <script src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china01.jpg" data-fancybox="btmthumbs">
                                    <img src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china02.jpg" data-fancybox="btmthumbs">
                                    <img src="https://src.axui.cn/v1.0/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                    <div style="display: none">
                                        <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                    </div>
                                </a>

打开和关闭属性

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

默认打开小图

加上水印

        <link href="https://src.axui.cn/v1.0/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
        <script src="https://src.axui.cn/v1.0/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/v1.0/examples/images/china01.jpg" data-fancybox="all2">
                                    <img src="https://src.axui.cn/v1.0/examples/images/china01-sm.jpg" alt="伟大的中国" />
                                </a>
                                <a href="https://src.axui.cn/v1.0/examples/images/china02.jpg" data-fancybox="all2">
                                    <img src="https://src.axui.cn/v1.0/examples/images/china02-sm.jpg" alt="伟大的中国" />
                                </a>
                                <div class="ax-break-md"></div>
                                加上水印
                                <div class="ax-clear"></div>
                                <a href="https://src.axui.cn/v1.0/examples/images/china01.jpg" data-fancybox="mark">
                                    <img src="https://src.axui.cn/v1.0/examples/images/china01-sm.jpg" alt="伟大的中国" />
                                </a>

其他操作

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

打开iframe 打开ajax 打开ajax截取打开隐藏文章打开隐藏表单打开提示窗打开隐藏视频打开AJAX视频

姓名：

选择房子：

室

厅

卫

手机验证码：

填写完成

获取验证码

名称(头像)：

李创江

选择文件：

选择图片

选择城市：

单选：

军事类

人物志类

娱乐类

其他

复选：

军事类

人物志类

娱乐类

其他

数量：

评论：

取消确定

        <link href="https://src.axui.cn/v1.0/src/plugins/fancybox/css/jquery.fancybox.css" rel="stylesheet" type="text/css" >
        <script src="https://src.axui.cn/v1.0/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/v1.0/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/v1.0/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>