将图像数组添加到 Fancybox

Posted 2023-05-09

【中文标题】将图像数组添加到 Fancybox

【英文标题】：Add array of images to Fancybox

【发布时间】：2021-06-20 23:01:21

【问题描述】：

我正在尝试让 fancybox 在灯箱中显示一系列图像。我有一个JS对象fancybox_img，这里是这个对象的内容：

card_173: Array(1), card_171: Array(5), card_169: Array(4)
card_169: Array(4)
0: src: "flat6.jpeg"
1: src: "flat7.jpg"
2: src: "flat6.jpeg"
3: src: "flat4.jpg"
length: 4
__proto__: Array(0)
card_171: (5) […, …, …, …, …]
card_173: […]
__proto__: Object

所以我试图选择每张卡片并显示图像数组：

jQuery('#module_properties .item-tool').click(function() 
            var idCard = jQuery(this).parents(".card").data("card");
            var imgCard = fancybox_img[idCard];
            
            jQuery.fancybox.open([
                imgCard
            ]);
            
        );

imgCard 的 Console.log ：

0: src: "flat6.jpeg"
1: src: "flat7.jpg"
2: src: "flat6.jpeg"
3: src: "flat4.jpg"
length: 4
__proto__: Array(0)

当我点击时，fancybox 会告诉我它是一个对象。这里是让 fancybox 显示多张图片的例子。

以编程方式打开图片库的示例（选项是可选的）：

$.fancybox.open([
    
        src  : '1_b.jpg',
        opts : 
            caption : 'First caption',
            thumb   : '1_s.jpg'
        
    ,
    
        src  : '2_b.jpg',
        opts : 
            caption : 'Second caption',
            thumb   : '2_s.jpg'
        
    
], 
    loop : false
);

我不知道该怎么做才能拥有与 src: 'url',src: 'url2'.... 相同的东西。 谢谢大家的建议

【参考方案1】：

看起来你只需要简单地替换

jQuery.fancybox.open([
  imgCard
]);

与

jQuery.fancybox.open(imgCard);