How to attach click listener on pop up image-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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!

CodePudding user response：

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>