اريد اعمل zoomed مع امكانية الانتقال يمين ويسار لصور بNext.js

مرحباً منصور ,

ما رأيته في الموقع هو أنك تريد عرض مجموعة صور بشكل بطاقات , وعندما نضغط على أحد الصور , تظهر الصورة بكامل الصفحة ويمكننا التنقل بين الصور مثل Gallery .

يوجد مكتبة تسمى react-image-gallery يمكنك استخدامها في مشروعك NextJs لإنشاء معرض صور , سأوضح في المثال التالي كيف يمكن تنزيلها واستخدامها :

• أولاً قم بتثبيت المكتبة في مشروعك :

  npm install react-image-gallery
  

• لجعل الكود قابل لإعادة الاستخدام وببنية صحيحة , قم بإنشاء component خاص لعرض الصور كالتالي( وليكن ImageGallery.js ) :

  import React from 'react';
  import Gallery from 'react-image-gallery';
  import 'react-image-gallery/styles/css/image-gallery.css';
  
  const images = [
    {
      original: 'path/to/image1.jpg',
      thumbnail: 'path/to/image1_thumbnail.jpg',
      description: 'Description 1'
    },
    {
      original: 'path/to/image2.jpg',
      thumbnail: 'path/to/image2_thumbnail.jpg',
      description: 'Description 2'
    },
  ];
  
  const ImageGallery = () => {
    return (
      <Gallery items={images} />
    );
  };
  
  export default ImageGallery;

  
  ويمكنك جعل مصفوفة الصور أن تكون ك props
   
• بعدها يمكنك استخدام component في صفحة Next js كالتالي :

  import React from 'react';
  import ImageGallery from '../components/ImageGallery';
  
  const GalleryPage = () => {
    return (
      <div>
        <h1>Gallery</h1>
        <ImageGallery />
      </div>
    );
  };
  
  export default GalleryPage;