eCommerce gallery

Bootstrap 5 eCommerce gallery plugin

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.

Show code

Activate on mouseenter

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

Show code

Zoom effect

Set the data-mdb-zoom-effect to true ad add data-mdb-image-wrapper attribute to the lightbox wrapper div to enable enlarging the main image on hover.

Show code

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.

Show code

Vertical carousel

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

Show code

Different positions

Thumbnails at the top

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

Show code

Thumnails on the right

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

Show code

Different thumbnails number

2 thumbnails

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

Show code

4 thumbnails

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

Show code

Different image sizes

Horizontal carousel

Image sizes are automatically adjusted to the view.

Show code

Vertical carousel

In a vertical carousel, it works too.

Show code

Equal image sizes

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

Show code

Related resources