eCommerce gallery

Bootstrap 5 eCommerce gallery plugin

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

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

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

A basic example of a gallery with the most common use case with the bootstrap grid and activation on click.

To ensure the proper performance of the page, it is recommended to include thumbnails of images in the src attribute. Then in the data-mdb-img attribute add the path to the image with higher resolution. If the data-mdb-img attribute is omitted, the lightbox will display the same image as in the reduced size.

Edit in sandbox 
        
            
          <div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init>
            <div class="row">
              <div class="col-12 mb-1">
                <div class="lightbox" data-mdb-lightbox-init>
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                    alt="Table Full of Spices"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </div>
              </div>
              <div class="col-4 my-1">
                <img
                  src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                  alt="Table full of spices"
                  class="active w-100"
                />
              </div>
              <div class="col-4 my-1">
                <img
                  src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
                  alt="Winter Landscape"
                  class="w-100"
                />
              </div>
              <div class="col-4 my-1">
                <img
                  src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
                  alt="View of the City in the Mountains"
                  class="w-100"
                />
              </div>
            </div>
          </div>

Activate on mouseenter

Activation on mouseenter can be enabled by adding a data-mdb-activation attribute with mouseenter value.

Table full of spices
Table full of spices
Winter Landscape
View of the City in the Mountains
Edit in sandbox 
        
            
          <div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init data-mdb-activation="mouseenter">
            <div class="row">
              <div class="col-12 mb-1">
                <div class="lightbox" data-mdb-lightbox-init>
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                    alt="Table full of spices"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </div>
              </div>
              <div class="col-4 my-1">
                <img
                  src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                  alt="Table full of spices"
                  class="active w-100"
                />
              </div>
              <div class="col-4 my-1">
                <img
                  src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
                  alt="Winter Landscape"
                  class="w-100"
                />
              </div>
              <div class="col-4 my-1">
                <img
                  src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
                  alt="View of the City in the Mountains"
                  class="w-100"
                />
              </div>
            </div>
          </div>

Zoom effect

Set data-mdb-zoom-effect to true to enable enlarging the main image on hover.

Table full of spices
Table full of spices
Winter Landscape
View of the City in the Mountains
Edit in sandbox 
        
            
          <div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init data-mdb-zoom-effect="true">
            <div class="row">
              <div class="col-12 mb-1">
                <div class="lightbox" data-mdb-lightbox-init>
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                    alt="Table full of spices"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </div>
              </div>
              <div class="col-4 my-1">
                <img
                  src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                  alt="Table full of spices"
                  class="active w-100"
                />
              </div>
              <div class="col-4 my-1">
                <img
                  src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
                  alt="Winter Landscape"
                  class="w-100"
                />
              </div>
              <div class="col-4 my-1">
                <img
                  src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
                  alt="View of the City in the Mountains"
                  class="w-100"
                />
              </div>
            </div>
          </div>

Different positions

Thumbnails at the top

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

Table full of spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles
Table full of spices
Edit in sandbox 
        
            
          <div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init>
            <div class="multi-carousel" data-mdb-multi-carousel-init data-mdb-breakpoint="false" data-mdb-items="3">
              <div class="multi-carousel-inner">
                <div class="multi-carousel-item active">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                    alt="Table full of spices"
                    class="active w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
                    alt="Winter Landscape"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
                    alt="View of the City in the Mountains"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
                    alt="Place Royale Bruxelles"
                    class="w-100"
                  />
                </div>
              </div>
              <button
                class="carousel-control-prev"
                tabindex="0"
                type="button"
                data-mdb-slide="prev"
              >
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              </button>
              <button
                class="carousel-control-next"
                tabindex="0"
                type="button"
                data-mdb-slide="next"
              >
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
              </button>
            </div>
            <div class="lightbox mt-1" data-mdb-lightbox-init>
              <img
                src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                alt="Table full of spices"
                class="ecommerce-gallery-main-img active w-100"
              />
            </div>
          </div>

Thumnails on the right

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

