Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

React Lightbox Documentation

Learn how to use the React version of Fullscreen Lightbox.

Types

Sources' types can be set manually using the "types" array prop (declares the types individually) and the "type" string prop (declares the type for all sources). These props disable the automatic type detection, so if you are facing the CORS issue, they will solve this problem. The possible types are "image", "video", and "youtube".

<FsLightbox
toggler={toggler}
sources={["Images/1.jpg", "Images/2.jpg", "Videos/1.mp4"]}
type="image"
types={[null, null, "video"]}
/>

In the above example the "image" type was set globally, but for the third source it was overwritten with the type "video". So, finally, the types of the sources are consecutively "image", "image", and "video".

Look over the Fullscreen Lightbox open source plug-ins.