Gallery 灯箱画廊

简介

使用方法

最简单的使用

                                <a href="https://src.axui.cn/v2.0/public/images/china01.jpg" title="伟大的中国" axLightbox class="ax-btn ax-primary">A标签打开</a>
                                <div class="ax-break"></div>
                                <img src="https://src.axui.cn/v2.0/public/images/china02.jpg" width="200" title="伟大的中国" alt="伟大的中国" axLightbox/>
                        

使用其他标签打开

                                <span axLightbox='src:"https://src.axui.cn/v2.0/public/images/china01.jpg"'>
                                    <img src="https://src.axui.cn/v2.0/public/images/china01-sm.jpg" alt="伟大的中国" />
                                </span>
                            

创建图集

                                <a href="###" class="ax-btn" axLightbox='src:"https://src.axui.cn/v2.0/public/images/china01.jpg,https://src.axui.cn/v2.0/public/images/china02.jpg,https://src.axui.cn/v2.0/public/images/china03.jpg"'>多张图片</a>
                                <a href="###" class="ax-btn" axLightbox='src:[{media:"https://src.axui.cn/v2.0/public/images/china01.jpg",caption:"伟大的中国01"},{media:"https://src.axui.cn/v2.0/public/images/china02.jpg",caption:"伟大的中国02"}]'>多张图片(带标题)</a>
                        

合并图集

                                <a href="https://src.axui.cn/v2.0/public/images/china01.jpg" axLightbox="insName:'demo'" title="伟大的中国01">
                                    <img src="https://src.axui.cn/v2.0/public/images/china01-sm.jpg" alt="伟大的中国01" />
                                </a>
                                <a href="https://src.axui.cn/v2.0/public/images/china02.jpg" axLightbox="insName:'demo'" title="伟大的中国02">
                                    <img src="https://src.axui.cn/v2.0/public/images/china02-sm.jpg" alt="伟大的中国02" />
                                </a>
                                <a href="https://src.axui.cn/v2.0/public/images/china03.jpg" axLightbox="insName:'demo'" title="伟大的中国03">
                                    <img src="https://src.axui.cn/v2.0/public/images/china03-sm.jpg" alt="伟大的中国03" />
                                </a>
                            

从模板创建实例

                    <div style="display:none;" id="demo">
                        <figure>
                            <img src="图片地址" type="image">
                            <figcaption caption>图片标题</figcaption>
                        </figure>
                        <figure>
                            <img src="图片地址" type="image">
                            <figcaption caption>图片标题</figcaption>
                        </figure>
                        <figure>
                            <img src="图片地址" type="image">
                            <figcaption caption>图片标题</figcaption>
                        </figure>
                    </div>
                    

                                    <a href="###" axLightbox='src:"#demo"' class="ax-btn ax-primary">用模板创建实例</a>
                                    <div style="display:none;" id="tpl">
                                       <figure>
                                           <img src="https://swiperjs.com/demos/images/nature-1.jpg" type="image">
                                           <figcaption caption>风景01</figcaption>
                                       </figure>
                                       <figure>
                                           <img src="https://swiperjs.com/demos/images/nature-2.jpg" type="image">
                                           <figcaption caption>风景02</figcaption>
                                       </figure>
                                       <figure>
                                           <img src="https://swiperjs.com/demos/images/nature-3.jpg" type="image">
                                           <figcaption caption>风景03</figcaption>
                                       </figure>
                                   </div>
                    

正文插入图片

大图集

混合内容

                                <a href="###" axLightbox='src:{media:"https://www.axui.cn",type:"iframe"}' class="ax-btn ax-btn-primary">打开iframe</a>
                                <a href="###" axLightbox='src:{media:"https://src.axui.cn/v2.0/public/media/video.mp4",type:"video"}' class="ax-btn ax-btn-primary">打开视频</a>
                                <a href="###" axLightbox='src:{media:"https://src.axui.cn/v2.0/public/media/audio.mp3",type:"audio"}' class="ax-btn ax-btn-primary">打开音频</a>
                                <a href="###" axLightbox='src:{media:"#text",type:"text"}' class="ax-btn ax-btn-primary">打开文本</a>
                                <a href="###" axLightbox='src:[{media:"https://src.axui.cn/v2.0/public/images/china01.jpg",type:"image"},{media:"https://www.axui.cn",type:"iframe"},{media:"https://src.axui.cn/v2.0/public/media/video.mp4",type:"video"},{media:"https://src.axui.cn/v2.0/public/media/audio.mp3",type:"audio"},{media:"#text",type:text}]' class="ax-btn ax-btn-primary">混合内容</a>
                            <div style="display:none;" id="text">
                                <div class="ax-padding ax-no-swiping">
                                    <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                    <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                    <p>　　中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p>
                                    <div align="center">
                                        <a href="###" class="ax-btn ax-btn-primary ax-btn-longer" close>我知道了</a>
                                    </div>
                                </div>
                            </div>
                        

变量和操作方法

监听事件

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axLightbox({
            insName: '',//实例名称，对axInstance有用实例合集当中
            src: '',//内容来源，可以是一个图片地址，也可以多个用英文逗号“,”隔开的图片地址；也可以是[{media:'',cover:'',caption:'',type:''}]数组类型的值
            //cover是封面图片，将在小图导航显示，如果没有值则使用“暂无图片”替代
            //src.type可选择video，audio，iframe，text,image，为空或不存在按image创建Dom
            gallery: true,//是否使用多页切换的画廊模式，默认否true即为画廊模式，可选择false则只显示一个slide并不能轮播
            download: false,//是否显示图片下载按钮，默认不显示false，可选择true显示
            autoplay: false,//图片集是否自动播放，默认手动false，可选择true
            thumb: {
                show: false,//是否显示小图集，默认不显示false，可选择true
                placement: 'bottom',
                row: 1,//小图集按几行显示，默认按一行显示1，可选择2、3...
            },
            //thumb:false,表示不使用小图导航
            zoom: true,//是否显示缩放图标，默认显示true，可选择false
            share: false,//是否显示分享按钮，默认false不显示，可选择true显示
            btnClass: 'ax-lightbox-open',//触发按钮在打开灯箱后新增的样式名
            index: 0,//初始化后，显示第几页
            zIndex:0,//气泡层级，默认为0即不设置，如果与其他组件发生遮挡请自行设置
            breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
            onInit: '',//回调函数，初始化后执行，无参数
            onShow: '',//回调函数，开始显示后执行，无参数
            onshown: '',//回调函数，完成显示后执行，无参数
            onHide: '',//回调函数，开始关闭后执行，无参数
            onHidden: '',//回调函数，完全关闭后执行，无参数
            onUpdate: '',//回调函数，参数/内容/位置更新前执行，无参数
            onDestroy: '',//回调函数，销毁后执行，无参数
      });
});