[SOLVED] Fotorama: How to cancel fullscreen by click outside of image?

Fotorama: How to cancel fullscreen by click outside of image?

I would like to cancel Fotorama'a fullscreen by click outside of the images. Fotorama only allows to exit fullscreen clicking on the fotorama__fullscreen-icon button.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    fotoramaDefaults = {
      maxwidth: '100%',
      allowfullscreen: true,
      nav: 'thumbs',
      thumbwidth: '100',
      thumbheight: '100',
      thumbborderwidth: 0,
      thumbmargin: 3,
      click: false,
      swipe: false,
    };
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<div class="fotorama">
  <a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
  <a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
  <a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
  <a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
</div>

Solution

$('.fotorama').on('click', function (e, fotorama) {
    if ($(e.target).hasClass("fotorama__stage__frame")) {
        $('.fotorama').data('fotorama').cancelFullScreen();
    }
});