Inline Plugin
The Inline plugin transforms the lightbox into an image carousel that renders inline on the webpage.
Documentation
The plugin adds and overrides the following Lightbox properties.
| Property | Type | Description |
|---|---|---|
| inline | React.HTMLAttributes<HTMLDivElement> | HTML div element attributes to be passed to the Inline plugin container. Defaults: { style: { width: "100%", height: "100%" } } |
| open | true | This prop is ignored. |
| close | () => {} | This prop is ignored. |
| controller.focus | false | This prop is ignored. |
| toolbar.buttons | (React.ReactNode | "close")[] | The "close" button is ignored. |
Example
import Lightbox from "yet-another-react-lightbox";
import Inline from "yet-another-react-lightbox/plugins/inline";
import "yet-another-react-lightbox/styles.css";
// ...
return (
<div style={{ width: "100%", maxWidth: "900px", aspectRatio: "3 / 2" }}>
<Lightbox
plugins={[Inline]}
// ...
/>
</div>
);
// or
return (
<Lightbox
plugins={[Inline]}
inline={{
style: { width: "100%", maxWidth: "900px", aspectRatio: "3 / 2" },
}}
// ...
/>
);
Live Demo
Image carousel:
Image carousel with imageFit: "cover":
Image carousel with Fullscreen, Slideshow, Thumbnails and Zoom plugins: