idleTime option for v4?

[KrisGielen]

Hi,
First of all, thank you for this amazing app. I very much like the modular approach of v4. However, I miss the "idleTime" option that was in v3 whereby the toolbar, caption and navigation elements got hidden after 4s of inactivity. Is there a way to get this working for v4?
Many thanks,
Kris

[fancyapps]

Hi,

Sorry, there is currently no built-in option for that, but it is on the to-do list. But you could easily create using API, here is a quick example:

const Idle = {
  timer: null,
  set: () => {
    Idle.timer = setTimeout(() => {
      Fancybox.getInstance().$container.classList.add("is-idle");
    }, 1000);
  },
  end: () => {
    clearTimeout(Idle.timer);
    Fancybox.getInstance().$container.classList.remove("is-idle");
  },
};

Fancybox.bind('[data-fancybox="gallery"]', {
  on: {
    ready: (fancybox) => {
      Idle.set();

      fancybox.$container.addEventListener("mousemove", function (event) {
        Idle.end();
        Idle.set();
      });
    },
  },
});

.fancybox__container[aria-hidden="false"].is-idle .fancybox__toolbar,
.fancybox__container[aria-hidden="false"].is-idle .fancybox__nav {
  animation: 0.15s ease both fancybox-fadeOut;
}

https://fancyapps.com/playground/30i

[KrisGielen]

Hi Jānis,

Thank you for your quick and complete answer. This is great! Thank you for the example, I could immediately apply it to my project and it works exactly as expected. Many thanks for this and for your awesome library.

Kris