20 lines
1.4 KiB
PHP
20 lines
1.4 KiB
PHP
@push('style_css') <style>
|
|
.max-w-5xl {
|
|
max-width: 1600px !important;
|
|
}
|
|
</style> @endpush
|
|
|
|
<div class="max-w-5xl mx-auto py-20">
|
|
<div class="grid grid-cols-8 gap-4 ">
|
|
@foreach ($images as $image)
|
|
<a x-data="{ loaded: false, init() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && !this.loaded) { const img = new Image(); img.src = '{{ asset('images/' . $image) }}'; img.onload = () => { this.loaded = true; observer.unobserve(this.$el); }; } }); }, { rootMargin: '200px' }); observer.observe(this.$el); } }" href="#" wire:navigate style="height: 230px " class="hover:backdrop-blur cursor-pointer bg-gray-200 col-span-1 border overflow-hidden rounded-xl shadow">
|
|
<div x-show="!loaded" class="animate-pulse flex items-center justify-center w-full h-full">
|
|
<div role="status" class="!bg-gray-200 animate-pulse h-full w-full">
|
|
<div class="h-full bg-gray-200 rounded-full dark:bg-gray-700 w-full mb-2.5"></div> <span class="sr-only">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<img height="300" x-cloak x-show="loaded" class="bg-cover bg-center border w-full h-[230px] " x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" :src="'{{ asset('images/' . $image) }}'" loading="lazy">
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div> |