How to customize slide title

[tolyle]

Hi, I want to redefine content for header, for example, replace text title to a link, like <div><a href='asdf'>${title}</a></div>,but it can not display, below is my code, thank you.

<Lightbox
        slides={slides}
        open={index >= 0}
        index={index}
        close={() => setIndex(-1)}
        // enable optional lightbox plugins
        plugins={[Fullscreen, Slideshow, Zoom, Captions]}
        render={{
          slideHeader: (slide) => {
            console.log('dddddddddddddddddddddddddddddd');
            console.log(slide.slide.title);
            slide.slide.title = '<div><a href=asdf>${title}</a></div>';

            return '<div><a href=asdf>${title}</a></div>';
          },
        }}
      />

[igordanchenko]

Hi, you do not need to use the render.slideHeader render function in this case since it's not related to the Captions plugin at all.

To customize the slide title, simply assign your jsx markup to the slide's title attribute as follows:

<Lightbox
  slides={[
    {
      src: "https://picsum.photos/id/237/1800/1200",
      title: (
        <a
          href="https://picsum.photos"
          target="_blank"
          rel="noopener noreferrer"
        >
          Puppy
        </a>
      )
    }
  ]}
  open={open}
  close={() => setOpen(false)}
  plugins={[Captions]}
/>

https://codesandbox.io/s/yet-another-react-lightbox-110-xdr1d8?file=/src/App.js

[hugo-ym]

Hello. It works like this. But if i try to do the same with slides={data} and with this php code

$test = array();
$test[0]['src'] = "https://picsum.photos/id/237/1800/1200";
$test[0]['title'] = '<a href="https://picsum.photos">Puppy</a>';
$test[0]['description'] = 'test';

$test[1]['src'] = "https://picsum.photos/id/237/1800/1200";
$test[1]['title'] = '<a href="https://picsum.photos">Puppy</a>';
$test[1]['description'] = 'test';

echo json_encode( $test );

i have the complete text in the title: <a href="https://picsum.photos">Puppy</a>

Am i making something wrong ?

[igordanchenko]

It sounds like you are supplying slide title as plain text containing HTML markup, while you want to use JSX markup. This was previously discussed in #56

[hugo-ym]

I didn't found this topic but it's exactly what i just succedded to do 5 minutes ago ;-)

[tolyle]

Thank you,bro, I try it , nice.