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',
                                                    }).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"'></span>
                                    <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="instance:'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="instance:'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="instance:'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,
                        }
                    }).init();
    
                multiBtn.onclick = function () {
                    multiIns.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>
                                        

混合内容

本插件除了能作为图片灯箱,还能显示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>
                        

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

  • init 初始化后执行(页面创建完节点)
  • update 参数更新后执行
  • show 打开灯箱前执行
  • shown 打开灯箱后执行
  • hide 关闭灯箱前执行
  • hidden 关闭灯箱后执行

演示实例使用console方法,请用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({
        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,//初始化后,显示第几页
      });
});
                        

操作方法

名称 说明 参数说明 回调函数
init() 初始化 无参数 无回调函数
show(callback) 打开实例窗口 callback是回调函数,可不填 function(){}
无参数
hide(callback) 关闭实例窗口 callback是回调函数,可不填 function(){}
无参数
on(type, handler) 监听实例 type是监听事件,具体可看前文的:监听方法;handler是回调函数 function(){}
无参数
axInstance(axLightboxs, name) 获取实例 axLightboxs是当页创建的所有实例;name是指插件元素axLightboxs属性的name值 无回调函数
在回调函数中this均指向实例本身,所以在回调函数中可默认使用如下变量:
  • this:实例本身
  • this.targetDom:实例的Dom
  • this.button:打开实例的按钮
  • this.options:实例的参数
  • this.data:实例的完整内容,数组格式