Step 1: Updating Images

Locate the Images Array

The images are stored in the images array:

const images = [
  {
    fullSize: "/images/Image-A.webp",
    alt: "This is your alt text for the image be sure to change it to something relevant for Accessibility & SEO purposes",
  },
  ...
]

Update Image Paths (fullSize)

• Replace /images/Image-X.webp with the file path to your images.

• If using local files, save them in the public/images/ folder.

Example Update:

const images = [
  {
    fullSize: "/images/photo1.jpg",
    alt: "Beautiful sunset over the mountains",
  },
  {
    fullSize: "/images/photo2.jpg",
    alt: "Crystal-clear lake surrounded by forests",
  },
]

Update Alt Text (alt)

• Provide meaningful descriptions to improve accessibility and SEO.

• Avoid generic descriptions like "Image"; instead, describe the image content (e.g., "Golden Gate Bridge at sunset").

Step 2: Customize Modal Navigation

Next and Previous Buttons

Navigation is handled using showNext and showPrev functions. Buttons are defined in this block:

{/* Previous Button */}
<button
  className="absolute 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-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 for different colors.

  • Modify p-3 and w-8 h-8 to adjust padding and icon size.

Example Update:

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:

  • Modify bg-white to bg-red-500 or other colors.

  • Adjust p-2 for padding and w-6 h-6 for icon size.

Step 3: Adjust Animations

Modal Background Animation

The modal background uses AnimatePresence and motion.div:

<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 (duration): Change the fade-in/out speed by updating the transition property.

Example Update:

Image Scale Animation

The image scaling effect is defined here:

<motion.div
  className="relative w-screen h-screen flex items-center justify-center"
  initial={{ scale: 0.8 }}
  animate={{ scale: 1 }}
  exit={{ scale: 0.8 }}
>

• Adjust Scale Timing and Amount:

  • Modify scale: 0.8 to control the starting size.

  • Adjust transition duration to make the animation slower or faster.

Example Update:

Step 4: Ensure Responsiveness

Thumbnail Grid

The grid of thumbnails is defined here:

<ul className="grid grid-cols-2 sm:grid-cols-4 gap-2">

• Customize Columns:

  • Adjust grid-cols-2 for mobile and sm:grid-cols-4 for larger screens.

• Modify Spacing:

  • Change gap-2 to increase or decrease space between images.

Example Update:

<ul className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-4">

Modal Image Display

The modal image display ensures the image scales to 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. Keyboard Navigation:

   • Add tabIndex to buttons for keyboard accessibility.

   • Use onKeyDown to handle arrow key navigation.

Example Update:

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

2. Alt Text:

   • Ensure every image has unique, descriptive alt text.

3. Focus Management:

   • Automatically focus on the modal when opened for screen reader users.

Step 6: Testing Your Component

1. Run Locally: Use npm run dev or yarn dev to view the component.

2. Responsive Testing:

   • Test grid and modal layout on different screen sizes.

3. Keyboard Navigation:

   • Verify that arrow keys and Tab work for navigation.

Best Practices

1. Image Optimization:

   • Use compressed .webp images for faster loading.

2. Consistent Styling:

   • Align colors, spacing, and typography with your project’s design system.

3. Smooth Animations:

   • Test easing and duration for a polished user experience.