66 lines
2.0 KiB
PHP
66 lines
2.0 KiB
PHP
<div>
|
|
|
|
<div class="mb-5 flex items-center justify-between">
|
|
<h2 class="text-xl font-bold text-gray-900 dark:text-white">
|
|
{{ __('stream.gallery') }}
|
|
</h2>
|
|
|
|
@if ($gallery->count() > 5)
|
|
<button
|
|
id="galleryToggle"
|
|
class="text-sm font-semibold text-gray-900 dark:text-white transition">
|
|
{{ __('home.show-more') }}
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<div
|
|
data-te-lightbox-init
|
|
class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
|
|
|
|
@foreach($gallery as $index => $image)
|
|
|
|
<div class="{{ $index >= 5 ? 'hidden extra-gallery-item' : '' }}">
|
|
|
|
<div
|
|
class="group overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-xl dark:border-neutral-700 dark:bg-neutral-800">
|
|
|
|
<img
|
|
onClick="(function(){player.play(); player.pause(); })();"
|
|
src="{{ $image->thumbnail_url }}"
|
|
data-te-img="{{ $image->image_url }}"
|
|
alt="{{ $episode->title }} - Screenshot {{ $index + 1 }}"
|
|
class="aspect-video w-full cursor-zoom-in object-cover transition duration-300 group-hover:scale-105"
|
|
>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endforeach
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@if ($gallery->count() > 5)
|
|
<script>
|
|
const toggleBtn = document.getElementById('galleryToggle');
|
|
const hiddenItems = document.querySelectorAll('.extra-gallery-item');
|
|
|
|
let expanded = false;
|
|
|
|
toggleBtn.addEventListener('click', () => {
|
|
|
|
expanded = !expanded;
|
|
|
|
hiddenItems.forEach(item => {
|
|
item.classList.toggle('hidden');
|
|
});
|
|
|
|
toggleBtn.innerText = expanded
|
|
? "{{ __('stream.show-less') }}"
|
|
: "{{ __('home.show-more') }}";
|
|
});
|
|
</script>
|
|
@endif |