Lightbox by Mikael Ahabalyants

Installation
Usage
Testing
Changelog
Contributing
Security Vulnerabilities
Credits
License

Lightbox components for Filament. Supports Spatie Media Library.

#Installation

You can install the package via composer:

composer require njxqlus/filament-lightbox

Optionally, 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"

#Usage

#LightboxImageEntry

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'),

#Lightbox Component

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')

#Lightbox Spatie Media Library Image Entry

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')

#GLightBox

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')

#Testing

composer test

#Changelog

Please see CHANGELOG for more information on what has changed recently.

#Contributing

Please see CONTRIBUTING for details.

#Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

#Credits

#License

The MIT License (MIT). Please see License File for more information.