ali jvn.
5 سال پیش توسط ali jvn. مطرح شد
0 پاسخ

ایجاد کردن یک گالری تصاویر با استفاده از آرایه

با سلام
من قطعه د زیر رو دارم و می خوام جاهایی که img هست رو از داخل ارایه بخونم،چی کار باید کنم؟

<section className="gallery py-lg-4 py-md-3 py-sm-3 py-3" id="gallery">
  <div className="container py-lg-5 py-md-4 py-sm-4 py-3">
    <h3 className="title text-center mb-2">Gallery </h3>
    <div className="title-w3ls-text text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum
      </p>
    </div>
    <div className="row gallery-info">
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal1">
            <img src="images/g1.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal2">
            <img src="images/bb2.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal3">
            <img src="images/bb3.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal4">
            <img src="images/g2.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal5">
            <img src="images/g3.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
      <div className="col-lg-4 col-md-6 col-sm-6 gallery-img-grid my-3">
        <div className="gallery-grids">
          <a href="#gal6">
            <img src="images/g4.jpg" alt="news image" className="img-fluid" />
          </a>
        </div>
      </div>
    </div>
    {/* popup*/}
    <div id="gal1" className="popup-effect">
      <div className="popup">
        <img src="images/g1.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
    {/* popup*/}
    <div id="gal2" className="popup-effect">
      <div className="popup">
        <img src="images/bb2.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
    {/* popup*/}
    <div id="gal3" className="popup-effect">
      <div className="popup">
        <img src="images/bb3.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
    {/* popup*/}
    <div id="gal4" className="popup-effect">
      <div className="popup">
        <img src="images/g2.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
    {/* popup*/}
    <div id="gal5" className="popup-effect">
      <div className="popup">
        <img src="images/g3.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
    {/* popup*/}
    <div id="gal6" className="popup-effect">
      <div className="popup">
        <img src="images/g4.jpg" alt="Popup Image" className="img-fluid" />
        <a className="close" href="#gallery">×</a>
      </div>
    </div>
    {/* //popup */}
  </div>
</section>

ثبت پرسش جدید

به همدیگه کمک کنیم

به ali jvn. کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام