Topic: Bootstrap 5 eCommerce Gallery plugin

Paweł Kończalski free asked 2 years ago


Expected behavior

Working gallery example like on the page

Actual behavior

After installing the plugin and copying the code, the gallery does not display any pictures

Resources (screenshots, code snippets etc.)

package.json

...
"mdb-react-ecommerce-gallery": "./plugins/ecommerce-gallery.tgz",
...

index.js

...
import 'mdb-react-ecommerce-gallery/dist/css/ecommerce-gallery.min.css';
...

code that was use

import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';

const basicPhotos = [
  {
    thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
    src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
    alt: 'Test alt 1',
  },
  {
    thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
    src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
    alt: 'Test alt 2',
  },
  {
    thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
    src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
    alt: 'Test alt 3',
  },
];

export default function Test_eComGalary() {
  return (
    <MDBEcommerceGallery imageSrc={basicPhotos} />
  )
}

result of this element in browser dev tool

<div class="ecommerce-gallery row">
    <div class="lightbox col-12 mb-1"></div>
</div>

Please check it out.


Wojciech Staniszewski staff commented 2 years ago

Do you see any errors in the console?


davidfrancc free answered 6 minutes ago


Enhance your eCommerce site with a Bootstrap 5 gallery plugin, offering responsive, visually appealing product displays. panorama image stitching servicesFeatures like lightbox previews, smooth transitions, and customizable layouts create a dynamic shopping experience. Easy to integrate and mobile-friendly, this plugin boosts user engagement, helping showcase products effectively and drive conversions for your online store.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 5.0.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No