пользовательский контент в заголовке fancybox

Question

Я пытался добавить подобную функцию к изображениям в fancybox. в области заголовка должна быть кнопка, чтобы понравиться изображение и увидеть количество лайков

блок заголовков записывает ссылку на скачивание самой большой версии изображения

в блоке beforeShow я читаю галерею изображений и изображение и отправляю его в likes.php - этот скрипт будет искать в базе данных, если есть лайки - все работает - только в конце ошибки:

содержимое переменной liketext увеличивается с каждым кадром и я не могу получить доступ к html-содержимому области заголовка

как мне написать в область катионов? почему растет содержимое переменной liketext?

<script>
  $( '[data-fancybox="gallery"]' ).fancybox({
    caption : function( instance, item ) {
            var caption = $(this).data('caption') || '';
            if ( item.type === 'image' ) {
                    caption = (caption.length ? caption + '<br />' : '') + '<a href="images/' + item.src.substring(14) + '" download="' + item.src.substring(14) + '">Download</a>' ;
            }
            return caption;
    },

    beforeShow : function( instance, current ) {
      var image_url = current.src;
      image_url = image_url.substring(14);
      var path_array = window.location.pathname.split('/');
      var gal_pfad = path_array[path_array.length-2];

      $.ajax({
        method: "POST",
        url: "likes.php",
        data: { gal: gal_pfad, image: image_url }
        })
        .done(function( msg ) {
          var response = msg.split('|');
          var like_count = response[0];
          var my_likes = response[1];
          var liketext = "";
            if (my_likes == 0) {
                  // display active like button
                  liketext += "Like!";
          }
          else {
            // display inactiv like button
            liketext += "i Like this already";
          }
          liketext += "liked by " + like_count + " persons";
          var captionbox = $( ".fancybox-caption" ).val();
          $( ".fancybox-caption" ).val( captionbox + liketext );
        });
      }
    })
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<a data-fancybox="gallery" href='images/middle_B68A0282.jpg'><img src='images/thumb_B68A0282.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0286.jpg'><img src='images/thumb_B68A0286.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0291.jpg'><img src='images/thumb_B68A0291.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0299.jpg'><img src='images/thumb_B68A0299.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0302.jpg'><img src='images/thumb_B68A0302.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0306.jpg'><img src='images/thumb_B68A0306.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0308.jpg'><img src='images/thumb_B68A0308.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0316.jpg'><img src='images/thumb_B68A0316.jpg' alt='' /></a>
<a data-fancybox="gallery" href='images/middle_B68A0319.jpg'><img src='images/thumb_B68A0319.jpg' alt='' /></a>

Answer 1

почему растет содержимое переменной liketext?

Поскольку вы добавляете новый контент в существующий, здесь:

var captionbox = $( ".fancybox-caption" ).val();
$( ".fancybox-caption" ).val( captionbox + liketext );

Если вы хотитеустановите новое содержание html, затем используйте .html( htmlString ), см. https://api.jquery.com/html/#html2