Ability to initialize the component on a specific DOM node

[slolo2000]

Hello,

Would it be possible to instantiate the component on a specific DOM node?

The idea is to be able to call the component multiple times once the DOM is fully loaded (useful in the case of a SPA application).

If not, is instantiating the component again enough to take into account the newly loaded images in the DOM?

Thank you in advance for your response and I wish you a pleasant day.

[deoostfrees]

Hi @slolo2000,

Parvus doesn't offer a direct way to instantiate on a specific DOM node. It uses document.querySelectorAll() to search through the entire document.

There are two effective approaches:

1. Re-instantiate after DOM changes

// Destroy current instance (if exists)
if (parvusInstance) {
  parvusInstance.destroy()
}

// Create new instance that captures all matching elements
parvusInstance = new Parvus(options)

2. Use the add() method

// Create instance once
const prvs = new Parvus(options)

// Later, after DOM changes, add new elements
document.querySelectorAll('.lightbox:not(.parvus-trigger)').forEach((el) => {
  prvs.add(el)
})

The second approach is more efficient as you don't need to completely recreate the instance.

[slolo2000]

Hi @deoostfrees,

Thanks a lot for your answer.

So, if I understand correctly, there can only be one instance of the component at a time?

Do you think it might be interesting to create a "reset" method that would do the equivalent of a "destroy" and then create a new instance?

[deoostfrees]

Hi @slolo2000,

So, if I understand correctly, there can only be one instance of the component at a time?

Yes.

Do you think it might be interesting to create a "reset" method that would do the equivalent of a "destroy" and then create a new instance?

If it's a useful function, why not? I'm open to that.