https://github.com/banthagroup/fslightbox-angular
The Angular version of Fullscreen Lightbox.
https://github.com/banthagroup/fslightbox-angular
Last synced: 15 days ago
JSON representation
The Angular version of Fullscreen Lightbox.
- Host: GitHub
- URL: https://github.com/banthagroup/fslightbox-angular
- Owner: banthagroup
- License: mit
- Created: 2026-01-03T19:45:06.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-02-10T16:55:26.000Z (about 2 months ago)
- Last Synced: 2026-02-10T20:47:09.371Z (about 2 months ago)
- Language: TypeScript
- Size: 270 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - fslightbox-angular - The Angular version of 🌎 [Fullscreen Lightbox](fslightbox.com/). (Third Party Components / Carousels)
- awesome-angular - fslightbox-angular - The Angular version of [Fullscreen Lightbox](https://fslightbox.com/). (Third Party Components / Carousels)
README
# Angular Fullscreen Lightbox Basic
## Description
An Angular component for displaying images, videos, or, through custom sources, anything you want in a clean overlying box.
The project's website: https://fslightbox.com.
| Dependency | Version |
| --- | --- |
| @angular/core | at least 16.0.0 |
| @angular/common | at least 16.0.0 |
## Installation
### Through a package manager
```
npm install fslightbox-angular
```
### Or, through an archive downloaded from the website
The .tgz archive, in its entirety, should be put somewhere in the end project, for example, "./src/lib". Then run the package manager's install command with the path to that archive. The command have to be run from the directory where your project's "package.json" file is.
```
$ npm install ./src/lib/[lightbox archive name]
```
For example:
```
$ npm install ./src/lib/fslightbox-angular-1.0.0.tgz
```
## Basic usage
```ts
import { Component } from "@angular/core";
import { FsLightbox } from "fslightbox-angular"; // for Angular versions >= 20.0.0
// import { FsLightbox } from "fslightbox-angular/16-19"; for Angular versions 16–19
import { Text } from "./Text";
@Component({
selector: 'app-root',
imports: [FsLightbox],
template: `
The first slide
The second slide
`
})
export class Demo {
toggler = false;
slide = 1;
sources = [
'https://i.imgur.com/fsyrScY.jpg',
'https://www.youtube.com/watch?v=xshEZzpS4CQ',
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
{
component: Text,
inputs: {
value: "An example message"
}
}
];
open(n : number) {
this.slide = n;
this.toggler = !this.toggler
}
}
```
## Documentation
Available at: https://fslightbox.com/angular/documentation.
## Demo
Available at: https://fslightbox.com/angular.
## Browser Compatibility
| Browser | Works? |
| --- | --- |
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |