eCommerce gallery

Angular Bootstrap 5 eCommerce gallery plugin

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

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

Note: eCommerce gallery plugin requires Multi item carousel. Make sure you have installed the Multi item carousel plugin.

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 key. Then in the img key add the path to the image with higher resolution. If the img key is omitted, the lightbox will display the same image as in the reduced size. 

<mdb-ecommerce-gallery>
  <div class="row">
    <div class="col-12 mb-1">
      <mdb-ecommerce-gallery-main-img></mdb-ecommerce-gallery-main-img>
    </div>
    <div class="col-4 mt-1" *ngFor="let slide of slides">
      <img
        mdbEcommerceGalleryImage
        src="{{slide.src}}"
        [img]="slide.img"
        alt="{{slide.alt}}"
        class="w-100"
      />
    </div>
  </div>
</mdb-ecommerce-gallery>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  slides = [
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
      alt: 'Table Full of Spices',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
      alt: 'Winter Landscape',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
      alt: 'View of the City in the Mountains',
    },
  ];
}

Activate on mouseenter

Activation on mouseenter can be enabled by adding a activation input with mouseenter value.

Table full of spices
Table full of spices
Winter Landscape
View of the City in the Mountains 
<mdb-ecommerce-gallery [activation]="'mouseenter'">
  <div class="row">
    <div class="col-12 mb-1">
      <mdb-ecommerce-gallery-main-img></mdb-ecommerce-gallery-main-img>
    </div>
    <div class="col-4 mt-1" *ngFor="let slide of slides">
      <img
        mdbEcommerceGalleryImage
        src="{{slide.src}}"
        [img]="slide.img"
        alt="{{slide.alt}}"
        class="w-100"
      />
    </div>
  </div>
</mdb-ecommerce-gallery>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  slides = [
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
      alt: 'Table Full of Spices',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
      alt: 'Winter Landscape',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
      alt: 'View of the City in the Mountains',
    },
  ];
}

Zoom effect

Set zoomEffect input 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 
<mdb-ecommerce-gallery>
  <div class="row">
    <div class="col-12 mb-1">
      <mdb-ecommerce-gallery-main-img [zoomEfect]="true"></mdb-ecommerce-gallery-main-img>
    </div>
    <div class="col-4 mt-1" *ngFor="let slide of slides">
      <img
        mdbEcommerceGalleryImage
        src="{{slide.src}}"
        [img]="slide.img"
        alt="{{slide.alt}}"
        class="w-100"
      />
    </div>
  </div>
</mdb-ecommerce-gallery>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  slides = [
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
      alt: 'Table Full of Spices',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
      alt: 'Winter Landscape',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
      alt: 'View of the City in the Mountains',
    },
  ];
}

Different positions

Thumbnails at the top

Easily add a 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 
<mdb-ecommerce-gallery>
  <div class="row">
    <div class="col-12">
      <mdb-multi-item-carousel [slides]="slides"></mdb-multi-item-carousel>
    </div>
    <div class="col-12 mt-1">
      <mdb-ecommerce-gallery-main-img></mdb-ecommerce-gallery-main-img>
    </div>
  </div>
</mdb-ecommerce-gallery>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  slides = [
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
      alt: 'Table Full of Spices',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
      alt: 'Winter Landscape',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
      alt: 'View of the City in the Mountains',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
      alt: 'Place Royale Bruxelles',
    },
  ];
}

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 
<mdb-ecommerce-gallery class="vertical">
  <div class="row">
    <div class="col-8">
      <mdb-ecommerce-gallery-main-img></mdb-ecommerce-gallery-main-img>
    </div>
    <div class="col-4">
      <mdb-multi-item-carousel [slides]="slides" [vertical]="true"></mdb-multi-item-carousel>
    </div>
  </div>
</mdb-ecommerce-gallery>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  slides = [
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
      alt: 'Table Full of Spices',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
      alt: 'Winter Landscape',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
      alt: 'View of the City in the Mountains',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
      alt: 'Place Royale Bruxelles',
    },
  ];
}

Different thumbnails number

2 thumbnails

