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

Basic example

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

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.

Activate on mouseenter

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

Zoom effect

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

Carousel example

Thumbnails can also be displayed as a multi carousel.

It is required to add the Multiple item carousel plugin for the following examples to work.

HTML


          <div class="ecommerce-gallery">
            <div class="lightbox mb-1">
              <img
                src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                alt="Gallery image 1"
                class="ecommerce-gallery-main-img active w-100"
              />
            </div>
            <div class="multi-carousel" data-mdb-breakpoint="false" data-mdb-items="3">
              <div class="multi-carousel-inner">
                <div class="multi-carousel-item active">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="active w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                    alt="Gallery image 2"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                    alt="Gallery image 3"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                    alt="Gallery image 4"
                    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

By adding the vertical class to the gallery and carousel you can achieve the following effect:

HTML


          <div class="ecommerce-gallery vertical">
            <div class="row">
              <div class="col-4 col-sm-3">
                <div class="multi-carousel vertical" data-mdb-items="3">
                  <div class="multi-carousel-inner">
                    <div class="multi-carousel-item active">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                        alt="Gallery image 1"
                        class="active w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                        alt="Gallery image 2"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                        alt="Gallery image 3"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                        alt="Gallery image 4"
                        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">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </div>
              </div>
            </div>
          </div>

Different positions

Thumnails at the top

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

HTML


          <div class="ecommerce-gallery">
            <div class="multi-carousel" data-mdb-breakpoint="false" data-mdb-items="3">
              <div class="multi-carousel-inner">
                <div class="multi-carousel-item active">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="active w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                    alt="Gallery image 2"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                    alt="Gallery image 3"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                    alt="Gallery image 4"
                    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">
              <img
                src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                alt="Gallery image 1"
                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.

HTML


          <div class="ecommerce-gallery vertical">
            <div class="row">
              <div class="col-8 col-sm-9">
                <div class="lightbox">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </div>
              </div>
              <div class="col-4 col-sm-3">
                <div class="multi-carousel vertical" data-mdb-items="3">
                  <div class="multi-carousel-inner">
                    <div class="multi-carousel-item active">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                        alt="Gallery image 1"
                        class="active w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                        alt="Gallery image 2"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                        alt="Gallery image 3"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                        alt="Gallery image 4"
                        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.

HTML


          <div class="ecommerce-gallery">
            <div class="multi-carousel" data-mdb-breakpoint="false" data-mdb-items="2">
              <div class="multi-carousel-inner">
                <div class="multi-carousel-item active">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="active w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                    alt="Gallery image 2"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                    alt="Gallery image 3"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                    alt="Gallery image 4"
                    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">
              <img
                src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                alt="Gallery image 1"
                class="ecommerce-gallery-main-img active w-100"
              />
            </div>
          </div>

4 thumbnails

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

HTML


          <div class="ecommerce-gallery vertical">
            <div class="row">
              <div class="col-8 col-sm-9">
                <div class="lightbox">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="ecommerce-gallery-main-img active w-100"
                  />
                </div>
              </div>
              <div class="col-4 col-sm-3">
                <div class="multi-carousel vertical" data-mdb-items="4">
                  <div class="multi-carousel-inner">
                    <div class="multi-carousel-item active">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                        alt="Gallery image 1"
                        class="active w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                        alt="Gallery image 2"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                        alt="Gallery image 3"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                        alt="Gallery image 4"
                        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.

HTML


          <div class="ecommerce-gallery">
            <div class="lightbox mb-1">
              <img
                src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                alt="Gallery image 1"
                class="ecommerce-gallery-main-img active w-100"
              />
            </div>
            <div class="multi-carousel" data-mdb-breakpoint="false" data-mdb-items="3">
              <div class="multi-carousel-inner">
                <div class="multi-carousel-item active">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="active w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Square/1.webp"
                    alt="Gallery image 2"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                    alt="Gallery image 3"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Vertical/1.webp"
                    alt="Gallery image 4"
                    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.

HTML


          <div class="ecommerce-gallery vertical">
            <div class="row">
              <div class="col-4 col-sm-3">
                <div class="multi-carousel vertical" data-mdb-items="3">
                  <div class="multi-carousel-inner">
                    <div class="multi-carousel-item active">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                        alt="Gallery image 1"
                        class="active w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Square/1.webp"
                        alt="Gallery image 2"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                        alt="Gallery image 3"
                        class="w-100"
                      />
                    </div>
                    <div class="multi-carousel-item">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp"
                        data-mdb-img="https://mdbootstrap.com/img/Photos/Vertical/1.webp"
                        alt="Gallery image 4"
                        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">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    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.

HTML


          <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://mdbootstrap.com/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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
                  data-mdb-img="https://mdbootstrap.com/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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
                  data-mdb-img="https://mdbootstrap.com/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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
                  data-mdb-img="https://mdbootstrap.com/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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
                  data-mdb-img="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
                  alt="Gallery image 4"
                  class="w-100"
                />
              </div>
            </div>
          </div>

eCommerce gallery - API

Usage

Via data attributes

HTML


        <div class="ecommerce-gallery" data-mdb-activation="mouseenter">
          <!-- content -->
        </div>

Via JavaScript

JavaScript


        const gallery = document.getElementById('gallery');
        const instance = EcommerceGallery.getInstance(gallery);
        instance.dispose();

Via jQuery

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

jQuery

 $('#gallery').ecommerceGallery('dispose');

Options

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)`

JavaScript


        const gallery = document.getElementById('gallery');
        const instance = EcommerceGallery.getInstance(gallery);
        instance.dispose();

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

JavaScript


        import EcommerceGallery from 'mdb-ecommerce-gallery';