njxqlus/filament-lightbox

Lightbox entry for Filament

3.2.0 2024-03-18 19:05 UTC

Requires

• php: ^8.1
• filament/filament: ^3.0
• illuminate/contracts: ^10.0|^11.0
• spatie/laravel-package-tools: ^1.15.0

Requires (Dev)

• laravel/pint: ^1.0
• nunomaduro/collision: ^7.9
• nunomaduro/larastan: ^2.0.1
• orchestra/testbench: ^8.0
• pestphp/pest: ^2.0
• pestphp/pest-plugin-arch: ^2.0
• pestphp/pest-plugin-laravel: ^2.0

MIT

• Mikael Ahabalyants

• laravel
• lightbox
• filament
• njxqlus
• filament-lightbox

README

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

• Mikael Ahabalyants
• All Contributors

License

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