How to custom trigger Fancyapp (fancybox) slide zoom?

Question

This is about a Fancybox/Fancyapp.

I would like to create a button <button id="zoomNext">Zoom</button> that would zoom the next slide. Unfortunately, nothing works inside $('#zoomNext').click(function(){

<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>
<div class="gallery"><a href="someimage.jpg" data-fancybox="gallery"><img src="someimage.jpg"></a></div>

<button id="zoomNext">Zoom next slide than is active now</button>

$(document).ready(function() {
   
   // binding works. gallery is ok itself
   Fancybox.bind(".gallery", {
        wheel: 'slide',
    });
    
    // this one i'm trying to add with no luck in functioning
    $('#zoomNext').click(function(){
       
       Fancybox.getSlide()?.panzoom.zoomIn(); // static method does not work

       const fancybox = Fancybox.getInstance(); // does not work
       fancybox.next(); // does not work.

    });
})

Documentation: https://fancyapps.com/fancybox/api/methods/

Answer 1

Since you didn't provide any demo, I'm guessing you're executing your code somewhere on the page while your element doesn't exist.

Start Fancybox and execute this code in the console - Fancybox.getInstance().next() - if it works (it should change to the next slide) then double check your code.

Also, you have this code -

Fancybox.getSlide()?.panzoom.zoomIn(); // static method does not work
const fancybox = Fancybox.getInstance(); // does not work

But, did you start Fancybox before running the code? E.g., did you click on any of links to start Fancybox before that? If not, then it would not do anything, as expected.