如何在 td click 上打开现有的 fancybox 3 图像

Question

我想在没有特定 class 的任何 td 中使用 fancybox 3 打开图片 a 或 b（如果可用）。单击按钮时，图片应按原样显示。

我已经包含 bootstrap、fancybox 和 jquery。我也使用 material 图标中的图标。从按钮打开时，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');
            }
        });

和（显然是为 tr insted of 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

只需从 <a> 元素中删除所有与 fancybox 相关的标签并添加到 <td> 元素，因为使用什么 HTML 元素作为 fancybox 的触发元素并不重要。

Answer 2

如果有人对我找到解决方案的方式感兴趣：

$(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');
                }
            });
});

如何在 td click 上打开现有的 fancybox 3 图像

How to open up existing fancybox 3 image on td click

javascript

jquery

freemarker

fancybox

bootstrap-4