adding carousel function control inside content of modal?

[steverethink]

I made a quick playground to illustrate what i'm trying to attempt.

https://fancyapps.com/playground/Cq

If you click on "gallery c", i was hoping that i could include working carousel controls within the actual content body itself. (for example, possibly adding prev/next links in the copy).

Is this possible using the declarative method of invoking fancybox? I see theres sort of an example in the API section of the docs but I'm a little unclear how to use it in my example (if its possible).

[fancyapps]

Hi,

Use Fancybox.getInstance() to get reference to the current instance anywhere from the code. You can create links like this:

<p>Click <a href="#" onclick="javascript:Fancybox.getInstance().prev();return false;">here</a> to go to the previous slide.</p>
<p>Click <a href="#" onclick="javascript:Fancybox.getInstance().next();return false;">next</a> to go to the next slide.</p>

Demo - https://fancyapps.com/playground/Cr

[fancyapps]

If you are creating many links, you can make it easier by using this snippet:

Fancybox.bind("[data-fancybox]", {
  closeButton: "outside",
  on: {
    "Carousel.Panzoom.click": (fancybox, carousel, panzoom, e) => {
      if ("fancyboxPrev" in e.target.dataset) {
        e.stopPropagation();
        e.preventDefault();

        fancybox.prev();
      }

      if ("fancyboxNext" in e.target.dataset) {
        e.stopPropagation();
        e.preventDefault();

        fancybox.next();
      }
    },
  },
});

Then simply create links like this:

<p>Click <a href="#" data-fancybox-prev>here</a> to go to the previous slide.</p>
<p>Click <a href="#" data-fancybox-next>next</a> to go to the next slide.</p>

Demo - https://fancyapps.com/playground/Cu

[steverethink]

this method is preferable and works perfectly. thank you!