How to make Fancybox run on photoframe click?

Question

fancyBox

Good afternoon!
There is a site with pictures and Photoframe 3, on click the callback "onClick" worked and processed fancybox.

if ($('div#fotorama').length>0) {
        	$.fn.noop = function(){return this};
            var fotorama = $('div#fotorama')
            ,	fancy_data = [];
      fotorama.find('img').each(function(){
        fancy_data.push({href:$(this).data('b')});
      });

            fotorama.fotorama({
               onClick: function(data) {
        var fotoramaClasses = fotorama.attr('class');
        var fotoramaTouchStyle = fotorama.data('options').touchStyle;
        // fancybox manual call
        $.fancybox(/*fotorama.data('options').*/fancy_data, {
          type: 'image',
          index: data.index,
          changeFade: 333,
          transitionIn: 'elastic',
          transitionOut: 'elastic',
          padding: 0,
          orig: $('.fotorama__wrap', fotorama),
          onStart: function(fancybox, i) {
            $.extend(fotorama.data('options'), {touchStyle: false});
            fotorama
                .trigger('showimg', [i, 333])
                .removeClass('fotorama_csstransitions')
                .find('.fotorama__wrap')
                .removeClass('fotorama__wrap_style_touch')
                .addClass('fotorama__wrap_style_fade')
                .find('.fotorama__frame').not('.fotorama__frame_active')
                [fotoramaTouchStyle ? 'fadeTo': 'noop'](0, 0);
          },
          onClosed: function() {
            $.extend(fotorama.data('options'), {touchStyle: fotoramaTouchStyle});
            fotorama
              .trigger('showimg', [undefined, 0])
              .attr({'class': fotoramaClasses})
              .find('.fotorama__wrap')
              [fotoramaTouchStyle ? 'addClass' : 'removeClass']('fotorama__wrap_style_touch')
              [!fotoramaTouchStyle ? 'addClass' : 'removeClass']('fotorama__wrap_style_fade')
              .find('.fotorama__frame')
              [fotoramaTouchStyle ? 'fadeTo': 'noop'](0, 1);
          }
        });
        // stop fotorama
        return false;
        }
            });
        }

You need to switch to Photoframe 4, the script itself got up fine, but now nothing happens on click.
The documentation for PhotoFrame 3 has a description of the "onClick" callback, but for some reason it is not in the description of PhotoFrame 4.
Empirically, I found out that the script does not even enter onClick: function (data) {}.
I tried to insert the fancybox code into fotorama.click(function(){}), then the script goes there, but the fancybox still does not appear on the site when clicked.
Tell me how to make Fancybox run by clicking on the photo frame.

Answer 1

In version 4, everything is easier.

<div class="fotorama" data-nav="thumbs" data-width="470" data-height="360" data-thumbwidth="111" data-thumbheight="84" data-thumbborderwidth="0" data-thumbmargin="10">
    <div class="fotorama__wrap-link" data-img="pic/photo-5.jpg"><a href="pic/photo-5-big.jpg" class="fancybox"></a></div>
    <div class="fotorama__wrap-link" data-img="pic/photo-6.jpg"><a href="pic/photo-6-big.jpg" class="fancybox"></a></div>
    <div class="fotorama__wrap-link" data-img="pic/photo-7.jpg"><a href="pic/photo-7-big.jpg" class="fancybox"></a></div>
    <div class="fotorama__wrap-link" data-img="pic/photo-8.jpg"><a href="pic/photo-8-big.jpg" class="fancybox"></a></div>
</div>

Answer 2

In your script it says ($('div#fotorama') and in the layout class="fotorama" , change the lattice to a dot. so that it is like this ($('div.fotorama')