First image is getting duplicated and have different width height.

[Syedtabish93]

when i open the lightbox, my gallery images are appearing perfect, but the very first image is shown as shorter in width height, and also it again repeated to the next slide with proper width height, basically it is repeating, i dont need the image to be repeated. and its repeating dynamically to every listing.

please tell me if this plugin has any option or how can i get rid of this duplication

[igordanchenko]

I'm afraid your post doesn't provide sufficient details to troubleshoot your issue. Please consider providing a reproducible example if you require further assistance. Feel free to use the following StackBlitz sandbox as a starting point - https://stackblitz.com/edit/yet-another-react-lightbox-sandbox?file=src%2FApp.tsx

[Syedtabish93]

actually, in my case, the images are coming dynamically, not harcoded. please see this code below:

import React, { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import Counter from "yet-another-react-lightbox/plugins/counter";
import { Button } from "@mui/material";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/counter.css";

const TestGallery = ({ images, bestImage }) => {
    const [open, setOpen] = useState(false);

    // Define slides based on images
    const slides = [bestImage, ...images].map(url => ({
        src: url
        // Optionally, provide width, height, and srcSet if available
    }));

    const galleryButton = {
      '&:hover': {
          backgroundColor: '#2980b9', // Replace 'your_hover_color' with the desired hover color
      },
      background: '#3498db',
      padding: '6px 24px',
      color: '#fff'
  }

    return (
        <>
            <Button color="primary" sx={galleryButton} onClick={() => setOpen(true)}>
                See All Photos
            </Button>

            <Lightbox
                open={open}
                // onClose={handleClose} // Use the handleClose function
                close={() => setOpen(false)}
                slides={slides}
                plugins={[Counter]}
                counter={{ container: { style: { top: "unset", bottom: 0 } } }}
                controller={{
                    closeOnPullUp: true,
                    closeOnPullDown: true,
                    closeOnBackdropClick: true
                }}
            />
        </>
    );
};

export default TestGallery;

[igordanchenko]

Does your app re-render the lightbox while it's open? In your case you are providing dynamic slides array, which works fine as long as the component holding the lightbox doesn't re-render while the lightbox is open.

Please see slides prop description - https://yet-another-react-lightbox.com/documentation#Lightbox

You may need to track lightbox index to avoid unexpected side effects - https://yet-another-react-lightbox.com/documentation#TrackingSlideIndex

[Syedtabish93]

how can we see if its re-rendering? can you please help me getting the main issue?

[igordanchenko]

1. Add console.log('render') to your TestGallery function
   or
2. Try the link I posted above

[Syedtabish93]

didnt got the solution nor i found the exact issue, but i have changed my logic with custom effect,
thanks for your consideration