Table full of spices
Table full of spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles
Edit in sandbox 
        
            
          <div class="ecommerce-gallery vertical" data-mdb-ecommerce-gallery-init>
            <div class="row">
              <div class="col-8 col-sm-9">
                <div class="lightbox" data-mdb-lightbox-init>
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                    alt="Table full of spices"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </div>
              </div>
              <div class="col-4 col-sm-3">
                <div class="multi-carousel vertical" data-mdb-multi-carousel-init data-mdb-items="3">
                  <div class="multi-carousel-inner">
                    <div class="multi-carousel-item active">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                        alt="Table full of spices"
                        class="active w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
                        alt="Winter Landscape"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
                        alt="View of the City in the Mountains"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
                        alt="Place Royale Bruxelles"
                        class="w-100"
                      />
                    </div>
                  </div>
                  <button
                    class="carousel-control-prev"
                    tabindex="0"
                    type="button"
                    data-mdb-slide="prev"
                  >
                    <span
                      class="carousel-control-prev-icon"
                      aria-hidden="true"
                    ></span>
                  </button>
                  <button
                    class="carousel-control-next"
                    tabindex="0"
                    type="button"
                    data-mdb-slide="next"
                  >
                    <span
                      class="carousel-control-next-icon"
                      aria-hidden="true"
                    ></span>
                  </button>
                </div>
              </div>
            </div>
          </div>

Different thumbnails number

2 thumbnails

Set data-mdb-items="2" to make two thumbnails visible.

Table full of spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles
Table full of spices
Edit in sandbox 
        
            
          <div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init>
            <div class="multi-carousel" data-mdb-multi-carousel-init data-mdb-breakpoint="false" data-mdb-items="2">
              <div class="multi-carousel-inner">
                <div class="multi-carousel-item active">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                    alt="Table full of spices"
                    class="active w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
                    alt="Winter Landscape"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
                    alt="View of the City in the Mountains"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
                    alt="Place Royale Bruxelles"
                    class="w-100"
                  />
                </div>
              </div>
              <button
                class="carousel-control-prev"
                tabindex="0"
                type="button"
                data-mdb-slide="prev"
              >
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              </button>
              <button
                class="carousel-control-next"
                tabindex="0"
                type="button"
                data-mdb-slide="next"
              >
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
              </button>
            </div>
            <div class="lightbox mt-1" data-mdb-lightbox-init>
              <img
                src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                alt="Table full of spices"
                class="ecommerce-gallery-main-img active w-100"
              />
            </div>
          </div>

4 thumbnails

Set data-mdb-items="4" to make four thumbnails visible.

Table full of spices
Table full of spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles
Edit in sandbox 
        
            
          <div class="ecommerce-gallery vertical" data-mdb-ecommerce-gallery-init>
            <div class="row">
              <div class="col-8 col-sm-9">
                <div class="lightbox" data-mdb-lightbox-init>
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                    alt="Table full of spices"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </div>
              </div>
              <div class="col-4 col-sm-3">
                <div class="multi-carousel vertical" data-mdb-multi-carousel-init data-mdb-items="4">
                  <div class="multi-carousel-inner">
                    <div class="multi-carousel-item active">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                        alt="Table full of spices"
                        class="active w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
                        alt="Winter Landscape"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
                        alt="View of the City in the Mountains"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
                        alt="Place Royale Bruxelles"
                        class="w-100"
                      />
                    </div>
                  </div>
                  <button
                    class="carousel-control-prev"
                    tabindex="0"
                    type="button"
                    data-mdb-slide="prev"
                  >
                    <span
                      class="carousel-control-prev-icon"
                      aria-hidden="true"
                    ></span>
                  </button>
                  <button
                    class="carousel-control-next"
                    tabindex="0"
                    type="button"
                    data-mdb-slide="next"
                  >
                    <span
                      class="carousel-control-next-icon"
                      aria-hidden="true"
                    ></span>
                  </button>
                </div>
              </div>
            </div>
          </div>

Different image sizes

Horizontal carousel

Image sizes are automatically adjusted to the view.

