README

为Filament提供Lightbox组件。支持Spatie Media Library。

安装

您可以通过Composer安装此包

composer require njxqlus/filament-lightbox

可选地，您可以使用以下方式发布视图

php artisan vendor:publish --tag="filament-lightbox-views"

您可以使用以下方式发布配置文件以设置Lightbox选项

php artisan vendor:publish --tag="filament-lightbox-config"

使用方法

LightboxImageEntry

此条目扩展默认的ImageEntry并将其包装到Lightbox中。要使用它，您需要传递一个URL到href()方法。

use Njxqlus\Filament\Components\Infolists\LightboxImageEntry;

LightboxImageEntry::make('foo')
    ->href('https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg')

此外，您还可以传递一个URL到接受Closure的image()方法。

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

默认情况下，页面上的所有Lightbox图片都在同一个相册中。这意味着您可以使用箭头在它们之间移动。如果想要分隔相册，请使用slideGallery()方法。

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

由于此条目扩展了ImageEntry，所有方法都应该正常工作（除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组件

此组件允许您将任何其他条目传递给打开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

此条目使用Lightbox包装Filament Spatie Media Library插件条目

use Njxqlus\Filament\Components\Infolists\LightboxSpatieMediaLibraryImageEntry;

LightboxSpatieMediaLibraryImageEntry::make('foo')
    ->collection('images')
    ->conversion('thumb')
    ->circular()
    ->label('Bar')

GLightBox

此包在底层使用GLightBox。大多数选项都作为带有slide前缀的链式方法提供。以下是一些示例。

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 test

变更日志

请参阅CHANGELOG以获取有关最近更改的更多信息。

贡献

请参阅CONTRIBUTING以获取详细信息。

安全漏洞

请查看我们的安全策略以了解如何报告安全漏洞。

鸣谢

• Mikael Ahabalyants
• 所有贡献者

许可

MIT许可（MIT）。请参阅许可文件以获取更多信息。