Как сделать кнопку “лайк” в Fancybox?

159

24 апреля 2018, 02:34

Суть вот в чем - нужно при открытии картинки в лайтбоксе отображение кнопки "Лайк", которая присутствует на каждом изображении на странице.

То, как это выглядит сейчас.

Саму кнопку я вывел с помощью этой функции:

$('a.sl-button').each(function(index) { 
  var imgID = $(this).attr('data-post-id'); 
 
  $.fancybox.defaults.btnTpl.fb = '<a href="http://www.sitesting.biz.ua/wp-admin/admin-ajax.php?action=process_simple_like&amp;post_id=' + imgID + '&amp;nonce=f8d41cf2bf&amp;is_comment=0&amp;disabled=true" class="sl-button sl-button-' + imgID + ' liked" data-nonce="f8d41cf2bf" data-post-id="' + imgID + '" data-iscomment="0" title="Unlike">' + 
    '<span class="sl-icon">' + 
    '<svg role="img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">' + 
    '<path id="heart-full" d="M124 20.4C111.5-7 73.7-4.8 64 19 54.3-4.9 16.5-7 4 20.4c-14.7 32.3 19.4 63 60 107.1C104.6 83.4 138.7 52.7 124 20.4z">' + 
    '</path>' + 
    '♥' + 
    '</svg>' + 
    '</span>' + 
    '<span class="sl-count">' + 
    '</span>' + 
    '</a>'; 
})

Но сейчас эта кнопка выводиться во всех изображениях одна и та же - то есть отображаеться она на всех картинках в лайтбоксе, но её функционален только для последнего изображения в посте.

Для правильной работы этой кнопки, вместо переменной imgID нужно подтягивать ID каждого изображения - но, как я уже сказал, АйДишник подтягиваеться только из последнего изображения.