Step 1: Updating Images

Locate the Images Array

The gallery images are defined in the images array:

const images = [
  {
    fullSize: "https://images.unsplash.com/photo-1620641622776-c1058b851a4e?q=80&w=3333&auto=format&fit=crop...",
    alt: "Vintage Car",
  },
  ...
]

• Replace fullSize URLs: Update the URLs to your images. If using local images, save them in the public/images/ folder and reference them (e.g., /images/photo1.jpg).

• Update alt: Provide meaningful descriptions for accessibility and SEO.

Example Update:

const images = [
  {
    fullSize: "/images/photo1.jpg",
    alt: "A scenic view of mountains at sunrise",
  },
  {
    fullSize: "/images/photo2.jpg",
    alt: "Close-up of a vibrant flower in bloom",
  },
]

Step 2: Customize the Modal (Lightbox) Navigation

Close Button

The close button is defined here:

<button
  className="absolute top-6 right-6 bg-white text-black p-2 rounded-full"
  onClick={closeImage}
>
  <Cross2Icon className="w-6 h-6" />
</button>

• Customize Appearance:

  • Change the background color (bg-white) or text color (text-black).

  • Adjust the size with p-2 (padding) and w-6 h-6 (icon dimensions).

Example Update:

Previous and Next Buttons

Navigation buttons are defined here:

{/* Previous Button */}
<button
  className="absolute left-4 md:left-10 top-1/2 transform -translate-y-1/2 bg-white text-black p-3 rounded-full"
  onClick={(e) => {
    e.stopPropagation();
    showPrev();
  }}
>
  <ChevronLeftIcon className="w-8 h-8" />
</button>

{/* Next Button */}
<button
  className="absolute right-4 md:right-10 top-1/2 transform -translate-y-1/2 bg-white text-black p-3 rounded-full"
  onClick={(e) => {
    e.stopPropagation();
    showNext();
  }}
>
  <ChevronRightIcon className="w-8 h-8" />
</button>

• Customize Styles:

  • Update bg-white and text-black to match your theme.

  • Adjust padding (p-3) and size (w-8 h-8).

Example Update:

Step 3: Adjust Animations

Modal Background Animation

The modal background uses motion.div for fading in/out:

<motion.div
  className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
>

• Adjust Fade Timing: Change the transition duration for opacity:

Example Update:

<motion.div
  transition={{ duration: 0.8 }}
>

Image Scale Animation

The image scaling effect is defined here:

<motion.div
  initial={{ scale: 0.8 }}
  animate={{ scale: 1 }}
  exit={{ scale: 0.8 }}
>

• Adjust Scale Timing and Size:

  • Modify scale: 0.8 for the starting size.

  • Adjust duration for speed.

Example Update:

Step 4: Styling and Responsiveness

Thumbnail Grid

The thumbnail grid uses CSS columns:

<ul className="columns-2 md:columns-3 lg:columns-4 gap-4 space-y-4">

• Customize Column Count: Adjust the number of columns for different breakpoints (e.g., md:columns-3 for medium screens).

• Adjust Spacing: Modify gap-4 (horizontal gap) and space-y-4 (vertical spacing).

Example Update:

<ul className="columns-1 sm:columns-2 md:columns-3 lg:columns-5 gap-6 space-y-6">

Modal Image Display

The modal ensures images fit the viewport:

<img
  src={images[selectedIndex].fullSize}
  alt={images[selectedIndex].alt}
  className="w-full h-full object-contain"
/>

• Contain or Cover: Change object-contain to object-cover for different scaling behaviors.

Step 5: Accessibility Improvements

1. Alt Text:

   • Ensure all images have unique, descriptive alt attributes.

2. Keyboard Navigation:

   • Add tabIndex="0" to buttons for keyboard focus.

   • Use onKeyDown to handle arrow key navigation.

Example Update:

<button
  onKeyDown={(e) => {
    if (e.key === "ArrowLeft") showPrev();
    if (e.key === "ArrowRight") showNext();
  }}
  tabIndex={0}
>

3. Focus Management:

   • Set focus to the modal when opened for screen reader users.

Step 6: Testing Your Component

1. Run Locally: Use npm run dev to preview changes.

2. Responsive Testing:

   • Verify the grid layout and modal behavior on different screen sizes.

3. Keyboard Navigation:

   • Ensure arrow keys and Tab work for navigation.

Best Practices

1. Image Optimization:

   • Use .webp or compressed formats for fast loading.

2. Consistent Styling:

   • Align colors, fonts, and spacing with your design system.

3. Smooth Animations:

   • Test easing and duration values for a polished user experience.