2022-12-13 12:15:17
•
1568
layer多组、分组图片相册预览
$(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