Ability to customize gallery items

[hyperstown]

Hi. I noticed that currently is quite hard to do any customization on gallery items. I need to add a button to each image and I thought about two solutions:

Modify 'item-added-to-dom' event so it returns also item.element instead only item.model, or make a custom method in Item class similar to what photoSwipe did:

photoSwipe.pswp.ui.registerElement({
  name: "test-button",
  ariaLabel: "Add to favs",
  order: 9,
  isButton: true,
  html: '<i class="bi bi-heart" style="text-shadow: 2px 2px 5px black;"></i>',
  onClick: (event, el) => {
    addToFavs(event, el)
  },
});

[sambaptista]

This lib is supposed to achieve your goal, out of the box, but I may be misundertanding your need. I'm not even sure if you're talking about the gallery (list with thumbnails) or the photoswipe zoom part.

I can answer for the gallery itself :

Consider setting the option activable :

new NaturalGallery.Natural(galleryElement, {activable: true}, scrollableElement)

Each item in the gallery gets a button, with CSS class that allows you to customize it.

Then use activate event to react to click (https://ecodev.github.io/natural-gallery-js/docs-api.html#activable) :

gallery.addEventListener('activate', function(ev) {
    console.log(ev.detail); // {model: Object, clickEvent: MouseEvent}
});

Does it answer your question ? or do you mean adding an additionnal button ( = 2 buttons by thumbnail).

[hyperstown]

Sorry if I wasn't specific enough, I meant gallery (thumbnails). Photoswipe was only an example on how customization could be implemented. But I think I found a nice workaround. My problem was that I needed to add a "like" button to every element so I can then filter by favorites. I managed to accomplish that using 'item-added-to-dom' event and modifying last item of gallery.visibleCollection

gallery.addEventListener('item-added-to-dom', (e) => {
  const item = gallery.visibleCollection[gallery.visibleCollectionLength - 1];
  if(!item._element) {
    console.warn("Item has no element!");
    return; // This shouldn't happen but if that was the case display warning.
  }
  item._element.appendChild(createLikeElement(item.model));
  //console.log("added", item, e);
}); 

The effect looks like this: