How to implemement custom markup trigger for prettyPhoto

Question

How to implemement custom markup trigger for prettyPhoto

289 Views Asked by mending3 At 02 July 2019 at 06:08

Firstly, I have this view on table:

when I click the td, it opens the PrettyPhoto Lightbox

on prettyPhoto, the default html trigger is:

<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>

but instead I have this 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>

on mine that fails to trigger

How do I solve this?

Original Q&A

There are 1 best solutions below

**mminc** · Answer 1 · 2019-07-02T14:11:27.807000

I am not sure how you are initializing PrettyPhoto, but I set up this quick demo using your DOM structure and it seems to work just fine. One thing to note is that you need to use jQuery version 2.x or older since PrettyPhoto relies on .size(); which isn't available in 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>

How to implemement custom markup trigger for prettyPhoto

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in PRETTYPHOTO

Trending Questions

Popular # Hahtags

Popular Questions