Set [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 
<mdb-ecommerce-gallery>
  <div class="row">
    <div class="col-12">
      <mdb-multi-item-carousel [slides]="slides" [items]="2"></mdb-multi-item-carousel>
    </div>
    <div class="col-12 mt-1">
      <mdb-ecommerce-gallery-main-img></mdb-ecommerce-gallery-main-img>
    </div>
  </div>
</mdb-ecommerce-gallery>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  slides = [
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
      alt: 'Table Full of Spices',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
      alt: 'Winter Landscape',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
      alt: 'View of the City in the Mountains',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
      alt: 'Place Royale Bruxelles',
    },
  ];
}

4 thumbnails

Set [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 
<mdb-ecommerce-gallery class="vertical">
  <div class="row">
    <div class="col-8">
      <mdb-ecommerce-gallery-main-img></mdb-ecommerce-gallery-main-img>
    </div>
    <div class="col-4">
      <mdb-multi-item-carousel [slides]="slides" [vertical]="true" [items]="4"></mdb-multi-item-carousel>
    </div>
  </div>
</mdb-ecommerce-gallery>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  slides = [
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
      alt: 'Table Full of Spices',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
      alt: 'Winter Landscape',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
      alt: 'View of the City in the Mountains',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
      alt: 'Place Royale Bruxelles',
    },
  ];
}

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 
<mdb-ecommerce-gallery>
  <div class="row">
    <div class="col-12 mb-1">
      <mdb-ecommerce-gallery-main-img></mdb-ecommerce-gallery-main-img>
    </div>
    <div class="col-12">
      <mdb-multi-item-carousel [slides]="slides"></mdb-multi-item-carousel>
    </div>
  </div>
</mdb-ecommerce-gallery>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  slides = [
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
      alt: 'Table Full of Spices',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp',
      alt: 'Winter Landscape',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
      alt: 'View of the City in the Mountains',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp',
      alt: 'Place Royale Bruxelles',
    },
  ];
}

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 
<mdb-ecommerce-gallery class="vertical">
  <div class="row">
    <div class="col-4">
      <mdb-multi-item-carousel [slides]="slides" [vertical]="true"></mdb-multi-item-carousel>
    </div>
    <div class="col-8">
      <mdb-ecommerce-gallery-main-img></mdb-ecommerce-gallery-main-img>
    </div>
  </div>
</mdb-ecommerce-gallery>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  slides = [
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
      alt: 'Table Full of Spices',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp',
      alt: 'Winter Landscape',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
      img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
      alt: 'View of the City in the Mountains',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp',
      alt: 'Place Royale Bruxelles',
    },
  ];
}

Equal image sizes

A basic example of a gallery with images of equal sizes where autoHeight input is set to true.

White blouse
Blue Jeans Jacket
Red Sweatshirt
Black Shirt 
<mdb-ecommerce-gallery>
  <div class="row py-3 shadow-5">
    <div class="col-12 mb-1">
      <mdb-ecommerce-gallery-main-img [zoomEfect]="true" [autoHeight]="true"></mdb-ecommerce-gallery-main-img>
    </div>
    <div class="col-3 mt-1" *ngFor="let slide of slides">
      <img
        mdbEcommerceGalleryImage
        src="{{slide.src}}"
        [img]="slide.img"
        alt="{{slide.alt}}"
        class="w-100"
      />
    </div>
  </div>
</mdb-ecommerce-gallery>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  slides = [
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp',
      alt: 'Table Full of Spices',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp',
      alt: 'Winter Landscape',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp',
      alt: 'View of the City in the Mountains',
    },
    {
      src: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp',
      img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp',
      alt: 'Place Royale Bruxelles',
    },
  ];
}

eCommerce gallery - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/ecommerce-gallery

Import

import { MdbEcommerceGalleryModule } from 'mdb-angular-ecommerce-gallery';
…
@NgModule ({
  ...
  imports: [MdbEcommerceGalleryModule],
  ...
})
@import 'mdb-angular-ecommerce-gallery/scss/ecommerce-gallery.scss';

Inputs

MdbEcommerceGallery

Name Type Default Description
activation 'click' | 'mouseenter' 'click' Defines image toggle mouse event.

MdbEcommerceGalleryMainImg

Name Type Default Description
autoHeight boolean false Changes active image styling to auto height.
zoomEffect boolean false Hovering over the image enlarges it in the given place.

MdbEcommerceGalleryImage

Name Type Default Description
img string '' Defines regular image to load as main image. If not set, the value of src attribute is taken.