Как открыть существующее изображение fancybox 3 при нажатии

Question

Я хочу открыть картинку a или b (если есть) с fancybox 3 из любого тд без определенного класса.Картинки должны быть такими, какие они есть при нажатии на кнопку.

Я включил начальную загрузку, fancybox и jquery.Также я использую иконки из материальных иконок.Fancybox отлично работает при открытии с кнопки.

<table>
    <tbody>
         <tr>
            <td style="cursor:pointer" id="abc">
                abc
            </td>
            <td style="cursor:pointer" id="def">
                def
            </td>
            <td  class="1234">
                 <div class="btn-group float-right" role="group"style="display:flex;">
                    <#if a??>
                        <a type="button" class="btn btn-secondary btn-sm" 
                           data-fancybox="test" data-type="image" 
                           data-thumb="${a}" data caption="abc" rel="group"
                           href="${a}" title="View browser screenshot">
                            <i class="material-icons md-14" 
                               aria hidden="true">photo_camera</i>
                        </a>
                    </#if>
                    <#if b??>
                        <a type="button" class="btn btn-secondary btn-sm" 
                           data-fancybox="test" data-type="image" 
                           data-thumb="${a}" data caption="abc" 
                           rel="group" href="${a}" 
                           title="View browser screenshot">
                            <i class="material-icons md-14" 
                               aria-hidden="true">remove_red_eye</i>
                        </a>
                    </#if>`
                </div>
            </td>
        </tr>
    </tbody>
</table>

Я попробовал этот код jquery: (Решение для другого вопроса fancybox по SO)

$(".table > tbody > tr > td").bind('click',function(e) {
            e.stopPropagation();
            if (!$(this).hasClass("1234")) {
                $(this).find("a").trigger('click');
            }
        });

и (очевидно, для tr ins td)

$('.table > tbody > tr').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
        });

и

$(document).ready(function(){
$('td').on('click', function() {
                if (!$(this).hasClass("1234")) {
                    $.fancybox();
                }
            });
        });

Answer 1

Если какое-то тело заинтересовано в том, как я нашел решение:

$(document).ready(function(){
            $(".table > tbody > tr > td").bind('click',function(e) {
                var name = $(this).attr('name');
                e.stopPropagation();
                if (!$(this).hasClass("1234")) {
                    $("#" + name).find("a:first").trigger('click');
                }
            });
});

Answer 2

Просто удалите все теги, связанные с fancybox, из элемента <a> и добавьте к элементу <td>, потому что не имеет значения, какие элементы HTML вы используете в качестве элементов триггера для fancybox.