Custom HTML in thumbs?

[devjam1n]

Hi,

Is it possible to add some custom HTML in the thumbs when i call appendSlide? I have some slides in which I want to display a icon on top of the thumb as they are third-party dynamically loaded images.

[fancyapps]

Hi,

Here is one possible solution:

Fancybox.bind("[data-fancybox]", {
  Thumbs : {
    Carousel : {
      on: {
        "*": (carousel, eventName, slide) => {
          if (eventName === "createSlide") {
            let div = document.createElement("div");
            div.innerHTML = 'Hello';

            slide.el.append(div);
          }
        },
      },
    }
  }
});  

https://jsfiddle.net/u1kby75r/

[devjam1n]

Thank you for the answer and demo! This is exactly what I was looking for :)