PHPackages avalynx/avalynx-lightbox - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. avalynx/avalynx-lightbox ActiveLibrary[Utility & Helpers](/categories/utility) avalynx/avalynx-lightbox ======================== AvalynxLightbox is a simple, lightweight, and easy-to-use lightbox library. Based on Bootstrap >=5.3 without any framework dependencies. 1.0.5(2mo ago)2411MITJavaScriptCI passing Since Sep 20Pushed 2mo ago1 watchersCompare [ Source](https://github.com/avalynx/avalynx-lightbox)[ Packagist](https://packagist.org/packages/avalynx/avalynx-lightbox)[ Docs](https://github.com/avalynx/avalynx-lightbox)[ RSS](/packages/avalynx-avalynx-lightbox/feed)WikiDiscussions main Synced yesterday READMEChangelog (9)Dependencies (2)Versions (10)Used By (1) AvalynxLightbox =============== [](#avalynxlightbox) [![npm version](https://camo.githubusercontent.com/f1ec98a7e63c1ce04bb1b22242628373219d0622a2b6c6157df23b3cfc8919f6/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6e706d2f6176616c796e782d6c69676874626f782f76657273696f6e2e737667)](https://www.npmjs.com/package/avalynx-lightbox)[![npm downloads](https://camo.githubusercontent.com/8626090b05e38b0163f67d9ea7e7999864fe2a849d0e2de10b58a4078563b032/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6e706d2f6176616c796e782d6c69676874626f782f646f776e6c6f61642e737667)](https://www.npmjs.com/package/avalynx-lightbox)[![Composer version](https://camo.githubusercontent.com/a5ecb86ad3fb68a48c91e50bc3153d6e5fd5f4d6f974b67a141097df3aec92e0/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f636f6d706f7365722f6176616c796e782f6176616c796e782d6c69676874626f782f76657273696f6e2e737667)](https://packagist.org/packages/avalynx/avalynx-lightbox)[![Composer downloads](https://camo.githubusercontent.com/c7177ed597b79d9eebf89499f2d2831eec1fea12ee9f968ad2e48aeaa27f666f/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f636f6d706f7365722f6176616c796e782f6176616c796e782d6c69676874626f782f646f776e6c6f61642e737667)](https://packagist.org/packages/avalynx/avalynx-lightbox)[![jsDelivr](https://camo.githubusercontent.com/bbfefa57f35cc350a03a9e6edf8f19c00639a5558aeadca9fd9f3cde291e98f2/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6a7364656c6976722f6176616c796e782d6c69676874626f782f686974732e737667)](https://www.jsdelivr.com/package/npm/avalynx-lightbox)[![License](https://camo.githubusercontent.com/8ca42d164feace169de766b5b24f3c2897db9c6f221ea20a0d75f8f215f951c6/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6e706d2f6176616c796e782d6c69676874626f782f6c6963656e73652e737667)](LICENSE)[![Tests](https://camo.githubusercontent.com/71ba2e77f834720bbe1a6d12f38f997e8f78cc2858b9084e07ff0b6dbd5cc24e/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6769746875622f6176616c796e782f6176616c796e782d6c69676874626f782f74657374732e737667)](https://github.com/avalynx/avalynx-lightbox/actions/workflows/tests.yml)[![codecov](https://camo.githubusercontent.com/a2ff19e80e0050109581ae82249469e8f80d0310b0bce6bdd8d094faa749563a/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f636f6465636f762f6176616c796e782f6176616c796e782d6c69676874626f782f636f7665726167652e737667)](https://codecov.io/gh/avalynx/avalynx-lightbox)[![GitHub stars](https://camo.githubusercontent.com/b75e9595236f6665f07e011393856415cbde713bce76259d91ce2e83d5265c26/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6769746875622f6176616c796e782f6176616c796e782d6c69676874626f782f73746172732e737667)](https://github.com/avalynx/avalynx-lightbox) AvalynxLightbox is a simple, lightweight, and easy-to-use lightbox library, built on Bootstrap 5.3+ without any framework dependencies. It allows you to display images in a lightbox format with customizable options, perfect for integrating into modern web applications. Features -------- [](#features) - **Bootstrap Integration**: Designed for seamless integration with Bootstrap >= 5.3. - **Customizable Options**: Configure lightbox behavior, including close functionality, opacity, z-index, and more. - **Gallery Mode**: Navigate through multiple images with navigation buttons or arrow keys. - **Prevent Background Scrolling**: Optionally disable background scrolling when the lightbox is open, with no content jump. - **Closeable Lightbox**: Optionally allow users to close the lightbox with a button or by clicking outside the image. - **Callback Support**: Set custom actions when the lightbox is closed. - **Lightweight**: No additional dependencies besides Bootstrap 5.3+. Example ------- [](#example) Here's a simple example of how to use AvalynxLightbox in your project: - [Overview](https://avalynx-lightbox.jbs-newmedia.de/examples/index.html) - [Show lightbox](https://avalynx-lightbox.jbs-newmedia.de/examples/show-lightbox.html) - [Gallery mode](https://avalynx-lightbox.jbs-newmedia.de/examples/gallery.html) - [No background scroll](https://avalynx-lightbox.jbs-newmedia.de/examples/no-scroll.html) Installation ------------ [](#installation) To use AvalynxLightbox in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxLightbox to work correctly. First, include Bootstrap: ``` ``` Then, include AvalynxLightbox: ``` ``` Replace `path/to/avalynx-lightbox.*` with the actual path to the files in your project. Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-lightbox/)) ---------------------------------------------------------------------------------- [](#installation-via-jsdelivr-link) AvalynxLightbox is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this: ``` ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly. Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-lightbox)) ----------------------------------------------------------------------------- [](#installation-via-npm-link) AvalynxLightbox is also available as a npm package. You can add it to your project with the following command: ``` npm install avalynx-lightbox ``` After installing, you can import AvalynxLightbox into your JavaScript file like this: ``` import { AvalynxLightbox } from 'avalynx-lightbox'; import 'avalynx-lightbox/dist/css/avalynx-lightbox.css'; ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly. Installation via Symfony AssetMapper ------------------------------------ [](#installation-via-symfony-assetmapper) ``` php bin/console importmap:require avalynx-lightbox ``` After installing, you can import AvalynxLightbox into your JavaScript file like this: ``` import { AvalynxLightbox } from 'avalynx-lightbox'; import 'avalynx-lightbox/dist/css/avalynx-lightbox.css'; ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly. Installation via Symfony AssetComposer -------------------------------------- [](#installation-via-symfony-assetcomposer) More information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle). ``` {% do addAssetComposer('avalynx/avalynx-lightbox/dist/css/avalynx-lightbox.css') %} {% do addAssetComposer('avalynx/avalynx-lightbox/dist/js/avalynx-lightbox.js') %} ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly. Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-lightbox)) ------------------------------------------------------------------------------------------- [](#installation-via-composer-link) AvalynxLightbox is also available as a Composer package. You can add it to your project with the following command: ``` composer require avalynx/avalynx-lightbox ``` After installing, you can import AvalynxLightbox into your HTML file like this: ``` ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly. Usage ----- [](#usage) To create an alert, simply instantiate a new `AvalynxLightbox` object with the desired options: ``` new AvalynxLightbox('.avalynx-lightbox', { closeable: true, closeOnClickOutside: true, opacity: 80, zIndex: 1500, onClose: () => console.log('Lightbox closed') }, { closeButtonLabel: 'Close' }); ``` Options ------- [](#options) AvalynxLightbox supports the following options for customization: - `selector`: (string) CSS selector for the images to display in the lightbox (default: `'.avalynx-lightbox'`). - `options`: - `closeable`: (boolean) Allow users to close the lightbox (default: `true`). - `closeOnClickOutside`: (boolean) Close the lightbox when the user clicks outside the image (default: `true`). - `onClose`: (function) A callback function to execute when the lightbox is closed (default: `null`). - `opacity`: (number) Background opacity (0-100) (default: `80`). - `zIndex`: (number) The z-index for the lightbox (default: `1500`). - `gallery`: (boolean) Enable gallery mode for the selected images (default: `false`). - `allowBackgroundScrolling`: (boolean) Whether to allow background scrolling when the lightbox is open (default: `false`). - `language`: - `closeButtonLabel`: (string) The aria-label for the close button (default: `'Close'`). - `prevButtonLabel`: (string) The aria-label for the previous button (default: `'Previous'`). - `nextButtonLabel`: (string) The aria-label for the next button (default: `'Next'`). Contributing ------------ [](#contributing) Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas: - Bug fixes - Feature enhancements - Documentation improvements Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project. License ------- [](#license) AvalynxLightbox is open-sourced software licensed under the [MIT license](LICENSE). Contact ------- [](#contact) If you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-lightbox/issues) or submit a pull request. Thank you for considering AvalynxLightbox for your project! ### Health Score 40 — FairBetter than 86% of packages Maintenance88 Actively maintained with recent releases Popularity12 Limited adoption so far Community9 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~74 days Recently: every ~53 days Total 9 Last Release 60d ago Major Versions 0.0.4 → 1.0.02025-06-05 ### Community Maintainers ![](https://www.gravatar.com/avatar/44b85e5ce069ccae08123600bb24204ea8fe99c8cb5cbfae108ff29c179e503d?d=identicon)[jschwind](/maintainers/jschwind) --- Top Contributors [![jschwind](https://avatars.githubusercontent.com/u/985564?v=4)](https://github.com/jschwind "jschwind (16 commits)") --- Tags avalynxbootstrapbootstrap5componentlightboxcomponentbootstraplightboxbootstrap5avalynx ### Embed Badge ![Health badge](/badges/avalynx-avalynx-lightbox/health.svg) ``` [![Health](https://phpackages.com/badges/avalynx-avalynx-lightbox/health.svg)](https://phpackages.com/packages/avalynx-avalynx-lightbox) ``` ### Alternatives [haubek/bootstrap4c-chosen Bootstrap 4 Component - Chosen 8176.0k](/packages/haubek-bootstrap4c-chosen)[datatables.net/datatables.net-bs5 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap5\](https://getbootstrap.com/) 2193.4k18](/packages/datatablesnet-datatablesnet-bs5)[datatables.net/datatables.net-bs4 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap4\](https://getbootstrap.com/docs/4.6/getting-started/introduction/) 2925.5k14](/packages/datatablesnet-datatablesnet-bs4)[datatables.net/datatables.net-bs DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap\](https://getbootstrap.com/docs/3.3/) 161.6k14](/packages/datatablesnet-datatablesnet-bs) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)