{"id":10951,"library":"glightbox","title":"GLightbox","description":"GLightbox is a lightweight, pure JavaScript lightbox library designed for displaying various media types including images, videos (YouTube, Vimeo, self-hosted), iframes, and inline content. It is currently stable at version `3.3.1`, with an active beta release stream (`4.0.0-beta.x`) indicating ongoing development towards a new major version. The library is known for its small footprint (11KB gzipped), responsiveness across devices, and comprehensive feature set including gallery support, responsive images, keyboard and touch navigation, zoomable images, and a themeable API. It differentiates itself by being a feature-rich solution without external dependencies, offering a complete lightbox experience out-of-the-box, making it a robust choice for modern web projects requiring media presentation. While minor bug fixes and improvements are released frequently for the v3 branch, the v4 branch represents a significant refactor and enhancement effort.","status":"active","version":"3.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/biati-digital/glightbox","tags":["javascript","lightbox","gallery","popup","typescript"],"install":[{"cmd":"npm install glightbox","lang":"bash","label":"npm"},{"cmd":"yarn add glightbox","lang":"bash","label":"yarn"},{"cmd":"pnpm add glightbox","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"GLightbox is a default export when using bundlers like Webpack or Rollup. The library ships with TypeScript types.","wrong":"import { GLightbox } from 'glightbox';","symbol":"GLightbox","correct":"import GLightbox from 'glightbox';"},{"note":"When loading GLightbox via a script tag (e.g., from a CDN), it exposes the `GLightbox` constructor globally on the `window` object. Do not attempt to use `import` syntax after a global script load.","wrong":"import GLightbox from 'glightbox'; // after script tag load","symbol":"GLightbox","correct":"\n"},{"note":"The GLightbox styles are not automatically included with the JavaScript. You must explicitly import the CSS file or link it in your HTML for the lightbox to be styled correctly.","wrong":"/* No CSS import */","symbol":"CSS","correct":"import 'glightbox/dist/css/glightbox.min.css';"}],"quickstart":{"code":"\n\n\n \n \n GLightbox Quickstart\n \n \n\n\n

GLightbox Gallery Example

\n\n
\n \n \n \"Forest\n \n \n \n \"Mountain\n \n \n \n \"Rick\n \n
\n\n \n \n \n\n","lang":"javascript","description":"This quickstart demonstrates how to set up a basic image and video gallery using GLightbox by including its CSS and JavaScript files from a CDN, and initializing it with a simple configuration. It showcases linking media with `` tags and using `data-gallery` for grouping, and `data-glightbox` for inline titles/descriptions."},"warnings":[{"fix":"Review the official GLightbox v4 migration guide (when available) before attempting to upgrade. For production, consider staying on the stable `v3.x` branch until `v4.0.0` is officially released.","message":"GLightbox `v4.x` is currently in beta and introduces significant changes and refactors. Upgrading from `v3.x` will likely require modifications to your implementation due to API changes and a shift towards a plugin-based architecture.","severity":"breaking","affected_versions":">=4.0.0-beta"},{"fix":"Always link `glightbox.min.css` in your HTML `` or import it into your main CSS/SCSS file if using a bundler (e.g., `import 'glightbox/dist/css/glightbox.min.css';`).","message":"The GLightbox CSS stylesheet must be explicitly included in your project. The JavaScript bundle does not automatically inject the styles, leading to an unstyled or non-functional lightbox if omitted.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Verify that the `selector` string passed to `GLightbox()` matches the CSS class or attribute of your `` tags. For example, if your links have `class=\"my-lightbox-item\"`, initialize with `GLightbox({ selector: '.my-lightbox-item' });`","message":"When initializing GLightbox, ensure the `selector` option accurately targets the elements you intend to trigger the lightbox. Mismatched selectors are a common cause of the lightbox not opening.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `glightbox.min.js` is linked via a `