diff --git a/CHANGELOG.md b/CHANGELOG.md index eaf380e..7eefaaf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,24 @@ All notable changes to `filament-image-gallery` will be documented in this file. +## v2.1.4 - 2025-12-17 + +### Added +- `overlap()` method for `ImageGalleryColumn` to match Filament's API +- `getOverlap()` method as an alias for consistency + +### Fixed +- **SPA Mode Compatibility**: Fixed image gallery viewer not loading without page reload when using `spa()` mode + - Moved Viewer.js initialization to dynamically loaded JavaScript + - Assets are now loaded on-demand when galleries are detected + - Works seamlessly with Livewire 3.x SPA navigation +- **Stacked Layout**: Fixed stacked images not displaying correctly due to Tailwind dynamic class generation + - Replaced Tailwind `-space-x-*` classes with inline `margin-inline-start` styles + +### Changed +- Viewer.js CDN assets are now loaded dynamically via JavaScript instead of inline in Blade templates +- Improved MutationObserver for better detection of dynamically added galleries + ## v2.1.3 - 2025-12-16 ### Changed diff --git a/README.md b/README.md index 71490b5..04e6e34 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ A Filament plugin for displaying image galleries with zoom, rotate, flip, and fu - 💾 **Storage Disk Support** - Works with any Laravel filesystem disk - 🌙 **Dark Mode Support** - Works seamlessly with dark mode - 🌐 **RTL Support** - Full right-to-left language support +- ⚡ **SPA Mode Compatible** - Works seamlessly with Filament's `spa()` mode without page reload ## Installation @@ -105,6 +106,7 @@ ImageGalleryColumn::make('images') | `thumbHeight(int)` | Thumbnail height in pixels | `40` | | `limit(int\|null)` | Maximum images to show | `3` | | `stacked(int\|bool)` | Stack thumbnails. Pass `int` for custom spacing | `false` | +| `overlap(int)` | Set overlap value for stacked images (0-8) | `2` | | `square(bool)` | Square shape with rounded corners | `false` | | `circular(bool)` | Circular shape | `false` | | `ring(int, string)` | Border ring with width and color | `1, null` | @@ -174,9 +176,16 @@ ImageGalleryColumn::make('images') ```php ImageGalleryColumn::make('images') ->circular() - ->stacked(3) + ->stacked() + ->overlap(3) // Control overlap spacing (0-8) ->ring(2, '#3b82f6') ->limit(3) + +// Or use shorthand: stacked(3) sets both stacked=true and overlap=3 +ImageGalleryColumn::make('images') + ->circular() + ->stacked(3) + ->limit(3) ``` ### Natural Size (No Thumbnail Dimensions)