如何为 prettyPhoto 实现自定义标记触发器答案

【问题标题】：How to implemement custom markup trigger for prettyPhoto如何为 prettyPhoto 实现自定义标记触发器
【发布时间】：2019-11-12 17:41:12
【问题描述】：

首先，我在桌子上有这样的看法：

当我点击 td 时，它会打开 PrettyPhoto 灯箱

在 prettyPhoto 上，默认的 html 触发器是：

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
    <img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>

但是我有这个html：

<a href="image.jpeg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
    <div class="kt-user-card-v2__pic">
        <img src="http://wasapbro-2019.test/storage/msg/cupb1RUgcGLnUovQi7eBpxLIIRu37sPKcha1jjuI.jpeg" class="m-img-rounded kt-marginless" alt="photo">
    </div>
    <div class="kt-user-card-v2__details">
        <span class="kt-user-card-v2__name">test</span>
    </div>
</a>

在我的触发失败

我该如何解决这个问题？

【问题讨论】：

一种便宜的方法可能是在潜水 kt-user-card-v2__pic 之前有另一个 img 标签并通过将 img 显示为 none 来隐藏它
你能给我看一个代码/可运行的例子或插图吗？
当然，我会写一个答案
抱歉，这是我唯一的想法。我以前用过这个。

标签： javascript jquery html css prettyphoto

【解决方案1】：

我不确定你是如何初始化 PrettyPhoto 的，但我使用你的 DOM 结构设置了这个快速演示，它似乎工作得很好。需要注意的一点是，您需要使用 jQuery 版本 2.x 或更早版本，因为 PrettyPhoto 依赖于 .size();这在 jQuery 3.0+ 中不可用。

$(document).ready(function() {
    $("a[rel^='prettyPhoto']").prettyPhoto();
});

<!DOCTYPE html>
<html>

<head>
    <title>Pretty Photo</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://lib.arvancloud.com/ar/prettyPhoto/3.1.6/css/prettyPhoto.min.css" type="text/css" media="screen" charset="utf-8" />
    <script src="https://lib.arvancloud.com/ar/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <table>
        <tr>
            <td>
                <a href="https://live.staticflickr.com/8183/8079715772_f003d725d1_z.jpg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
                    <div class="kt-user-card-v2__pic">
                        <img src="https://live.staticflickr.com/8183/8079715772_f003d725d1_z.jpg" class="m-img-rounded kt-marginless" alt="photo">
                    </div>
                    <div class="kt-user-card-v2__details">
                        <span class="kt-user-card-v2__name">test</span>
                    </div>
                </a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="https://live.staticflickr.com/8512/8509212953_4cfefc8b9a_z.jpg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
                    <div class="kt-user-card-v2__pic">
                        <img src="https://live.staticflickr.com/8512/8509212953_4cfefc8b9a_z.jpg" class="m-img-rounded kt-marginless" alt="photo">
                    </div>
                    <div class="kt-user-card-v2__details">
                        <span class="kt-user-card-v2__name">test</span>
                    </div>
                </a>
            </td>
        </tr>
    </table>
</body>

</html>

【讨论】：