Steps for implementing a custom markup trigger with prettyPhoto:

Recently, I encountered an issue with my table view: https://i.sstatic.net/Fji2F.png

Upon clicking the td, it should open the PrettyPhoto Lightbox

In the default PrettyPhoto setup, the html trigger looks like this: 

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

However, my html code is different: 

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

Unfortunately, in my case, the trigger fails to work.

Any suggestions on how to troubleshoot this?

javascriptjqueryhtmlcssprettyphoto

Answer №1

Initializing PrettyPhoto may vary, but I have created a quick demo utilizing your existing DOM structure, and it appears to be functioning correctly. One important point to consider is that you must utilize jQuery version 2.x or earlier because PrettyPhoto depends on .size(); which is not supported 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a function on each page within the head tag in Nuxt.js

I successfully made my function accessible by using the plugin attribute in the nuxt.config.js file, allowing me to call the function under mounted on every page. I am looking for a more efficient way to run this function within the head tag and have it b ...

javascripthtmlcssvue.jsnuxt.js

Text fades into view from the bottom after a line break using CSS and JavaScript

I'm looking to create a unique fade reveal text effect for a multi-line H1. The goal is for each line of the text to fade up from its own row, rather than simply revealing from the bottom. Here's an example I've already developed, but it cu ...

jqueryhtmlcssanimationheading

Ways to restrict access to resources

My static website is simple, but I am concerned that everyone has access to my assets. For example, when I go to www.mysite.com/assets in the browser, it shows: Index of /assets Parent Directory css/ img/ js/ Is there a way to display a 403 error page ...

html.htaccess

React in response after waiting for the DOM element - Reactjs

Hey there! I'm working with a class component that looks like this: class SomeComponent extends Component { componentDidMount = () => { const divElement = document.getElementbyId('id'); // it may take a few moments for this ele ...

javascriptreactjs

What are some ways to capture and save the window width prior to launching my Nuxt application?

I am working on a Nuxt application where I need to display different components based on the window width and send a request to create a session with the device width as one of the header parameters. Here is my approach: In my store code: //index.js expor ...

javascriptvue.jsnuxt.jsvuex

switch the anchor tag value and send it along with the URL

I am trying to update the value of "trans" in the Ajax URL based on a toggle between on and off values. However, despite successfully toggling the text, the URL parameter does not change accordingly. Can anyone offer any assistance? I currently have to rel ...

javascriptjqueryhtmlajax

Refreshing local storage memory on render with a custom Next.js hook

I recently developed a custom Next.js hook named useLocalStorage to store data in local storage. Everything is working fine, except for one issue - the local storage memory gets refreshed with every render. Is there a way to prevent this from happening? ...

javascriptreactjstypescriptnext.js

Fetching values from a MySQL database by using jQuery autocomplete on change event

I'm in need of assistance with creating a form using PHP, MySQL, and jQuery. Below is the HTML and PHP structure of my form: <form> <label>Employee Name</label> <input name="empid" type="text" id="search" <?php if ( ...

phpjquerymysql

Testing Ajax code encounters error

Currently, I am running a code test with Jasmine and setting up a mock object for the ajax method. spyOn($,'ajax').and.callFake(function(e){ console.log("is hitting"); }) In order to test the code snippet below: $.ajax({ url: Ap ...

javascriptajaxjasmine

Simple Steps for Making a Get Request using Vuex in Vue.js

I'm trying to figure out how to store products in Vuex within my index component. import Vue from 'vue' import Vuex from 'vuex' import cart from "./modules/cart"; import createPersistedState from "vuex-persistedstate ...

javascriptvue.jsvuejs2vuex

What is the reason behind the `h-full`/`height:100%` not completely filling the void within a div element?

The issue lies in the structure of my content, which includes a title, a subtitle, and a footer. My desire is for the subtitle's div to fill the gap between the title and the footer. I attempted using h-full on the div element, but it had no noticeab ...

htmlcssnext.jsflexboxtailwind-css

Instructions for placing the navigation links below the navigation brand

Could you please advise me on how to center the navigation links below the brand logo? I am new to coding and just starting out. Here is a link to a page that demonstrates what I am trying to achieve: In this example, the brand name is "a fork and a pe ...

htmlcssbootstrap-4

When the window is fully loaded, JavaScript executes

Can someone help me set up this script to start running when the page loads? I want the vat field to automatically show up if the company name has been entered. Thank you! //--></script> <script type="text/javascript>//-- $('.colorbox ...

javascriptjquery

Creating an HTML report in Oracle SQL*Plus with alternating row colors

When using Oracle sqlplus, I can easily convert query output into an HTML report by setting "markup html on". This is a simple way to publish a database report online. However, I do miss one thing - alternating colors for every other row. This feature is ...

htmloraclereportsqlplus

Tips for handling value updates when a user clicks a checkbox using jQuery

Having trouble with updating values when a checkbox is clicked. When the checkbox is clicked once, the value is added correctly. However, if the user rapidly clicks on the same checkbox multiple times, the value is not added or subtracted properly and gets ...

jqueryhtmlajaxsymfonycheckbox

Choose particular content enclosed by two strings (across multiple lines)

Looking to use regex to extract specific text between two strings. For example: foo I have four toys bar //single line foo //multiline I have four toys bar foo I have three pets bar foo I have three pets bar How can I extract the text between & ...

javascriptregexregex-lookaroundsregex-greedy

Ways to animate a main element independently of its counterpart's animation

I want to create an animation for a parent element without affecting the child's animation. My HTML & CSS structure is set up as follows: .parent{ background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1be ...

htmlcss

Vue is refusing to display information for a certain API call

Within my next component, I have the following structure: <template> <div class="home"> <div class="container" v-if="data" > <Card v-for="result in data" :img="result.links[0]&q ...

javascriptvue.jsvuejs2vue-component

Passing Error from AngularJS Service to Controller

Service Function myService.serviceName = function (userId) { return $http({ method: 'POST', url: '/someUrl' }).then(function successCallback(response) { return ...

javascriptangularjs

Creating an element in react-draggable with two sides bound and two sides open - here's how!

At the moment, I am facing an issue where the element is restricted from moving outside of the container with the class of card-width-height. My goal is to have the right and bottom sides bounded within the container while allowing the element to move beyo ...

javascriptcssreactjsecmascript-6jsx