eCommerce gallery MDB Pro component

Bootstrap 5 eCommerce gallery plugin

MDB gallery / lightbox component designed for eCommerce projects.

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.




Different positions

Thumnails at the top

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

Thumnails on the right

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


Different thumbnails number

2 thumbnails

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

4 thumbnails

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


Different image sizes

Horizontal carousel

Image sizes are automatically adjusted to the view.

Vertical carousel

In a vertical carousel, it works too.


Equal image sizes

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

eCommerce gallery - API


Usage

Via data attributes


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

Via 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.

 $('#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)

        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:


        import { EcommerceGallery } from 'mdb-ecommerce-gallery';