LightBox Gallery

Lightbox Gallery for creating beautiful image & video galleries for the web and the mobile.

WithSideBar

Usage

import { LightboxGallery , LightboxThumbnail , LightBoxContent } from "@momo-webplatform/mobase";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

export const LightboxGalleryDemo = () => {
  const images = [
    { url: "https://img.mservice.com.vn/common/u/2e02fb5fe4f64fb55bc713540643c6f8eae702d101cea8c59afc49cfc505fc37/35570a4c-9d8e-4448-95c5-19273f956bc6ahrz56xv.jpg", titleImage: "KATINAT sáng tạo từ những chắt chiu chọn lọc nơi vườn trồng. Như cả vườn nhiệt đới hiện ra trước mắt Trà sữa phô mai" },
    { url: "https://img.mservice.com.vn/common/u/2e02fb5fe4f64fb55bc713540643c6f8eae702d101cea8c59afc49cfc505fc37/14758f25-14c5-4d0a-8c75-4b9cc4606fea233drpmm.jpg", titleImage: "KATINAT sáng tạo từ những chắt chiu chọn lọc nơi vườn trồng. Như cả vườn nhiệt đới hiện ra trước mắt Trà sữa chôm chôm" },
    { url: "https://img.mservice.com.vn/common/u/2e02fb5fe4f64fb55bc713540643c6f8eae702d101cea8c59afc49cfc505fc37/5478feb7-dfa4-4c9d-b58f-80f4005896b7tap_75_j.jpg", titleImage: "KATINAT sáng tạo từ những chắt chiu chọn lọc nơi vườn trồng. Như cả vườn nhiệt đới hiện ra trước mắt Matcha Anh Đào" },
    { url: "https://img.mservice.com.vn/common/u/2e02fb5fe4f64fb55bc713540643c6f8eae702d101cea8c59afc49cfc505fc37/893b4f0c-b533-4251-9578-6c42f184b487l6v45ub_.jpg", titleImage: "KATINAT sáng tạo từ những chắt chiu chọn lọc nơi vườn trồng. Như cả vườn nhiệt đới hiện ra trước mắt Xoài Dừa Chiang mai" },
    { url: "https://katinat.vn/wp-content/uploads/2024/04/432783099_402994675762732_8827534077984566267_n-819x1024.jpg", titleImage: "KATINAT sáng tạo từ những chắt chiu chọn lọc nơi vườn trồng. Như cả vườn nhiệt đới hiện ra trước mắt Xoài Dừa Chiang mai" },
    { url: "https://katinat.vn/wp-content/uploads/2024/03/image-819x1024.png", titleImage: "KATINAT sáng tạo từ những chắt chiu chọn lọc nơi vườn trồng. Như cả vườn nhiệt đới hiện ra trước mắt Xoài Dừa Chiang mai" },
    { url: "https://katinat.vn/wp-content/uploads/2023/08/357194611_256587093736825_386966657846776321_n-1-1024x1024.jpg", titleImage: "KATINAT sáng tạo từ những chắt chiu chọn lọc nơi vườn trồng. Như cả vườn nhiệt đới hiện ra trước mắt Xoài Dừa Chiang mai" },
    { url: "https://katinat.vn/wp-content/uploads/2024/01/3-768x1024.jpg", titleImage: "KATINAT sáng tạo từ những chắt chiu chọn lọc nơi vườn trồng. Như cả vườn nhiệt đới hiện ra trước mắt Xoài Dừa Chiang mai" },
  ];
 
  const [activeSlideIdx, setActiveSlideIdx] = useState(0);
 
  return (
    <div className="space-y-2 sm:space-y-8">
      <div className="sm:flex sm:space-x-4 items-center">
        <div className="overflow-x-auto py-2 grow">
          <div
            className=""
            style={{ minWidth: 390 }}
          >
            <LightboxGallery className="grid grid-cols-4 gap-4">
              {images?.map((img, index) => (
                <LightboxThumbnail onClick={() => setActiveSlideIdx(index)} key={index} src={img.url} alt="image-alt" />
              ))}
              <LightBoxContent activeSlideIndex={activeSlideIdx} images={images?.map((img, index) => ({
                url: img.url,
                titleImage: img.titleImage,
                idx: index
              }))} />
            </LightboxGallery>
          </div>
        </div>
      </div>
    </div>
  )
};

Note:

You must import modules swipert modules:

 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";

Use LightboxThumbnail as same as button trigger open LightboxGallery
You can also use element and pass props open & onOpenChange trigger open LightboxGallery
activeSlideIdx is important props when you action onclick a thumbnail
subHtmlSideBar and WithSideBar is props extends sideBar for LightboxGallery

API Reference

LightboxGallery component extends from Dialog , Swiper and supports all of its props.

LightboxGallery

Prop	Type	Default	Required
`className`	string	--	false
`open`	enumboolean	--	false
`onOpenChange`	(open: boolean) => void	--	false

LightboxThumbnail

Prop	Type	Default	Required
`onClick`	() => void	--	false
`src`	string	--	false
`alt`	string	--	false
`className`	string	--	false
`classNameImage`	string	--	false

LightBoxContent

Prop	Type	Default	Required
`images`	{ url: string; titleImage?: string; idx?: number; }[]	--	true
`activeSlideIndex`	number	0	false
`withSideBar`	enumboolean	--	false
`subHtmlSideBar`	enumReactNode	--	false
`classNameSubHtmSideBar`	string	--	false
`isPagination`	enumboolean	false	false

Tooltip Progressbar