สอบถามการแสดงภาพอัลบั้มรูปภาพใช้แสดงสินค้า

[eange08]

ทำหน้าสินค้าค่ะ แต่ส่วนรูปสินค้าที่มีหลายๆ รูปให้แสดงแบบอัลบั้มคือ มีรูปใหญ่ และมีรูปทั้งหมดเป็นรูปเล็กอยู่ด้านข้าง ขอแนวทางการทำว่าต้องทำอย่างไรค่ะ

Selection_999(1119).png (164.79 KiB) Viewed 508 times

[eange08]

เจอลักษณะคล้ายๆ กันของ bootstrap แต่มาปรับให้รูปเล็กอยู่ด้านข้าง ใช้แบบนี้ได้ไหมค่ะ

Selection_999(1141).png (60.51 KiB) Viewed 410 times

https://mdbootstrap.com/docs/standard/e ... ce-gallery

โค้ด

โค้ด: เลือกทั้งหมด

<div class="ecommerce-gallery" data-mdb-zoom-effect="true" data-mdb-auto-height="true">
  <div class="row py-3 shadow-5">
    <div class="col-12 mb-1">
      <div class="lightbox">
        <img
          src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
          alt="Gallery image 1"
          class="ecommerce-gallery-main-img active w-100"
        />
      </div>
    </div>
    <div class="col-3 mt-1">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
        alt="Gallery image 1"
        class="active w-100"
      />
    </div>
    <div class="col-3 mt-1">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
        alt="Gallery image 2"
        class="w-100"
      />
    </div>
    <div class="col-3 mt-1">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
        alt="Gallery image 3"
        class="w-100"
      />
    </div>
    <div class="col-3 mt-1">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
        alt="Gallery image 4"
        class="w-100"
      />
    </div>
  </div>
</div>

[eange08]

ทำได้แล้วนะคะ ปรับให้รูปเล็กอยู่้ด้านข้าง และกดเปลี่ยนแสดงภาพได้
ส่วน HTML ส่วน css ใช้ของ Bootstrap

โค้ด: เลือกทั้งหมด

    
      <div class="ecommerce-gallery vertical">
        <div class="row">
          <div class="col-2 col-sm-2">
            <div class="multi-carousel vertical" data-mdb-items="3">
              <div class="multi-carousel-inner">
                <div class="multi-carousel-item active" style="display: flex;">
                  <img src="../ex-gallery/img_main.svg" data-mdb-img="../ex-gallery/img_main.svg" alt="Table full of spices" class="active w-100">
                </div>
                <div class="multi-carousel-item" style="display: flex;">
                  <img src="../ex-gallery/img_2.svg" data-mdb-img="../ex-gallery/img_2.svg" alt="Winter Landscape" class="w-100">
                </div>
                <div class="multi-carousel-item" style="display: flex;">
                  <img src="../ex-gallery/img_3.svg" data-mdb-img="../ex-gallery/img_3.svg" alt="View of the City in the Mountains" class="w-100">
                </div>
                <div class="multi-carousel-item" style="display: flex;">
                  <img src="../ex-gallery/img_4.svg" data-mdb-img="../ex-gallery/img_4.svg" alt="Place Royale Bruxelles" class="w-100">
                </div>
              </div>
             
            </div>
          </div>
          <div class="col-8 col-sm-9">
            <div class="lightbox showimg-gallery"><img src="../ex-gallery/img_main.svg" alt="Table full of spices" class="ecommerce-gallery-main-img w-100 active"></div>
          </div>
        </div>
      </div>

jQuery ใช้เปลี่ยนรูป

โค้ด: เลือกทั้งหมด

$(".multi-carousel-item").click(function(){       
        var url_img = $(this).find('img').attr('data-mdb-img');
        $('.showimg-gallery img').attr('src',url_img);
      
   });

ผลลัพท์

Selection_999(1180).png (156.56 KiB) Viewed 252 times