hugo-theme-zzo/layouts/partials/body/fancybox.html

35 lines
1.1 KiB
HTML

{{ 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 }}