$(document).on('click', '.layer-photos-demo', function() { var imgArry = []; var id = $(this).attr('data-id'); $("#pic"+id).find("img").each(function(){ imgArry.push({"src": $(this).attr("src")}) }) layer.photos({ //photos:"#pic"+data_id, photos: { "title": "", //相册标题 "id": 123, //相册id "start": 0, //初始显示的图片序号,默认0 "data": imgArry } //格式见API文档手册页 ,shadeClose: true //closeBtn: 2, ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机 }); })
html代码
<div id="pic2" data-id="2" class="layer-photos-demo"> <img layer-src="/uploadfile/10/image/20221213/20221213100530_48984.jpg" src="/uploadfile/10/image/20221213/20221213100530_48984.jpg" style="width: 50px; height: 50px;"> <img layer-src="/uploadfile/10/image/20221213/20221213100532_48512.jpg" src="/uploadfile/10/image/20221213/20221213100532_48512.jpg" style="width: 50px; height: 50px;"> </div> <div id="pic3" data-id="3" class="layer-photos-demo"> <img layer-src="/uploadfile/10/image/20221213/20221213100530_48984.jpg" src="/uploadfile/10/image/20221213/20221213100530_48984.jpg" style="width: 50px; height: 50px;"> <img layer-src="/uploadfile/10/image/20221213/20221213100532_48512.jpg" src="/uploadfile/10/image/20221213/20221213100532_48512.jpg" style="width: 50px; height: 50px;"> </div>
layer多组、分组图片相册预览 参考:https://developer.aliyun.com/article/925958
继续阅读与本文标签相同的文章
上一篇 :
mysql count 统计多表数据
下一篇 :
网站css一键换灰色
-
阿里云Linux服务器动态扩容(阿里云服务器扩容后磁盘空间无变化解决方法)
2020-11-30栏目: 建站教程
-
6个SEM实战技巧,大神手把手教你做推广!
2020-07-20栏目: SEM
-
苏州美食推荐,持续更新
2020-06-17栏目: 生活笔记
-
企业如何玩转视频号
2020-05-12栏目: 运营杂谈
-
SEO关键词排名该掌握的核心优化技巧
2020-05-12栏目: SEO
打印
分享
发表评论 已发布 0 条