The gallery works correct as it should but every time that I had a link/url on the caption field it breaks the gallery.
Surely should be something around here .html(); thats is filtering the html tags.
ACF repeater:
<?php
if( have_rows('gallery') ):
?>
<div class="row">
<?php
while( have_rows('gallery') ) : the_row();
$image = get_sub_field('image');
$caption = get_sub_field('caption');
?>
<div class="col-md-4 mb-3 pl-2">
<figure class="image-holder">
<a href="<?php echo $image; ?>" data-fancybox="images">
<img class="gallery-img" src="<?php echo $image; ?>" />
<figcaption><?php echo $caption; ?></figcaption>
</a>
</figure>
</div>
<?php
endwhile;
else :
//echo "No images selected";
?>
</div>
<?php
endif;
?>
Script:
jQuery(document).ready(function($){
$( '[data-fancybox="images"]' ).fancybox({
caption : function( instance, item ) {
return $(this).find('figcaption').html();
},
toolbar : false,
smallBtn : true,
iframe : {
preload : false
},
beforeShow: function() {
$('.caption--image').remove();
},
afterShow: function() {
var caption = $(".fancybox-caption"),
innerCaption = caption.clone().addClass('caption--image');
$(".fancybox-slide--current .fancybox-content").append(innerCaption);
caption.not('.caption--image').addClass('caption--bottom');
}
});
});
The test can be executed on this codepen: codepen.io/fancyapps/pen/aaerxw
If we had a html tag such link inside the figcaption the gallery stops to work