{"id":21076112,"url":"https://github.com/shaack/bootstrap-lightbox-gallery","last_synced_at":"2026-06-10T16:31:54.255Z","repository":{"id":220861692,"uuid":"752667732","full_name":"shaack/bootstrap-lightbox-gallery","owner":"shaack","description":null,"archived":false,"fork":false,"pushed_at":"2025-12-08T15:03:42.000Z","size":61,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-01T10:08:25.250Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/shaack.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-02-04T13:30:44.000Z","updated_at":"2025-12-08T15:03:46.000Z","dependencies_parsed_at":"2024-03-13T19:23:57.133Z","dependency_job_id":"984db507-cbf6-4e36-90f8-a408a0830030","html_url":"https://github.com/shaack/bootstrap-lightbox-gallery","commit_stats":null,"previous_names":["shaack/bootstrap-lightbox-gallery"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shaack/bootstrap-lightbox-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-lightbox-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-lightbox-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-lightbox-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-lightbox-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shaack","download_url":"https://codeload.github.com/shaack/bootstrap-lightbox-gallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-lightbox-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34161283,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-19T19:26:43.799Z","updated_at":"2026-06-10T16:31:54.233Z","avatar_url":"https://github.com/shaack.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bootstrap-lightbox-gallery\n\nA Bootstrap component to display a gallery of images in a lightbox.\n\n![Show images in your page](https://shaack.com/projekte/assets/img/bootstrap-lightbox-gallery-page.png)\n*Show images in your page*\n\n![On click large versions of the images are displayed in a lightbox*](https://shaack.com/projekte/assets/img/bootstrap-lightbox-gallery-lightbox.png)\n*On click large versions of the images are displayed in a lightbox*\n\n## References\n\n- [Demo page with usage examples](https://shaack.com/projekte/bootstrap-lightbox-gallery)\n- [GitHub repository](https://github.com/shaack/bootstrap-lightbox-gallery)\n- [npm package](https://www.npmjs.com/package/bootstrap-lightbox-gallery)\n\n## Installation\n\n```bash\nnpm install bootstrap-lightbox-gallery\n```\n\n## Usage\n\nShow the images in the page as figures with (optional hidden) caption.\n\n```html\n\u003ca href=\"https://via.placeholder.com/1024x768\" data-gallery=\"gallery-1\" class=\"d-block\"\u003e\n    \u003cfigure\u003e\n        \u003cimg src=\"https://via.placeholder.com/1024x768\" class=\"img-fluid\" alt=\"Lorem ipsum dolor sit amet\"/\u003e\n        \u003cfigcaption class=\"visually-hidden\"\u003e\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n        \u003c/figcaption\u003e\n    \u003c/figure\u003e\n\u003c/a\u003e\n\u003ca href=\"https://via.placeholder.com/768x1024\" data-gallery=\"gallery-1\" class=\"d-block\"\u003e\n    \u003cfigure\u003e\n        \u003cimg src=\"https://via.placeholder.com/768x1024\" class=\"img-fluid\" alt=\"Quick brown fox jumps\"\u003e\n        \u003cfigcaption class=\"visually-hidden\"\u003e\n            Quick brown fox jumps over the lazy dog. All their equipment and instruments are alive.\n        \u003c/figcaption\u003e\n    \u003c/figure\u003e\n\u003c/a\u003e\n\u003c!-- [...] --\u003e\n```\n\nCreate the LightboxGallery instance.\n\n```html\n\u003c!-- add `bootstrap-lightbox-gallery`, `cm-web-modules` and `bootstrap-show-modal` to your importmap (if no transpiler is used) --\u003e\n\u003cscript type=\"importmap\"\u003e\n    {\n        \"imports\": {\n            \"bootstrap-lightbox-gallery/\": \"./node_modules/bootstrap-lightbox-gallery/\",\n            \"cm-web-modules/\": \"./node_modules/cm-web-modules/\",\n            \"bootstrap-show-modal/\": \"./node_modules/bootstrap-show-modal/\"\n        }\n    }\n\u003c/script\u003e\n\u003c!-- create the LightboxGallery --\u003e\n\u003c!-- new LightboxGallery(context, props) --\u003e\n\u003cscript type=\"module\"\u003e\n    import {LightboxGallery} from \"bootstrap-lightbox-gallery/src/LightboxGallery.js\"\n\n    new LightboxGallery(document.querySelectorAll(\"[data-gallery='gallery-1']\"), \n            {\n                id: \"gallery-45c11a\", // set this, if you have multiple galleries on one page\n                title: \"My Lightbox Gallery\", // set the name, it will be displayed\n                backgroundTheme: \"dark\" // set to \"light\", if you want to display the images on light background\n            })\n\u003c/script\u003e\n```\n\n#### Properties\n\n```js\nthis.props = {\n    id: \"lightboxGallery\", // change this, if you have multiple galleries on one page\n    backgroundTheme: \"dark\" // set to \"light\", if you want to display the images on light background \n}\n```\n\nnew LightboxGallery(document.querySelectorAll(\"[data-gallery='gallery-1']\"), {title: \"My Gallery\"})\n\n---\n\nFind more high quality modules from [shaack.com](https://shaack.com)\non [our projects page](https://shaack.com/works).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaack%2Fbootstrap-lightbox-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshaack%2Fbootstrap-lightbox-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaack%2Fbootstrap-lightbox-gallery/lists"}