Anybody find a decent solution for table images to a lightbox?

(I'm surprised filament doesn't have a builtin lightbox for table records...it seems to have everything else imaginable!)

The 2 lightbox plugins are not solutions.

https://filamentphp.com/plugins/njxqlus-lightbox
This plugin doesn't support use in tables, so that's of no help here.
https://filamentphp.com/plugins/solution-forest-simplelightbox
This plugin simply doesn't work and doesn't seem to be actively maintained.

_andypeacock•10/12/24, 10:31 PM

Hi @bionary I found the same problem as you. Did you find a solution?

_andypeacock•10/12/24, 10:36 PM

Actually, thanks to Cursor, I've already got a solution:

Then the filament.tables.thumbnail_modal.blade.php:

awcodes•10/12/24, 10:37 PM

Just create a custom column whose action opens a modal with a custom view which is just an img tag with the src for the image.

_andypeacock•10/12/24, 10:37 PM

Thanks Adam - Just replied with the same.

awcodes•10/12/24, 10:37 PM

Don’t even need an additional script

_andypeacock•10/12/24, 10:38 PM

Obvious, now I see the solution

awcodes•10/12/24, 10:38 PM

bionaryOP•10/16/24, 12:17 PM

@_andypeacock Your solution looks a lot smarter/cleaner than what I came up with. Thank you. I was doing something similar but packing it all in the Filament Resource like this:

I never quite found a way to scale the image properly. Even with my custom class added to the image, it was still not scaling properly and would get cut off if the aspect ratio was extreme. Also the white border around the image was never equal/balanced...but my tailwind skills are junk.

Can't wait to try your solution, thanks!

_andypeacock•10/17/24, 8:13 AM

Hi, don't thank me, thank cursor

Also, mine doesn't scale either, I realised later. I've parked it for now, as it wasn't critical for me.

SimonH•4/28/25, 5:04 PM

Just came across this as i am also trying to implement a lightbox in tables and infolists, i used the solution that @_andypeacock posted and it worked well on the infolist, but is very slow on tables. Looking at the network tab it seems like it is reloading all images for the entire table, below is my action code, what can i do to only load the clicked on image?

_andypeacock•4/28/25, 5:10 PM

I'm on from mobile at the moment, but my sight loads the modal very quickly. I don't remember having any issues, but let me check and I'll come back in case I made any last minute changes.

_andypeacock•4/28/25, 5:14 PM

Ah, I did.

Now have

_andypeacock•4/28/25, 5:18 PM

Ah, theres a blade file and render hook. Let me get back to my laptop (about 3-4 hours from now) and I'll pull it all together.

SimonH•4/28/25, 5:21 PM

thanks, I really appreciate your help

SimonH•4/28/25, 5:43 PM

Once again @Povilas K with the detailed performance breakdown.
Looks like i am running into a known issue with modals on large livewire tables.
In this case, the image URL is already available on the frontend so it should not require a roundtrip to the server to render the modal, it could be done with JS on the FE, looks like that is what you ultimately went with @_andypeacock

YouTubeFilament Daily

Slow Modals in Filament: Livewire Performance Issue

Let's talk about a slow behavior of modals on more complex pages of Filament. And the reasons.

Links mentioned in the video:

Original tweet: https://x.com/joseph_ajibodu/status/1809187763142775088
Video "Filament PHP performance Issue" https://www.youtube.com/watch?v=ZDW8NBzVdpo and a follow-up "Solution to Filament PHP Performance issue" h...

_andypeacock•4/28/25, 8:32 PM

Hi @SimonH At the laptop at last.

So, three parts

the filament column above
In your main provider:

_andypeacock•4/28/25, 8:33 PM

the lightbox blade template

Hope that helps!

_andypeacock•4/28/25, 8:33 PM

<div x-data x-cloak>
<div x-show="$store.lightbox.show" x-on:keydown.escape.window="$store.lightbox.show = false"
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<div class="relative max-w-3xl max-h-full bg-gray-100 p-12 rounded-lg shadow-xl"
x-on:click.outside="$store.lightbox.show = false">
<img :src="$store.lightbox.imageUrl" alt="Lightbox image"
class="max-h-[80vh] max-w-full rounded border border-gray-300">
<button @click="$store.lightbox.show = false"
class="absolute top-3 right-3 p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:border-gray-400 transition-all duration-200">
<svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</button>
</div>
</div>
</div>

<script>
document.addEventListener('alpine:init', () => {
Alpine.store('lightbox', {
show: false,
imageUrl: null,
openLightbox(url) {
this.imageUrl = url;
this.show = true;
},
closeLightbox() {
this.show = false;
this.imageUrl = null;
},
});
});
</script>

_andypeacock•4/28/25, 8:36 PM

It's snappy: https://somup.com/cTfuYzsRgF (the first pause isn't the modal - it's me giving you a moment to absorb what you're looking at)

ScreenPal (Formerly Screencast-O-Matic)

Lightbox in filament

SimonH•4/28/25, 8:51 PM

thanks

SimonH•4/28/25, 8:56 PM

I want to use this on multiple panels so i created a middleware for it, seems to be orking but now on click it shows the modal but then immediatley directs to teh record view page.

SimonH•4/28/25, 9:06 PM

Did you disable the row click for the entire table or did you find a way to disable it just for this column?

SimonH•4/28/25, 9:11 PM

I thought that would work, but it is not enought to override default behaviour.
did however work

SimonH•4/28/25, 9:57 PM

working nice and snappy now thanks @_andypeacock

SimonH•4/28/25, 9:57 PM

Now i got to learn more about tailwind and asset management in filament to get it sized just right