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.
Activate on mouseenter
Activation on mouseenter can be enabled by adding a
data-mdb-activation
attribute with mouseenter
value.
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.
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.
Vertical carousel
By adding the vertical
class to the gallery and carousel you can achieve the
following effect:
Different positions
Thumbnails at the top
Easily add a multi 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
Import
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.
Via JavaScript
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
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
|
String | 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)
|