如何在td上打开已有的fancybox 3图片

我想用fancybox 3打开图片a或b(如果可用)，这些图片来自没有特定类的任何td。单击按钮时，图片应按原样显示。

我已经包含了bootstrap、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代码：(SO上另一个fancybox问题的解决方案)

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

和(显然是为了td的tr实例)

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

和

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

转载请注明出处:http://www.wje4.com/article/20230526/1349474.html