2022-12-13 12:15:17
•
1842
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