Add multiple instances of VenoBox with different settings

[roskad]

Is is possible to use multiple VenoBox galleries with different set of options on the same page?

For example, I have multiple carousels on the same page in which I need to use different callbacks. And on the same page I have another section in which I want to use VenoBox but with it's own settings.

When I try this approach:

function carousel1() {
  //carousel1 logic
  const carousel1VenoBoxOptions = {
    //setings for the carousel1 VenoBox
    onNavComplete: function (obj, gallIndex, thenext, theprev) {
      //some logic here
    },
    onPreClose: function (obj, gallIndex, thenext, theprev) {
      //some logic here
    },
  };

  const carousel1VenoBox = new VenoBox(carousel1VenoBoxOptions ); 
}
carousel1();

function carousel2() {
  //carousel2 logic
  const carousel2VenoBoxOptions = {
    //setings for the carousel2 VenoBox
    onNavComplete: function (obj, gallIndex, thenext, theprev) {
      //some logic here
    },
    onPreClose: function (obj, gallIndex, thenext, theprev) {
      //some logic here
    },
  };

  const carousel2VenoBox = new VenoBox(carousel2VenoBoxOptions ); 
}
carousel2();

function gallery1() {
  const galleryType1Container = document.querySelectorAll('.gallery-type-1');
  galleryType1Container.forEach((container, index) => {
    const galleryLink = container.querySelectorAll('.gallery__img');
    galleryLink.forEach(link => {
      link.setAttribute('data-gall', `gallery-type-8-${index}`);
    });

    const gallery1VenoBoxOptions = {
      //setings for the gallery VenoBox
    };

    const galleryType1 = new VenoBox(gallery1VenoBoxOptions );
  });
}
gallery1();

VenoBox gets settings from the first initialization, in my case const carousel1VenoBox = new VenoBox(carousel1VenoBoxOptions );

This means I can't configure second (third, etc) VenoBox instance as I need.

[nicolafranchini]

Hi, you are missing the option selector in each configuration, so the script initializes only one time all the items with the class '.venobox', which is the default selector if nothing specific is provided.

Remove the class venobox from your links, and add custom classes, eg: carousel-1, carousel-2, and so on...

const carousel1VenoBoxOptions = {
    selector: ".carousel-1",
   // more options here
});

const carousel2VenoBoxOptions = {
    selector: ".carousel-2",
   // more options here
});

[roskad]

@nicolafranchini thank you! Works correctly now.

By the way, the selector property only accepts a single class, right?

[nicolafranchini]

The selector accepts any valid queryselector, it could also be something like this: selector: "#my-gallery a"