How to attach click listener on pop up image

Question

I want to do something if the image got clicked like redirect user to another page, or is there a way to wrap the pop up image with <a> tag?

I can't simply just wrap the <img> with <a> because as far as I know the pop up is created on the fly, so I need to tell the lightgalery to include <a> wrapper when they creating the pop up. but I dont know how...

score -1 · Answer 1 · answered Dec 13 '22 at 01:38

-1

Yes. Any image can be treated by wrapping the img tag with an a tag according the scheme:

<a href="...">
    <img src="...">
</a>

There should be no relevance considering whether the image is a popup or not.

answered Dec 13 '22 at 01:38

Krokomot

3,208
2
4
20

I can't simply do that – Bens Dec 13 '22 at 01:53
An illustrative code sample would be helpful to assess the situation better. – Krokomot Dec 13 '22 at 06:47

score -1 · Answer 2 · answered Dec 13 '22 at 01:39

-1

the easiest way to do this is to use the <a> tag and wrap you image.

<a href="{src}">
    <img src="img.jpg" />
</a>

of course this is only to redirect or send to another part of the page. If you want to do something like play a sound or trigger an animation you would do something else like.

<Component onClick={() => handleClick()}>
    <img src="img.jpg">
</Component>

I hope this helps you!

answered Dec 13 '22 at 01:39

SoloOrchid

71
4

I can't simply do that – Bens Dec 13 '22 at 01:53
please elaborate on what it is you cant do? can you provide a code sandbox? – SoloOrchid Dec 13 '22 at 01:56
I add a bit explanation on my question – Bens Dec 13 '22 at 01:58
can you share some code? – SoloOrchid Dec 13 '22 at 01:59

score -1 · Answer 3 · answered Dec 13 '22 at 06:24

For this you need to create a router file where you will able to redirect your output wherever you want on click.

If its not answer please say in some more descriptive way .

Or <a href="..." target="_blank"> <img src="..." /> </a>

This is even absolutely correct way.

import React from "react"
import {Navigate} from 'react-router-dom'
function App(){
  const handleNavigate=()=>{
    navigate("/whatever")
  }
  return
  <div onClick={()=>handleNavigate()}>
    <img src="https://i.stack.imgur.com/RKSCu.jpg" alt="s" />
  </div>
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Thank you I appreciate your effort, May be I should remove the react tag on this question, this is not particularly about react alone, but mostly about how to work with LightGallery library. One should know not only react but the other one too to be able to answer this question — Bens, Dec 13 '22 at 08:10

How to attach click listener on pop up image

3 Answers3