Lightbox components for Filament. Supports Spatie Media Library.
You can install the package via composer:
composer require njxqlus/filament-lightboxOptionally, you can publish the views using
php artisan vendor:publish --tag="filament-lightbox-views"You can publish the config file to set up lightbox options with:
php artisan vendor:publish --tag="filament-lightbox-config"This entry extend default ImageEntry and wrap it to lightbox. To use it you need to pass an url to href() method.
use Njxqlus\Filament\Components\Infolists\LightboxImageEntry;
LightboxImageEntry::make('foo')
->href('https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg')Also, you can pass an url to image() method that's accept a Closure.
use Njxqlus\Filament\Components\Infolists\LightboxImageEntry;
LightboxImageEntry::make('foo')
->image('https://biati-digital.github.io/glightbox/demo/img/small/gm2.jpg')
->href('https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg')By default, all lightbox images on page are on the same gallery. It's mean that you can use arrow to move between them.
If you want to divide galleries use a slideGallery() method.
use Njxqlus\Filament\Components\Infolists\LightboxImageEntry;
LightboxImageEntry::make('foo')
->href('https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg')
->slideGallery('qux-gallery')
LightboxImageEntry::make('bar')
->href('https://biati-digital.github.io/glightbox/demo/img/large/gm8.jpg')
->slideGallery('qux-gallery')
LightboxImageEntry::make('baz')
->href('https://biati-digital.github.io/glightbox/demo/img/large/gm9.jpg')
->slideGallery('fred-gallery'),Because this entry extends ImageEntry all methods should be work (except of url()).
use Njxqlus\Filament\Components\Infolists\LightboxImageEntry;
LightboxImageEntry::make('foo')
->href('https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg')
->circular()
->label('Bar'),This component allows you to pass any other entries to schema that's open lightbox.
use Njxqlus\Filament\Components\Infolists\Lightbox;
Lightbox::make()
->schema([
TextEntry::make('foo')
])
->href('https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg')This entry wrap Filament Spatie Media Library Plugin entry with lightbox
use Njxqlus\Filament\Components\Infolists\LightboxSpatieMediaLibraryImageEntry;
LightboxSpatieMediaLibraryImageEntry::make('foo')
->collection('images')
->conversion('thumb')
->circular()
->label('Bar')This package uses GLightBox under the hood. Most of its options provided as
chain methods with slide prefix. There are some of them in the example below.
use Njxqlus\Filament\Components\Infolists\LightboxImageEntry;
LightboxImageEntry::make('foo')
->href('https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg')
->slideDescription(new HtmlString('<strong>Lightbox</strong>'))
->slideWidth('906px')
->slideHeight('500px')composer testPlease see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent