Gallery 灯箱画廊

简介

本框架在axSwiper插件(查看axSwiper)基础上开发出了axLightbox插件,支持单图和画廊显示;不仅支持图片类型,还支持iframe、video和普通文本。

使用方法

插件运行方式有四种:

  • href属性+ax*属性:对a标签使用href属性并使用axLightbox属性即可按默认参数运行插件。
  • src属性+ax*属性:对img标签使用src属性并使用axLightbox属性即可按默认参数运行插件。
  • src属性+ax*属性:对标签使用src属性并使用axLightbox属性即可按默认参数运行插件。src值可以有多重格式,
    • src="#demo":表示从页面的#demo取得数据
    • src="../images/demo.jpg":表示一张图片
    • src="../images/demo1.jpg,../images/demo2.jpg":表示两张图片
    • src='{media:"../images/demo1.jpg",caption:'标题1'},{media:"../images/demo2.jpg",caption:'标题2'}':表示两张图片+标题
    • src='{media:"../video/demo1.mp4",caption:'标题1'},{media:"../video/demo2.mp4",caption:'标题2'}':表示两个视频+标题
  • js实例:通过new axLightbox({src:[Array]})方式创建实例运行。
  •                                     <a href="https://src.axui.cn/v2.0/public/images/china01.jpg" axLightbox>
                                            <img src="https://src.axui.cn/v2.0/public/images/china01-sm.jpg" alt="伟大的中国" />
                                        </a>
                                        <div class="ax-break"></div>
                                        <a href="###" id="demo1" class="ax-btn ax-primary">手动打开一个画廊</a>
                                            
  •                                             document.querySelector('#demo1').onclick = function () {
                                                    new axLightbox({
                                                        src: 'https://src.axui.cn/v2.0/public/images/china02.jpg',
                                                    }).init().show();
                                                }
                                            

最简单的使用

因为a标签和img标签天然具备链接图片的能力,所以对a标签和img标签使用axLightbox属性之后,便可创建灯箱实例。

插件将从a标签的href属性获取图片,从title属性获取标题;从img标签的src属性获取图片,从title或alt属性获取标题。

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

使用其他标签打开

如果对其他标签使用插件那么需要使用src属性。

伟大的中国
                                <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>
                            

创建图集

src属性写入多个图片,用英文逗号隔开即可。支持多种格式:

  • src:"01.jpg,02.jpg,03.jpg" 简单多个图片
  • src:{media:"01.jpg",caption:"标题"} 单个对象字符串格式。该格式可以显示标题
  • src:[{media:"01.jpg",caption:"标题"},{media:"01.jpg",caption:"标题"}] 数组字符串格式,最终结果与上一个格式一致
                                <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>
                            

从模板创建实例

src属性可以填写HTML模板的ID值,模板标准格式如下:

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

正文插入图片

在使用编辑器上传图片通常只会生成img标签,以下演示效果模拟编辑上传图片情况下使用本插件。如果想要显示标题需要用户自行编写点js代码。

伟大的中国 伟大的中国
  •                                             document.querySelectorAll('.img-in-text img').forEach(item => {
                                                    item.onclick = function () {
                                                        new axLightbox({
                                                            src: this.getAttribute('src'),
                                                        }).init().show();
                                                    }
                                                });
                            
  •                                 <div class="img-in-text">
                                        <img src="https://src.axui.cn/v2.0/public/images/china01.jpg" alt="伟大的中国" />
                                        <img src="https://src.axui.cn/v2.0/public/images/china02.jpg" alt="伟大的中国" />
                                    </div>
                                        
  •                         <style>
                                .img-in-text img{
                                    width:120px;
                                }
                            </style>
                                        

大图集

本示例展示显示thumb和多行缩略图,当图片数量很多时可采用。

  •             let multiData = `
                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,
                https://src.axui.cn/v2.0/public/images/china04.jpg,
                https://src.axui.cn/v2.0/public/images/china05.jpg,
                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,
                https://src.axui.cn/v2.0/public/images/china04.jpg,
                https://src.axui.cn/v2.0/public/images/china05.jpg,
                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,
                https://src.axui.cn/v2.0/public/images/china04.jpg,
                https://src.axui.cn/v2.0/public/images/china05.jpg,
                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,
                https://src.axui.cn/v2.0/public/images/china04.jpg,
                https://src.axui.cn/v2.0/public/images/china05.jpg,
                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,
                https://src.axui.cn/v2.0/public/images/china04.jpg,
                https://src.axui.cn/v2.0/public/images/china05.jpg,
                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,
                https://src.axui.cn/v2.0/public/images/china04.jpg,
                https://src.axui.cn/v2.0/public/images/china05.jpg,
                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,
                https://src.axui.cn/v2.0/public/images/china04.jpg,
                https://src.axui.cn/v2.0/public/images/china05.jpg,
                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,
                https://src.axui.cn/v2.0/public/images/china04.jpg,
                https://src.axui.cn/v2.0/public/images/china05.jpg,
                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,
                https://src.axui.cn/v2.0/public/images/china04.jpg,
                https://src.axui.cn/v2.0/public/images/china05.jpg,
                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,
                https://src.axui.cn/v2.0/public/images/china04.jpg,
                https://src.axui.cn/v2.0/public/images/china05.jpg,
                `
                multiBtn = document.querySelector('#multiBtn'),
                    multiIns = new axLightbox({
                        src: multiData,
                        thumb:{
                            show:true,
                            row:2,
                        }
                    });
    
                multiBtn.onclick = function () {
                    multiIns.init().show();
                }
                            
  •                                             <a href="###" class="ax-btn ax-primary" id="multiBtn">打开大图集</a>
                                        

混合内容

本插件除了能作为图片灯箱,还能显示iframe、视频和文本。图片、iframe、视频、文本可混合灯箱显示。

如果灯箱显示文本内容,需要复制文本,那么对文本外框追加ax-no-swiping样式,也就是将在文本上左右滑动功能取消。

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

变量和操作方法

本插件有系列内部成员变量和内部操作方法,用户根据这些变量和方法可以自由操作实例,据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。


内部成员变量如下:

  • this.button:打开浮层的按钮节点
  • this.data:灯箱的数据,格式为[{media:'',caption:'',cover:'',type:''},{}]
  • this.shown:浮层显示状态,true或false
  • this.destroyed:是否销毁状态,true或false
  • this.targetDom:浮层节点
  • this.swiper:浮层内的swiper节点
  • this.swiperWrapper:this.swiper内的.ax-wrapper节点
  • this.tools:浮层内顶部的工具栏节点
  • this.pages:浮层内左上角的分页节点
  • this.operate:浮层右上角内的操作按钮节点
  • this.stage:浮层内的主舞台节点
  • this.btnShare:分享按钮节点
  • this.btnDownload:下载按钮节点
  • this.btnZoom:放大按钮节点
  • this.btnList:菜单按钮节点
  • this.insThumb:小图集实例
  • this.insSwiper:大图集实例
  • this.thumb:小图集节点
  • this.thumbWrapper:小图集节点内.ax-wrapper节点

内部操作方法如下:

  • this.update(setting, callback):更新所有参数,支持两个参数:
    • setting:必填项,对象类型,用户自定义的参数
    • callback:选填项,回调函数,无参数:
  • show(callback):显示浮层,支持一个参数即callback回调,回调函数无参数。
  • hide(callback):隐藏浮层,支持一个参数即callback回调,回调函数无参数。
  • destroy(callback):销毁实例,支持回调函数,回调无参数:

全局操作方法如下:

  • axInstance:每个new实例都会自动加入到全局实例合集当中,通过该方法可获取实例,继而使用实例的内部变量和内部操作方法。关于axInstance使用方法请点击这里
在回调函数中this均指向实例本身,所以在回调函数中通常可使用如下变量:
  • this:实例本身
  • this.targetDom:实例的Dom
  • this.options:实例的参数

监听事件

本插件有若干监听方法,以on为关键字,参数中监听格式为:new instance({onShow:function(){}});实例后监听格式是:instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下:

  • onInit/init 初始化后执行(页面创建完节点),无参数
  • onUpdate/update 参数更新后执行,无参数
  • onShow/show 打开灯箱前执行,无参数
  • onShown/shown 打开灯箱后执行,无参数
  • onHide/hide 关闭灯箱前执行,无参数
  • onHidden/hidden 关闭灯箱后执行,无参数
  • onDestroy/destroy 销毁后执行,无参数

演示实例显示结果使用了console.log方法,请按下F12按键打开开发者工具中的“控制台”查看监听效果。

  •                                     <a href="###" class="ax-btn ax-primary" id="btnInit">先初始化</a>
                                        <a href="###" class="ax-btn ax-primary" id="btnShow">再打开</a>
                                            
  •             let btnShow = document.querySelector('#btnShow'),
                    btnInit = document.querySelector('#btnInit'),
                    instanceOn = new axLightbox({
                        src: 'https://src.axui.cn/v2.0/public/images/china02.jpg',
                    });
                btnInit.onclick = function () {
                    instanceOn.init();
                }
                btnShow.onclick = function () {
                    instanceOn.show();
                }
                instanceOn.on('init', function () {
                    console.log('已经初始化了,页面生成了Dom树!');
                }).on('show', function () {
                    console.log('开始打开灯箱!');
                }).on('shown', function () {
                    console.log('灯箱完全打开了!');
                }).on('hide', function () {
                    console.log('开始关闭灯箱!');
                }).on('hidden', function () {
                    console.log('已经关闭灯箱!');
                });
                                            

参数选项

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: '',//回调函数,销毁后执行,无参数
      });
});
                        
以axMenu插件为例,如果在元素上通过ax*使用属性,需要使用类似json的写法,属性不需要使用引号,如果值是字符串需要使用引号包裹,如果值是数字、布尔值、null或undefined不需要引号;比如要设置active,那么在元素的ax*属性中应该这样书写:axMenu="active:2"