{{ if $.Param "enablePhotoSwipe" }}

{{ $fancyboxjs := resources.Get `js/jquery.fancybox.min.js` | resources.Fingerprint }}
<script defer src="{{ $fancyboxjs.RelPermalink }}"></script>
{{ $fancyboxcss := resources.Get "css/jquery.fancybox.min.css" | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $fancyboxcss.RelPermalink }}">

<script>
  $(document).ready(function() {
    $('[data-fancybox="gallery"]').fancybox({
      loop: true,
      keyboard: true,
      clickContent: true,
      buttons: [
        "zoom",
        "slideShow",
        "fullScreen",
        "download",
        "thumbs",
        "close",
      ],
      caption: function (instance, item) {
        return $(this).data('alt') || '';
      }
    });

    var imgElements = $('.single__contents:not(".single__contents--gallery")').find('img');    
    imgElements.each(function(i,  v) {      
      $(this).css('cursor', 'pointer');
      $(this).wrap(`<a data-fancybox="gallery" href="${ $(this).attr('src') }" alt="${ $(this).attr('alt') }" data-caption="${ $(this).attr('alt') }"></a>`);
    });
  });
</script>

{{ end }}