eCommerce gallery
Vue Bootstrap 5 eCommerce gallery plugin
Responsive eCommerce gallery built with the latest Bootstrap 5 and Vue 3. 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.
Pass MDBLightbox component's ref to integrate it with the
MDBECommerceGallery component. To ensure the proper
performance of the page, it is recommended to include thumbnails of
images in the src attribute. Then in the
data-fullscreen-src attribute add the path to the image
with higher resolution. If the
data-fullscreen-src attribute is omitted, the lightbox
will display the same image as in the reduced size.
<template>
<MDBECommerceGallery :lightboxRef="lightbox1">
<MDBRow>
<MDBCol col="12" class="mb-1">
<MDBLightbox ref="lightbox1">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
</MDBCol>
<MDBCol col="4" class="my-1">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</MDBCol>
<MDBCol col="4" class="my-1">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</MDBCol>
<MDBCol col="4" class="my-1">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</MDBCol>
</MDBRow>
</MDBECommerceGallery>
</template>
<script>
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { ref } from "vue";
export default {
components: {
MDBRow,
MDBCol,
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery
},
setup() {
const lightbox1 = ref(null)
return {
lightbox1
};
}
};
</script>
<script setup lang="ts">
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { ref } from "vue";
const lightbox1 = ref()
</script>
Activate on mouseenter
Activation on mouseenter can be enabled by adding a
activation="mouseenter" property.
<template>
<MDBECommerceGallery :lightboxRef="lightbox3" activation="mouseenter">
<MDBRow>
<MDBCol col="12" class="mb-1">
<MDBLightbox ref="lightbox3">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
</MDBCol>
<MDBCol col="4" class="my-1">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</MDBCol>
<MDBCol col="4" class="my-1">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</MDBCol>
<MDBCol col="4" class="my-1">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</MDBCol>
</MDBRow>
</MDBECommerceGallery>
</template>
<script>
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { ref } from "vue";
export default {
components: {
MDBRow,
MDBCol,
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery
},
setup() {
const lightbox3 = ref(null)
return {
lightbox3
};
}
};
</script>
<script setup lang="ts">
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { ref } from "vue";
const lightbox3 = ref()
</script>
Zoom effect
Add zoomEffect property to enable enlarging the main
image on hover.
<template>
<MDBECommerceGallery :lightboxRef="lightbox3" zoomEffect>
<MDBRow>
<MDBCol col="12" class="mb-1">
<MDBLightbox ref="lightbox3">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
</MDBCol>
<MDBCol col="4" class="my-1">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</MDBCol>
<MDBCol col="4" class="my-1">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</MDBCol>
<MDBCol col="4" class="my-1">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</MDBCol>
</MDBRow>
</MDBECommerceGallery>
</template>
<script>
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { ref } from "vue";
export default {
components: {
MDBRow,
MDBCol,
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery
},
setup() {
const lightbox3 = ref()
return {
lightbox3
};
}
};
</script>
<script setup lang="ts">
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { ref } from "vue";
const lightbox3 = ref(null)
</script>
Carousel example
Thumbnails can also be displayed as a multi carousel.
It is required to add the
Multiple item carousel plugin
and pass it's ref to the MDBECommerceGallery for the
following examples to work.
<template>
<MDBECommerceGallery
:lightboxRef="lightbox4"
:carouselRef="carousel1"
>
<MDBLightbox ref="lightbox4" class="mb-1">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
<MDBMultiCarousel :items="3" ref="carousel1">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="active w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Gallery image 2"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Gallery image 3"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
alt="Gallery image 4"
class="w-100"
/>
</MDBMultiCarousel>
</MDBECommerceGallery>
</template>
<script>
import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
export default {
components: {
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery,
MDBMultiCarousel
},
setup() {
const lightbox4 = ref(null)
const carousel1 = ref(null)
return {
lightbox4,
carousel1
};
}
};
</script>
<script setup lang="ts">
import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
const lightbox4 = ref()
const carousel1 = ref()
</script>
Vertical carousel
By adding the vertical property to the gallery and
carousel you can achieve the following effect:
<template>
<MDBECommerceGallery
:lightboxRef="lightbox5"
:carouselRef="carousel2"
vertical
>
<MDBRow>
<MDBCol col="4" sm="3">
<MDBMultiCarousel vertical :items="3" ref="carousel2">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="active w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Gallery image 2"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Gallery image 3"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
alt="Gallery image 4"
class="w-100"
/>
</MDBMultiCarousel>
</MDBCol>
<MDBCol col="8" sm="9">
<MDBLightbox ref="lightbox5" class="mb-1">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
</MDBCol>
</MDBRow>
</MDBECommerceGallery>
</template>
<script>
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
export default {
components: {
MDBRow,
MDBCol,
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery,
MDBMultiCarousel
},
setup() {
const lightbox5 = ref(null)
const carousel2 = ref(null)
return {
lightbox5,
carousel2
}
}
};
</script>
<script setup lang="ts">
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
const lightbox5 = ref()
const carousel2 = ref()
</script>
Different positions
Thumnails at the top
Easily add a carousel before the main image to view thumbnails above it.
<template>
<MDBECommerceGallery
:lightboxRef="lightbox6"
:carouselRef="carousel3"
>
<MDBMultiCarousel :items="3" ref="carousel3">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="active w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Gallery image 2"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Gallery image 3"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
alt="Gallery image 4"
class="w-100"
/>
</MDBMultiCarousel>
<MDBLightbox ref="lightbox6" class="mt-1">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
</MDBECommerceGallery>
</template>
<script>
import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
export default {
components: {
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery,
MDBMultiCarousel
},
setup() {
const lightbox6 = ref(null)
const carousel3 = ref(null)
return {
lightbox6,
carousel3
}
}
};
</script>
<script setup lang="ts">
import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
const lightbox6 = ref()
const carousel3 = ref()
</script>
Thumnails on the right
Add the carousel in the second column to display thumbnails on the right.
<template>
<MDBECommerceGallery
:lightboxRef="lightbox7"
:carouselRef="carousel4"
vertical
>
<MDBRow>
<MDBCol col="8" sm="9">
<MDBLightbox ref="lightbox7" class="mb-1">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
</MDBCol>
<MDBCol col="4" sm="3">
<MDBMultiCarousel vertical :items="3" ref="carousel4">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="active w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Gallery image 2"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Gallery image 3"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
alt="Gallery image 4"
class="w-100"
/>
</MDBMultiCarousel>
</MDBCol>
</MDBRow>
</MDBECommerceGallery>
</template>
<script>
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
export default {
components: {
MDBRow,
MDBCol,
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery,
MDBMultiCarousel
},
setup() {
const lightbox7 = ref(null)
const carousel4 = ref(null)
return {
lightbox7,
carousel4
}
}
};
</script>
<script setup lang="ts">
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
const lightbox7 = ref()
const carousel4 = ref()
</script>
Different thumbnails number
2 thumbnails
Set :items="2" on the carousel to make two thumbnails
visible.
<template>
<MDBECommerceGallery
:lightboxRef="lightbox8"
:carouselRef="carousel5"
>
<MDBMultiCarousel :items="2" ref="carousel5">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="active w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Gallery image 2"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Gallery image 3"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
alt="Gallery image 4"
class="w-100"
/>
</MDBMultiCarousel>
<MDBLightbox ref="lightbox8" class="mb-1">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
</MDBECommerceGallery>
</template>
<script>
import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
export default {
components: {
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery,
MDBMultiCarousel
},
setup() {
const lightbox8 = ref(null)
const carousel5 = ref(null)
return {
lightbox8,
carousel5
}
}
};
</script>
<script setup lang="ts">
import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
const lightbox8 = ref()
const carousel5 = ref()
</script>
4 thumbnails
Set :items="4" on the carousel to make four thumbnails
visible.
<template>
<MDBECommerceGallery
:lightboxRef="lightbox9"
:carouselRef="carousel6"
vertical
>
<MDBRow>
<MDBCol col="8" sm="9">
<MDBLightbox ref="lightbox9" class="mb-1">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
</MDBCol>
<MDBCol col="4" sm="3">
<MDBMultiCarousel vertical :items="4" ref="carousel6">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="active w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Gallery image 2"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Gallery image 3"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
alt="Gallery image 4"
class="w-100"
/>
</MDBMultiCarousel>
</MDBCol>
</MDBRow>
</MDBECommerceGallery>
</template>
<script>
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
export default {
components: {
MDBRow,
MDBCol,
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery,
MDBMultiCarousel
},
setup() {
const lightbox9 = ref(null)
const carousel6 = ref(null)
return {
lightbox9,
carousel6
}
}
};
</script>
<script setup lang="ts">
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
const lightbox9 = ref()
const carousel6 = ref()
</script>
Different image sizes
Horizontal carousel
Image sizes are automatically adjusted to the view.
<template>
<MDBECommerceGallery
:lightboxRef="lightbox10"
:carouselRef="carousel7"
>
<MDBLightbox ref="lightbox10" class="mb-1">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
<MDBMultiCarousel :items="3" ref="carousel7">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="active w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Square/1.webp"
alt="Gallery image 2"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
alt="Gallery image 3"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Vertical/1.webp"
alt="Gallery image 4"
class="w-100"
/>
</MDBMultiCarousel>
</MDBECommerceGallery>
</template>
<script>
import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
export default {
components: {
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery,
MDBMultiCarousel
},
setup() {
const lightbox10 = ref(null)
const carousel7 = ref(null)
return {
lightbox10,
carousel7
}
}
};
</script>
<script setup lang="ts">
import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
const lightbox10 = ref()
const carousel7 = ref()
</script>
Vertical carousel
In a vertical carousel, it works too.
<template>
<MDBECommerceGallery
:lightboxRef="lightbox11"
:carouselRef="carousel8"
vertical
>
<MDBRow>
<MDBCol col="4" sm="3">
<MDBMultiCarousel vertical :items="3" ref="carousel8">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="active w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Square/1.webp"
alt="Gallery image 2"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
alt="Gallery image 3"
class="w-100"
/>
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Vertical/1.webp"
alt="Gallery image 4"
class="w-100"
/>
</MDBMultiCarousel>
</MDBCol>
<MDBCol col="8" sm="9">
<MDBLightbox ref="lightbox11" class="mb-1">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
</MDBCol>
</MDBRow>
</MDBECommerceGallery>
</template>
<script>
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
export default {
components: {
MDBRow,
MDBCol,
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery,
MDBMultiCarousel
},
setup() {
const lightbox11 = ref(null)
const carousel8 = ref(null)
return {
lightbox11,
carousel8
}
}
};
</script>
<script setup lang="ts">
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
import { ref } from "vue";
const lightbox11 = ref()
const carousel8 = ref()
</script>
Equal image sizes
A basic example of a gallery with images of equal sizes where
autoHeight property is added.
<template>
<MDBRow>
<MDBCol col="6">
<MDBECommerceGallery
:lightboxRef="lightbox12"
zoomEffect
autoHeight
>
<MDBRow class="py-3 shadow-5">
<MDBCol col="12" class="mb-1">
<MDBLightbox ref="lightbox12">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</MDBLightbox>
</MDBCol>
<MDBCol class="mt-1">
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="Gallery image 1"
class="active w-100"
/>
</MDBCol>
<MDBCol class="mt-1">
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
alt="Gallery image 2"
class="w-100"
/>
</MDBCol>
<MDBCol class="mt-1">
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
alt="Gallery image 3"
class="w-100"
/>
</MDBCol>
<MDBCol class="mt-1">
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
alt="Gallery image 4"
class="w-100"
/>
</MDBCol>
</MDBRow>
</MDBECommerceGallery>
</MDBCol>
</MDBRow>
</template>
<script>
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { ref } from "vue";
export default {
components: {
MDBRow,
MDBCol,
MDBLightbox,
MDBLightboxItem,
MDBECommerceGallery
},
setup() {
const lightbox12 = ref(null)
return {
lightbox12
}
}
};
</script>
<script setup lang="ts">
import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
import { ref } from "vue";
const lightbox12 = ref()
</script>
eCommerce gallery - API
Import
<script>
import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
</script>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
activation
|
String | 'click |
Defines image toggle mouse event. |
autoHeight
|
Boolean | false |
Changes active image styling to auto height. |
carouselRef
|
Object | - |
Defines MultiCarousel component ref element |
lightboxRef
|
Object | - |
Defines Lightbox component ref element |
tag
|
String | 'div' |
Defines component wrapper tag |
vertical
|
Boolean | false |
Enables vertical styles for component |
zoomEffect
|
Boolean | false |
Hovering over the image enlarges it in the given place. |