Why onClick and columns function not working?

[tolyle]

With your help, my project seems to be close to perfection. I sincerely thank you for your efforts. However, today I want to add lightbox to my project. After querying the documentation and demo, my code still cannot run the onclick method.

<PhotoAlbum
  layout="rows"
  photos={data}
  spacing={10}
  targetRowHeight={600}
  onClick={({ index }) => {
    alert("s");
  }}
  renderPhoto={NextJsImage}
  columns={(containerWidth) => {
    if (containerWidth < 400) return 2;
    if (containerWidth < 800) return 3;
    return 3;
  }}
  componentsProps={{ containerProps: { style: { paddingBottom: 20 } } }}
/>

I suspect it's because I set the renderPhoto parameter, but I'm not sure. But when I call lightbox in NextJsImage, I can't get the index of the image. I'm not sure what's causing this problem. In addition, columns This function is also not working. How can I make them all work normally? Much thanks.

Source code: https://github.com/onmybob/myblog

[igordanchenko]

After querying the documentation and demo, my code still cannot run the onclick method.

The reason for this is pretty simple. You didn't implement the onClick prop in your custom image component. You'd need to pass the onClick prop into your custom image component.

In addition, columns This function is also not working.

Can you elaborate on this?

[tolyle]

Thank you for your reply. How should I implement onClick in the custom component? Is it implemented in the NextJsImage component in the sentence renderPhoto={NextJsImage}? But I tried it and didn't know how to start.

Regarding this question, In addition, columns This function is also not working.
I set it in the component,

columns={(containerWidth) => { if (containerWidth < 400) return 2; if (containerWidth < 800) return 3; return 3; }},
but the number of images appearing on the page will be greater than 3 columns, which is not the maximum 3 columns allowed by my settings.

[igordanchenko]

How should I implement onClick in the custom component? Is it implemented in the NextJsImage component in the sentence renderPhoto={NextJsImage}? But I tried it and didn't know how to start.

Here is how the onClick prop is implemented in Next.js image example on the documentation website.

But you are not using the onClick prop at all in your implementation.

but the number of images appearing on the page will be greater than 3 columns, which is not the maximum 3 columns allowed by my settings.

You are using "rows" layout, hence the "columns" prop is not applicable in your case.

[tolyle]

In fact, I added this onclick event at the beginning, but it didn't work. I commented out everything. Now that I restored it, it still doesn't work. I don't know where the problem lies, even if I use the next image component. It has the same effect.

<PhotoAlbum
  layout="rows"
  photos={data}
  spacing={10}
  targetRowHeight={600}
  onClick={({ index }) => {
    console.log(index);
    alert("s");
  }}
  renderPhoto={NextJsImage}
  componentsProps={{ containerProps: { style: { paddingBottom: 20 } } }}
/>

import Image from "next/image";
import type { RenderPhotoProps } from "react-photo-album";
import BlurImage from "../BlurImage";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import React from "react";

export default function NextJsImage({
  photo,
  imageProps: { alt, title, sizes, className, onClick },
  wrapperStyle,
}: RenderPhotoProps) {
  return (
    <div
      style={{
        ...wrapperStyle,
        position: "relative",
        overflowX: "hidden",
        overflowY: "hidden",
      }}
    >
      <div>
        <BlurImage
          fill
          image={photo}
          placeholder={"blurDataURL" in photo ? "blur" : undefined}
          {...{ alt, title, sizes, className, onClick }}
        />
        <div className="inset-0 absolute  imageCover  opacity-0  hover:opacity-100 ">
          <div className="absolute bottom-0 text-white px-3 py-3 pt-10  text-lg font-bold w-full ">
            {/* {photo.caption} */}
            China / Shenzhen
          </div>
        </div>
      </div>
    </div>
  );
}

[tolyle]

I'm really sorry for the format of the code is too messy.

[igordanchenko]

The answer is still the same - you are not passing the onClick prop to your Image component.

[onmybob]

I'm really sorry to bother you again. My coding skills are really poor. I modified my component code, but I don't know how to pass parameters into the new component. Maybe the new component is written incorrectly.

My new component :

[igordanchenko]

Well, why don't you start with a working code (https://react-photo-album.com/examples/nextjs#Next.jsImage) and add your features step by step. You'll see when your code breaks, and you'll know exactly what's causing it. Honestly, I do not see a reason why you need a separate BlurImage component as you can render Image component right there in the NextJsImage.

[tolyle]

In fact, you are right. I don't need a BlurImage component at all. I am just curious about how to pass parameters to BlurImage.
Now I discarded the BlurImage component, but onclick still doesn't work, I'm confused, where is the problem?

[tolyle]

onClick function not working, thank you very much.

[tolyle]

found the cause of this problem. It was because the style of the div below me covered the image. That is to say, I covered another layer of div above the image, so that the onclick event would not take effect. I moved the onclick to The div below will work just fine, thank you very much for your guidance.