fancybox disable button on last gallery image

Question

I am using fancybox to display a gallery of pictures. But I wanted to put an interactive puzzle on the last slide. The puzzle works, but when I try to select some of the puzzle pieces on the right or left, the nav buttons appear and overlap the puzzle, causing me to either go to the previous slide or loops me back to the beginning.

Question is: How can I have an image gallery with navigation buttons function, until I get to the last slide? I want to disable the right/left arrow and its functionality on the last slide only.
Is this even possible?

        $(document).ready(function() {

    $(".grouped").fancybox({

        openEffect              : 'none',
        closeEffect             : 'none',
        prevEffect              : 'none',
        nextEffect              : 'none',
        closeBtn                : false,

        helpers : {
            title : {
                type : 'inside'
            }
        }
        });

}); 

My class for the gallery is

<a class="grouped" data-fancybox-group="button" href="../theme/images/questions_screen.jpg">

and the class for the puzzle is

<a class="grouped fancybox.iframe" data-fancybox-group="button" href="../theme/hidden_game/games">

Answer 1

you can track by index

$('.fancy-el').fancybox({
      afterLoad: function(current) {
           if (current.index === current.group.length - 1) {
               current.arrows = false;
           }
      }
 });

http://jsfiddle.net/x03xqu7t/3/

Answer 2

when you reach on the last frame, you can hide the previous and next with css

.fancybox-prev, .fancybox-next add display:none; to above classes when you reach last frame.