Table full of spices
Table full of spices
Coconut with Strawberries
Place Royale Bruxelles
Dark Roast Iced Coffee
Edit in sandbox 
        
            
          <div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init>
            <div class="lightbox mb-1" data-mdb-lightbox-init>
              <img
                src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                alt="Table full of spices"
                class="ecommerce-gallery-main-img active w-100"
              />
            </div>
            <div class="multi-carousel" data-mdb-multi-carousel-init data-mdb-breakpoint="false" data-mdb-items="3">
              <div class="multi-carousel-inner">
                <div class="multi-carousel-item active">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                    alt="Table full of spices"
                    class="active w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp"
                    alt="Coconut with Strawberries"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
                    alt="Place Royale Bruxelles"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp"
                    data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp"
                    alt="Dark Roast Iced Coffee"
                    class="w-100"
                  />
                </div>
              </div>
              <button
                class="carousel-control-prev"
                tabindex="0"
                type="button"
                data-mdb-slide="prev"
              >
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              </button>
              <button
                class="carousel-control-next"
                tabindex="0"
                type="button"
                data-mdb-slide="next"
              >
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
              </button>
            </div>
          </div>

Vertical carousel

In a vertical carousel, it works too.

Table full of spices
Coconut with Strawberries
Place Royale Bruxelles
Dark Roast Iced Coffee
Table full of spices
Edit in sandbox 
        
            
          <div class="ecommerce-gallery vertical" data-mdb-ecommerce-gallery-init>
            <div class="row">
              <div class="col-4 col-sm-3">
                <div class="multi-carousel vertical" data-mdb-multi-carousel-init data-mdb-items="3">
                  <div class="multi-carousel-inner">
                    <div class="multi-carousel-item active">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                        alt="Table full of spices"
                        class="active w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp"
                        alt="Coconut with Strawberries"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
                        alt="Place Royale Bruxelles"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp"
                        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp"
                        alt="Dark Roast Iced Coffee"
                        class="w-100"
                      />
                    </div>
                  </div>
                  <button
                    class="carousel-control-prev"
                    tabindex="0"
                    type="button"
                    data-mdb-slide="prev"
                  >
                    <span
                      class="carousel-control-prev-icon"
                      aria-hidden="true"
                    ></span>
                  </button>
                  <button
                    class="carousel-control-next"
                    tabindex="0"
                    type="button"
                    data-mdb-slide="next"
                  >
                    <span
                      class="carousel-control-next-icon"
                      aria-hidden="true"
                    ></span>
                  </button>
                </div>
              </div>
              <div class="col-8 col-sm-9">
                <div class="lightbox" data-mdb-lightbox-init>
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
                    alt="Table full of spices"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </div>
              </div>
            </div>
          </div>

Equal image sizes

A basic example of a gallery with images of equal sizes where data-mdb-auto-height attribute is set to true.

White blouse
Blue Jeans Jacket
Red Sweatshirt
Black Shirt
Edit in sandbox 
        
            
          <div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init 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" data-mdb-lightbox-init>
                  <img
                    src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
                    alt="White blouse"
                    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="White blouse"
                  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="Blue Jeans Jacket"
                  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="Red Sweatshirt"
                  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="Black Shirt"
                  class="w-100"
                />
              </div>
            </div>
          </div>

eCommerce gallery - API

Import

Edit in sandbox 
        
            
          import EcommerceGallery from 'mdb-ecommerce-gallery';
        
        
    
        
            
          @import '~mdb-ecommerce-gallery/css/ecommerce-gallery.min.css';

Usage

Via data attributes

Using the eCommerce gallery plugin doesn't require any additional JavaScript code - simply add data-mdb-ecommerce-gallery-init attribute to .ecommerce-gallery and use other data attributes to set all options.

Edit in sandbox 
        
            
        <div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init>
          <!-- content -->
        </div>

Via JavaScript

Edit in sandbox 
        
            
        const element = document.querySelector('.ecommerce-gallery');
        const instance = new EcommerceGallery(element);
        instance.dispose();

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
        
            
        $(document).ready(() => { 
          $('#gallery').ecommerceGallery('dispose');
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-activation="".

Name Type Default Description
activation String 'click' Defines image toggle mouse event.
autoHeight Boolean false Changes active image styling to auto height.
zoomEffect Boolean false Hovering over the image enlarges it in the given place.

Methods

Name Parameters Description Example
init Initializes EcommerceGallery. instance.init()
dispose Removes the EcommerceGallery instance. instance.dispose()
getInstance element Static method which allows to get the gallery instance associated with a DOM element. EcommerceGallery.getInstance(element)
Edit in sandbox 
        
            
        const gallery = document.getElementById('gallery');
        const instance = EcommerceGallery.getInstance(gallery);
        instance.dispose();