lightGallery

One gallery, four packages with the same features and settings:

Stack	Package	Plugins import path
Vanilla JS / TypeScript	lightgallery	lightgallery/plugins/<name>
React	@lightgallery/react	@lightgallery/react/plugins/<name>
Vue 3	@lightgallery/vue	@lightgallery/vue/plugins/<name>
Angular	@lightgallery/angular	@lightgallery/angular/plugins/<name>

Plugin names: thumbnail, zoom, video, autoplay, fullscreen, share, hash, rotate, pager, comment, mediumZoom, relativeCaption, vimeoThumbnail, originCrop, justified. Each is a separate entry, import only what the project uses.

Default recipe. Unless the user asks for something else, every image gallery gets the zoom and thumbnail plugins, their two CSS files, and lgSize: 'WIDTH-HEIGHT' (data-lg-size in markup) on every image item. lgSize is the natural size of the full image; it drives the zoom-from-origin animation, where the slide opens from the clicked thumbnail and closes back to it. Without it the slide fades in. Read the dimensions from the image files, the image optimizer or the CMS rather than dropping the field. Leave a plugin out only when told to.

Two rules that prevent most problems

1. CSS is a consumer import in every stack. The framework packages ship no CSS. Import lightgallery/css/lightgallery.css plus one file per plugin (lightgallery/css/lg-thumbnail.css, lg-zoom.css, …), or lightgallery/css/lightgallery-bundle.css for everything.
2. Plugins are opt-in. A feature only exists when its plugin is passed (plugins: [...], plugins={[...]}, :plugins="[...]", [features]="[withX()]"). Its settings are ignored otherwise.

Vanilla JavaScript