Как реализовать пользовательский триггер разметки для prettyPhoto - PullRequest
Новая
       30

Как реализовать пользовательский триггер разметки для prettyPhoto

2 голосов
/ 02 июля 2019

Во-первых, у меня есть это представление на столе: enter image description here

, когда я нажимаю 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>

на моем, который не может вызвать

Как мне решить эту проблему?

1 Ответ

0 голосов
/ 02 июля 2019

Я не уверен, как вы инициализируете 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>
...