Fancybox3 ACF repeater. URL strip out from the caption field

Question

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 an tag inside the figcaption the gallery stops to work

0
Nuno Sarmento 2 months 0 Answers 6 views 0

Leave an answer