eCommerce gallery

Vue Bootstrap 5 eCommerce gallery plugin

Responsive eCommerce gallery built with the latest Bootstrap 5 and Vue 3. Customize with zoom effect, carousels, different positions, and much more.

Note: Read the API tab to find all available options and advanced customization


Basic example

A basic example of a gallery with the most common use case with the bootstrap grid.

Pass MDBLightbox component's ref to integrate it with the MDBECommerceGallery component. To ensure the proper performance of the page, it is recommended to include thumbnails of images in the src attribute. Then in the data-fullscreen-src attribute add the path to the image with higher resolution. If the data-fullscreen-src attribute is omitted, the lightbox will display the same image as in the reduced size.

        
            
              <template>
                <MDBECommerceGallery :lightboxRef="lightbox1">
                  <MDBRow>
                    <MDBCol col="12" class="mb-1">
                      <MDBLightbox ref="lightbox1">
                        <MDBLightboxItem
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                          alt="Gallery image 1"
                          class="ecommerce-gallery-main-img active w-100"
                        />
                      </MDBLightbox>
                    </MDBCol>
                    <MDBCol col="4" class="my-1">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                        alt="Table full of spices"
                        class="active w-100"
                      />
                    </MDBCol>
                    <MDBCol col="4" class="my-1">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                        alt="Winter Landscape"
                        class="w-100"
                      />
                    </MDBCol>
                    <MDBCol col="4" class="my-1">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                        alt="View of the City in the Mountains"
                        class="w-100"
                      />
                    </MDBCol>
                  </MDBRow>
                </MDBECommerceGallery>
              </template>
            
        
    
        
            
              <script>
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { ref } from "vue";
                export default {
                  components: {
                    MDBRow,
                    MDBCol,
                    MDBLightbox,
                    MDBLightboxItem,
                    MDBECommerceGallery
                  },
                  setup() {
                    const lightbox1 = ref(null)
                    return {
                      lightbox1
                    };
                  }
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { ref } from "vue";

                const lightbox1 = ref()
              </script>
            
        
    

Activate on mouseenter

Activation on mouseenter can be enabled by adding a activation="mouseenter" property.

        
            
              <template>
                <MDBECommerceGallery :lightboxRef="lightbox3" activation="mouseenter">
                  <MDBRow>
                    <MDBCol col="12" class="mb-1">
                      <MDBLightbox ref="lightbox3">
                        <MDBLightboxItem
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                          alt="Gallery image 1"
                          class="ecommerce-gallery-main-img active w-100"
                        />
                      </MDBLightbox>
                    </MDBCol>
                    <MDBCol col="4" class="my-1">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                        alt="Table full of spices"
                        class="active w-100"
                      />
                    </MDBCol>
                    <MDBCol col="4" class="my-1">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                        alt="Winter Landscape"
                        class="w-100"
                      />
                    </MDBCol>
                    <MDBCol col="4" class="my-1">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                        alt="View of the City in the Mountains"
                        class="w-100"
                      />
                    </MDBCol>
                  </MDBRow>
                </MDBECommerceGallery>
              </template>
            
        
    
        
            
              <script>
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { ref } from "vue";
                export default {
                  components: {
                    MDBRow,
                    MDBCol,
                    MDBLightbox,
                    MDBLightboxItem,
                    MDBECommerceGallery
                  },
                  setup() {
                    const lightbox3 = ref(null)
                    return {
                      lightbox3
                    };
                  }
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { ref } from "vue";

                const lightbox3 = ref()
              </script>
            
        
    

Zoom effect

Add zoomEffect property to enable enlarging the main image on hover.

        
            
              <template>
                <MDBECommerceGallery :lightboxRef="lightbox3" zoomEffect>
                  <MDBRow>
                    <MDBCol col="12" class="mb-1">
                      <MDBLightbox ref="lightbox3">
                        <MDBLightboxItem
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                          alt="Gallery image 1"
                          class="ecommerce-gallery-main-img active w-100"
                        />
                      </MDBLightbox>
                    </MDBCol>
                    <MDBCol col="4" class="my-1">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                        alt="Table full of spices"
                        class="active w-100"
                      />
                    </MDBCol>
                    <MDBCol col="4" class="my-1">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                        alt="Winter Landscape"
                        class="w-100"
                      />
                    </MDBCol>
                    <MDBCol col="4" class="my-1">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                        alt="View of the City in the Mountains"
                        class="w-100"
                      />
                    </MDBCol>
                  </MDBRow>
                </MDBECommerceGallery>
              </template>
            
        
    
        
            
              <script>
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { ref } from "vue";
                export default {
                  components: {
                    MDBRow,
                    MDBCol,
                    MDBLightbox,
                    MDBLightboxItem,
                    MDBECommerceGallery
                  },
                  setup() {
                    const lightbox3 = ref()
                    return {
                      lightbox3
                    };
                  }
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { ref } from "vue";

                const lightbox3 = ref(null)
              </script>
            
        
    



Different positions

Thumnails at the top

Easily add a carousel before the main image to view thumbnails above it.

        
            
              <template>
                <MDBECommerceGallery
                  :lightboxRef="lightbox6"
                  :carouselRef="carousel3"
                >
                  <MDBMultiCarousel :items="3" ref="carousel3">
                    <img
                      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                      data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                      alt="Gallery image 1"
                      class="active w-100"
                    />
                    <img
                      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                      data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                      alt="Gallery image 2"
                      class="w-100"
                    />
                    <img
                      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                      data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                      alt="Gallery image 3"
                      class="w-100"
                    />
                    <img
                      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                      data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                      alt="Gallery image 4"
                      class="w-100"
                    />
                  </MDBMultiCarousel>
                  <MDBLightbox ref="lightbox6" class="mt-1">
                    <MDBLightboxItem
                      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                      fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                      alt="Gallery image 1"
                      class="ecommerce-gallery-main-img active w-100"
                    />
                  </MDBLightbox>
                </MDBECommerceGallery>
              </template>
            
        
    
        
            
              <script>
                import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
                import { ref } from "vue";
                export default {
                  components: {
                    MDBLightbox,
                    MDBLightboxItem,
                    MDBECommerceGallery,
                    MDBMultiCarousel
                  },
                  setup() {
                    const lightbox6 = ref(null)
                    const carousel3 = ref(null)
                    return {
                      lightbox6,
                      carousel3
                    }
                  }
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
                import { ref } from "vue";

                const lightbox6 = ref()
                const carousel3 = ref()
              </script>
            
        
    

Thumnails on the right

Add the carousel in the second column to display thumbnails on the right.

        
            
              <template>
                <MDBECommerceGallery
                  :lightboxRef="lightbox7"
                  :carouselRef="carousel4"
                  vertical
                >
                  <MDBRow>
                    <MDBCol col="8" sm="9">
                      <MDBLightbox ref="lightbox7" class="mb-1">
                        <MDBLightboxItem
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                          alt="Gallery image 1"
                          class="ecommerce-gallery-main-img active w-100"
                        />
                      </MDBLightbox>
                    </MDBCol>
                    <MDBCol col="4" sm="3">
                      <MDBMultiCarousel vertical :items="3" ref="carousel4">
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                          alt="Gallery image 1"
                          class="active w-100"
                        />
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                          alt="Gallery image 2"
                          class="w-100"
                        />
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                          alt="Gallery image 3"
                          class="w-100"
                        />
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                          alt="Gallery image 4"
                          class="w-100"
                        />
                      </MDBMultiCarousel>
                    </MDBCol>
                  </MDBRow>
                </MDBECommerceGallery>
              </template>
            
        
    
        
            
              <script>
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
                import { ref } from "vue";
                export default {
                  components: {
                    MDBRow,
                    MDBCol,
                    MDBLightbox,
                    MDBLightboxItem,
                    MDBECommerceGallery,
                    MDBMultiCarousel
                  },
                  setup() {
                    const lightbox7 = ref(null)
                    const carousel4 = ref(null)
                    return {
                      lightbox7,
                      carousel4
                    }
                  }
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
                import { ref } from "vue";

                const lightbox7 = ref()
                const carousel4 = ref()
              </script>
            
        
    

Different thumbnails number

2 thumbnails

Set :items="2" on the carousel to make two thumbnails visible.

        
            
            <template>
              <MDBECommerceGallery
                :lightboxRef="lightbox8"
                :carouselRef="carousel5"
              >
                <MDBMultiCarousel :items="2" ref="carousel5">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                    data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="active w-100"
                  />
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                    data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                    alt="Gallery image 2"
                    class="w-100"
                  />
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                    data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                    alt="Gallery image 3"
                    class="w-100"
                  />
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                    data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                    alt="Gallery image 4"
                    class="w-100"
                  />
                </MDBMultiCarousel>
                <MDBLightbox ref="lightbox8" class="mb-1">
                  <MDBLightboxItem
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                    fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </MDBLightbox>
              </MDBECommerceGallery>
            </template>
          
        
    
        
            
            <script>
              import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
              import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
              import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
              import { ref } from "vue";
              export default {
                components: {
                  MDBLightbox,
                  MDBLightboxItem,
                  MDBECommerceGallery,
                  MDBMultiCarousel
                },
                setup() {
                  const lightbox8 = ref(null)
                  const carousel5 = ref(null)
                  return {
                    lightbox8,
                    carousel5
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
              import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
              import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
              import { ref } from "vue";

              const lightbox8 = ref()
              const carousel5 = ref()
            </script>
          
        
    

4 thumbnails

Set :items="4" on the carousel to make four thumbnails visible.

        
            
              <template>
                <MDBECommerceGallery
                  :lightboxRef="lightbox9"
                  :carouselRef="carousel6"
                  vertical
                >
                  <MDBRow>
                    <MDBCol col="8" sm="9">
                      <MDBLightbox ref="lightbox9" class="mb-1">
                        <MDBLightboxItem
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                          alt="Gallery image 1"
                          class="ecommerce-gallery-main-img active w-100"
                        />
                      </MDBLightbox>
                    </MDBCol>
                    <MDBCol col="4" sm="3">
                      <MDBMultiCarousel vertical :items="4" ref="carousel6">
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                          alt="Gallery image 1"
                          class="active w-100"
                        />
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                          alt="Gallery image 2"
                          class="w-100"
                        />
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                          alt="Gallery image 3"
                          class="w-100"
                        />
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                          alt="Gallery image 4"
                          class="w-100"
                        />
                      </MDBMultiCarousel>
                    </MDBCol>
                  </MDBRow>
                </MDBECommerceGallery>
              </template>
            
        
    
        
            
              <script>
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
                import { ref } from "vue";
                export default {
                  components: {
                    MDBRow,
                    MDBCol,
                    MDBLightbox,
                    MDBLightboxItem,
                    MDBECommerceGallery,
                    MDBMultiCarousel
                  },
                  setup() {
                    const lightbox9 = ref(null)
                    const carousel6 = ref(null)
                    return {
                      lightbox9,
                      carousel6
                    }
                  }
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
                import { ref } from "vue";

                const lightbox9 = ref()
                const carousel6 = ref()
              </script>
            
        
    

Different image sizes

Horizontal carousel

Image sizes are automatically adjusted to the view.

        
            
            <template>
              <MDBECommerceGallery
                :lightboxRef="lightbox10"
                :carouselRef="carousel7"
              >
                <MDBLightbox ref="lightbox10" class="mb-1">
                  <MDBLightboxItem
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                    fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </MDBLightbox>
                <MDBMultiCarousel :items="3" ref="carousel7">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                    data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="active w-100"
                  />
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp"
                    data-fullscreen-src="https://mdbootstrap.com/img/Photos/Square/1.webp"
                    alt="Gallery image 2"
                    class="w-100"
                  />
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                    data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                    alt="Gallery image 3"
                    class="w-100"
                  />
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp"
                    data-fullscreen-src="https://mdbootstrap.com/img/Photos/Vertical/1.webp"
                    alt="Gallery image 4"
                    class="w-100"
                  />
                </MDBMultiCarousel>
              </MDBECommerceGallery>
            </template>
          
        
    
        
            
            <script>
              import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
              import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
              import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
              import { ref } from "vue";
              export default {
                components: {
                  MDBLightbox,
                  MDBLightboxItem,
                  MDBECommerceGallery,
                  MDBMultiCarousel
                },
                setup() {
                  const lightbox10 = ref(null)
                  const carousel7 = ref(null)
                  return {
                    lightbox10,
                    carousel7
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
              import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
              import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
              import { ref } from "vue";
           
              const lightbox10 = ref()
              const carousel7 = ref()
            </script>
          
        
    

Vertical carousel

In a vertical carousel, it works too.

        
            
              <template>
                <MDBECommerceGallery
                  :lightboxRef="lightbox11"
                  :carouselRef="carousel8"
                  vertical
                >
                  <MDBRow>
                    <MDBCol col="4" sm="3">
                      <MDBMultiCarousel vertical :items="3" ref="carousel8">
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                          alt="Gallery image 1"
                          class="active w-100"
                        />
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Square/1.webp"
                          alt="Gallery image 2"
                          class="w-100"
                        />
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                          alt="Gallery image 3"
                          class="w-100"
                        />
                        <img
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp"
                          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Vertical/1.webp"
                          alt="Gallery image 4"
                          class="w-100"
                        />
                      </MDBMultiCarousel>
                    </MDBCol>
                    <MDBCol col="8" sm="9">
                      <MDBLightbox ref="lightbox11" class="mb-1">
                        <MDBLightboxItem
                          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                          alt="Gallery image 1"
                          class="ecommerce-gallery-main-img active w-100"
                        />
                      </MDBLightbox>
                    </MDBCol>
                  </MDBRow>
                </MDBECommerceGallery>
              </template>
            
        
    
        
            
              <script>
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
                import { ref } from "vue";
                export default {
                  components: {
                    MDBRow,
                    MDBCol,
                    MDBLightbox,
                    MDBLightboxItem,
                    MDBECommerceGallery,
                    MDBMultiCarousel
                  },
                  setup() {
                    const lightbox11 = ref(null)
                    const carousel8 = ref(null)
                    return {
                      lightbox11,
                      carousel8
                    }
                  }
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
                import { ref } from "vue";

                const lightbox11 = ref()
                const carousel8 = ref()
              </script>
            
        
    

Equal image sizes

A basic example of a gallery with images of equal sizes where autoHeight property is added.

        
            
              <template>
                <MDBRow>
                  <MDBCol col="6">
                    <MDBECommerceGallery
                      :lightboxRef="lightbox12"
                      zoomEffect
                      autoHeight
                    >
                      <MDBRow class="py-3 shadow-5">
                        <MDBCol col="12" class="mb-1">
                          <MDBLightbox ref="lightbox12">
                            <MDBLightboxItem
                              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
                              alt="Gallery image 1"
                              class="ecommerce-gallery-main-img active w-100"
                            />
                          </MDBLightbox>
                        </MDBCol>
                        <MDBCol class="mt-1">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
                            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
                            alt="Gallery image 1"
                            class="active w-100"
                          />
                        </MDBCol>
                        <MDBCol class="mt-1">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
                            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
                            alt="Gallery image 2"
                            class="w-100"
                          />
                        </MDBCol>
                        <MDBCol class="mt-1">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
                            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
                            alt="Gallery image 3"
                            class="w-100"
                          />
                        </MDBCol>
                        <MDBCol class="mt-1">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
                            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
                            alt="Gallery image 4"
                            class="w-100"
                          />
                        </MDBCol>
                      </MDBRow>
                    </MDBECommerceGallery>
                  </MDBCol>
                </MDBRow>
              </template>
            
        
    
        
            
              <script>
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { ref } from "vue";
                export default {
                  components: {
                    MDBRow,
                    MDBCol,
                    MDBLightbox,
                    MDBLightboxItem,
                    MDBECommerceGallery
                  },
                  setup() {
                    const lightbox12 = ref(null)
                    return {
                      lightbox12
                    }
                  }
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
                import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
                import { ref } from "vue";

                const lightbox12 = ref()
              </script>
            
        
    

eCommerce gallery - API


Import

        
            
          <script>
            import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
          </script>
        
        
    

Properties

Name Type Default Description
activation String 'click Defines image toggle mouse event.
autoHeight Boolean false Changes active image styling to auto height.
carouselRef Object - Defines MultiCarousel component ref element
lightboxRef Object - Defines Lightbox component ref element
tag String 'div' Defines component wrapper tag
vertical Boolean false Enables vertical styles for component
zoomEffect Boolean false Hovering over the image enlarges it in the given place.