Multiple Galleries

[bartoloffm]

Could you please give an example of multiple galleries with different targets? I tried this but it doesn't work: `var imgs = [], bps = [], grids = document.querySelectorAll('.img-grid'); // The Galleries

    for (var i=0; i<grids.length; i++) {

        bps[i] = BiggerPicture({ target: grids[i] });

        imgs[i] = grids[i].querySelectorAll('.has-thumb');  // The images

        for (var n=0; n<imgs[i].length; n++) {
            imgs[i][n].addEventListener('click', function(e){
                e.preventDefault();
                bps[i].open({
                    items: imgs[i],
                    el: e.currentTarget
                });
            });
        }       
    }`

Thank you for your help.

[henrygd]

This reads like you have different sections of thumbnail groups on your page that you want to open independently in a full screen gallery.

If that's the case, you don't need multiple instances with different targets -- you only need one instance with the body element as the target. The single instance can display different items because they're passed in the open method and not at instantiation.

Multiple instances are useful when you need multiple galleries displayed at the same time. For example, if you need an inline gallery in addition to a full screen gallery.

Let me know if that helps. If you're still stuck and you want to make a codesandbox or stackblitz I can fix it for you. I'll also try to make it a bit more clear in the readme at some point.

[bartoloffm]

Thank you so much for answering, I tried but unfortunately I can't get it to work. Here is the sandbox:

sandbox

I need the 2 galleries to be independent from each other, so I would really appreciate if you could correct it. Thank you.

[henrygd]

It looks like in your version i from the for loop is always 2 in the click function, which is out of range for the array. Here's a working version which is made simpler by using for of loops and getting rid of the arrays.

I also imported styles from bigger-picture, swapped the data width / height values because that was set for landscape images, and added a couple basic css reset rules to make it display better.

Let me know if you have any questions.

https://codesandbox.io/s/mutable-microservice-gv2wfv?file=/src/index.js

[bartoloffm]

It works like a charm now, thank you so much. I appreciate it!