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

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16017
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

ทำหน้าสินค้าค่ะ แต่ส่วนรูปสินค้าที่มีหลายๆ รูปให้แสดงแบบอัลบั้มคือ มีรูปใหญ่ และมีรูปทั้งหมดเป็นรูปเล็กอยู่ด้านข้าง ขอแนวทางการทำว่าต้องทำอย่างไรค่ะ
Selection_999(1119).png
Selection_999(1119).png (164.79 KiB) Viewed 1851 times
ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16017
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

เจอลักษณะคล้ายๆ กันของ bootstrap แต่มาปรับให้รูปเล็กอยู่ด้านข้าง ใช้แบบนี้ได้ไหมค่ะ
Selection_999(1141).png
Selection_999(1141).png (60.51 KiB) Viewed 1753 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
PHP VIP Members
PHP VIP Members
โพสต์: 16017
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย 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
Selection_999(1180).png (156.56 KiB) Viewed 1595 times
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 32