Merge pull request #13522 from MrPetovan/task/expose-image-description

Add caption display for described images in Fancybox gallery
This commit is contained in:
Tobias Diekershoff 2023-10-08 18:38:59 +02:00 committed by GitHub
commit bffbde4639
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 12 deletions

View File

@ -1,13 +1,10 @@
$(document).ready(function() { $(document).ready(function() {
$.fancybox.defaults.loop = "true"; $.fancybox.defaults.loop = "true";
// this disables the colorbox hook found in frio/js/modal.js:34 $.fancybox.defaults.afterLoad = function(instance, current) {
$("body").off("click", ".wall-item-body a img");
// Adds ALT/TITLE text to fancybox
$('a[data-fancybox').fancybox({
afterLoad : function(instance, current) {
current.$image.attr('alt', current.opts.$orig.find('img').attr('alt') ); current.$image.attr('alt', current.opts.$orig.find('img').attr('alt') );
current.$image.attr('title', current.opts.$orig.find('img').attr('title') ); current.$image.attr('title', current.opts.$orig.find('img').attr('title') );
} };
}); $.fancybox.defaults.caption = function (instance, slide, caption) {
return slide.$thumb.attr('alt');
};
}); });

View File

@ -1,5 +1,10 @@
{{if $image->preview}} {{if $image->preview}}
<a data-fancybox="{{$image->uriId}}" href="{{$image->url}}"><img src="{{$image->preview}}" alt="{{$image->description}}" title="{{$image->description}}" loading="lazy"></a> <a data-fancybox="{{$image->uriId}}" href="{{$image->url}}"><img src="{{$image->preview}}" alt="{{$image->description}}" title="{{$image->description}}" loading="lazy"></a>
{{else}} {{else}}
<figure>
<img src="{{$image->url}}" alt="{{$image->description}}" title="{{$image->description}}" loading="lazy"> <img src="{{$image->url}}" alt="{{$image->description}}" title="{{$image->description}}" loading="lazy">
{{if $image->description}}
<figcaption>{{$image->description}}</figcaption>
{{/if}}
</figure>
{{/if}} {{/if}}

View File

@ -12,6 +12,9 @@
</a> </a>
{{else}} {{else}}
<img src="{{$image->url}}" alt="{{$image->description}}" title="{{$image->description}}" loading="lazy"> <img src="{{$image->url}}" alt="{{$image->description}}" title="{{$image->description}}" loading="lazy">
{{if $image->description}}
<figcaption>{{$image->description}}</figcaption>
{{/if}}
{{/if}} {{/if}}
</figure> </figure>