{"id":15063511,"url":"https://github.com/avalynx/avalynx-lightbox","last_synced_at":"2025-10-15T14:23:20.827Z","repository":{"id":257786277,"uuid":"860421531","full_name":"avalynx/avalynx-lightbox","owner":"avalynx","description":"AvalynxLightbox is a simple, lightweight, and easy-to-use lightbox library. Based on Bootstrap \u003e=5.3 without any framework dependencies.","archived":false,"fork":false,"pushed_at":"2025-03-07T23:03:24.000Z","size":264,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T10:03:31.210Z","etag":null,"topics":["avalynx","bootstrap","bootstrap5","component","lightbox"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avalynx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-20T12:05:00.000Z","updated_at":"2025-03-07T23:03:15.000Z","dependencies_parsed_at":"2024-09-20T15:27:39.793Z","dependency_job_id":"53ea191f-ed61-4ee8-b15f-691ece007ed6","html_url":"https://github.com/avalynx/avalynx-lightbox","commit_stats":null,"previous_names":["avalynx/avalynx-lightbox"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-lightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-lightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-lightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-lightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avalynx","download_url":"https://codeload.github.com/avalynx/avalynx-lightbox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248208561,"owners_count":21065202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avalynx","bootstrap","bootstrap5","component","lightbox"],"created_at":"2024-09-25T00:03:31.522Z","updated_at":"2025-10-15T14:23:20.822Z","avatar_url":"https://github.com/avalynx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AvalynxLightbox\n\nAvalynxLightbox 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.\n\n## Features\n\n- **Bootstrap-Based**: Integrates seamlessly with Bootstrap (version 5.3 or higher).\n- **Customizable Options**: Configure lightbox behavior, including close functionality, opacity, z-index, and more.\n- **Closeable Lightbox**: Optionally allow users to close the lightbox with a button or by clicking outside the image.\n- **Callback Support**: Set custom actions when the lightbox is closed.\n- **Lightweight**: No additional dependencies besides Bootstrap 5.3+.\n\n## Example\n\nHere's a simple example of how to use AvalynxLightbox in your project:\n\n* [Overview](https://avalynx-lightbox.jbs-newmedia.de/examples/index.html)\n* [Show lightbox](https://avalynx-lightbox.jbs-newmedia.de/examples/show-lightbox.html)\n\n## Installation\n\nTo 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.\n\nFirst, include Bootstrap:\n\n```html\n\u003c!-- Bootstrap --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n```\n\nThen, include AvalynxLightbox:\n\n```html\n\u003cscript src=\"path/to/avalynx-lightbox.js\"\u003e\u003c/script\u003e\n```\n\nReplace `path/to/avalynx-lightbox.js` with the actual path to the files in your project.\n\n## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-lightbox/))\n\nAvalynxLightbox is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/avalynx-lightbox@1.0.1/dist/js/avalynx-lightbox.js\"\u003e\u003c/script\u003e\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly.\n\n\n## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-lightbox))\n\nAvalynxLightbox is also available as a npm package. You can add it to your project with the following command:\n\n```bash\nnpm install avalynx-lightbox\n```\n\nAfter installing, you can import AvalynxLightbox into your JavaScript file like this:\n\n```javascript\nimport { AvalynxLightbox } from 'avalynx-lightbox';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly.\n\n## Installation via Symfony AssetMapper\n\n```bash\nphp bin/console importmap:require avalynx-lightbox\n```\n\nAfter installing, you can import AvalynxLightbox into your JavaScript file like this:\n\n```javascript\nimport { AvalynxLightbox } from 'avalynx-lightbox';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly.\n\n## Installation via Symfony AssetComposer\n\nMore information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle).\n\n```twig\n{% do addAssetComposer('avalynx/avalynx-lightbox/dist/js/avalynx-lightbox.js') %}\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly.\n\n## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-lightbox))\n\nAvalynxLightbox is also available as a Composer package. You can add it to your project with the following command:\n\n```bash\ncomposer require avalynx/avalynx-lightbox\n```\n\nAfter installing, you can import AvalynxLightbox into your HTML file like this:\n\n```html\n\u003cscript src=\"vendor/avalynx/avalynx-lightbox/dist/js/avalynx-lightbox.js\"\u003e\u003c/script\u003e\n``` \n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly.\n\n## Usage\n\nTo create an alert, simply instantiate a new `AvalynxLightbox` object with the desired options:\n\n```javascript\nnew AvalynxLightbox('.avalynx-lightbox', {\n    closeable: true,\n    closeOnClickOutside: true,\n    opacity: 80,\n    zIndex: 1500,\n    onClose: () =\u003e console.log('Lightbox closed')\n}, {\n    closeButtonLabel: 'Close'\n});\n\n```\n\n## Options\n\nAvalynxLightbox supports the following options for customization:\n\n- `selector`: (string) CSS selector for the images to display in the lightbox (default: `'.avalynx-lightbox'`).\n- `options`:\n    - `closeable`: (boolean) Allow users to close the lightbox (default: `true`).\n    - `closeOnClickOutside`: (boolean) Close the lightbox when the user clicks outside the image (default: `true`).\n    - `onClose`: (function) A callback function to execute when the lightbox is closed (default: `null`).\n    - `opacity`: (number) Background opacity (0-100) (default: `80`).\n    - `zIndex`: (number) The z-index for the lightbox (default: `1500`).\n- `language`:\n    - `closeButtonLabel`: (string) The aria-label for the close button (default: `'Close'`).\n\n## Contributing\n\nContributions 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:\n\n- Bug fixes\n- Feature enhancements\n- Documentation improvements\n\nBefore submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.\n\n## License\n\nAvalynxLightbox is open-sourced software licensed under the [MIT license](LICENSE).\n\n## Contact\n\nIf 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.\n\nThank you for considering AvalynxLightbox for your project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-lightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favalynx%2Favalynx-lightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-lightbox/lists"}