Search code examples
javascriptarraysobjectfancyboxfancybox-3

Add array of images to Fancybox


I'm trying to get fancybox to display a series of images in a lightbox. I have an JS object fancybox_img, here the content of this object :

{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

So I m trying to select each card and display the array of images :

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

Console.log of the imgCard :

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

And when i click, fancybox show me that it s a object. Here the exmple that give fancybox to display multiples images.

Example of opening image gallery programmatically (the opts are optionnal):

$.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
});

I dont know how to do to have the same thing that {src: 'url'},{src: 'url2'}.... Thank for your advice folks


Solution

  • Looks like you just have to simply replace

    jQuery.fancybox.open([
      imgCard
    ]);
    

    with

    jQuery.fancybox.open(imgCard);