57 lines
3.1 KiB
PHP
57 lines
3.1 KiB
PHP
<div class="bg-transparent rounded-lg">
|
|
<p class="leading-normal font-bold text-lg text-rose-600">
|
|
{{ __('stream.gallery') }}
|
|
</p>
|
|
@if ($gallery->count() > 5)
|
|
<div class="grid grid-rows-1 w-30 text-left">
|
|
<ul data-te-lightbox-init class="list-none text-center" style="overflow: hidden;">
|
|
@php $counter = 0; @endphp
|
|
@foreach($gallery as $image)
|
|
@php $counter++; @endphp
|
|
<li class="inline-block m-1 w-[45%] sm:w-[45%] md:w-[20%] xl:w-[18%]">
|
|
@if ($counter > 5)
|
|
<div class="!visible hidden" id="collapseGallery" data-te-collapse-item>
|
|
@else
|
|
<div>
|
|
@endif
|
|
<div class="py-2 mt-2">
|
|
<img onClick="(function(){player.play(); player.pause(); })();" src="{{ $image->thumbnail_url }}" data-te-img="{{ $image->image_url }}" alt="{{ $episode->title }} - {{ $episode->episode }} - Screenshot {{ $counter }}" class="relative block items-center h-full w-full rounded-lg tracking-widest transition ease-in-out duration-150 cursor-zoom-in shadow-sm data-[te-lightbox-disabled]:cursor-auto" />
|
|
</div>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
<div class="grid grid-rows-1 w-30 text-center">
|
|
<a id="galleryShowMore" data-te-collapse-init data-te-ripple-init data-te-ripple-color="light" href="#collapseGallery" role="button" aria-expanded="false" aria-controls="collapseGallery" class="text-sm float-right cursor-pointer text-rose-600">{{ __('home.show-more') }}</a>
|
|
</div>
|
|
<script>
|
|
var state = 0;
|
|
function toggleGallery() {
|
|
if (state == 0) {
|
|
document.getElementById('galleryShowMore').innerText = "{{ __('stream.show-less') }}";
|
|
state = 1;
|
|
} else {
|
|
document.getElementById('galleryShowMore').innerText = "{{ __('home.show-more') }}";
|
|
state = 0;
|
|
}
|
|
}
|
|
document.getElementById('galleryShowMore').addEventListener('click', toggleGallery);
|
|
</script>
|
|
@else
|
|
<div class="grid grid-rows-1 w-30 text-left">
|
|
<ul data-te-lightbox-init class="list-none text-center" style="overflow: hidden;">
|
|
@php $counter = 0; @endphp
|
|
@foreach($gallery as $image)
|
|
@php $counter++; @endphp
|
|
<li class="inline-block m-1 w-[45%] sm:w-[45%] md:w-[20%] xl:w-[18%]">
|
|
<div class="py-2 mt-2">
|
|
<img onClick="(function(){player.play(); player.pause(); })();" src="{{ $image->thumbnail_url }}" data-te-img="{{ $image->image_url }}" alt="{{ $episode->title }} - {{ $episode->episode }} - Screenshot {{ $counter }}" class="relative block items-center h-full w-full rounded-lg tracking-widest transition ease-in-out duration-150 cursor-zoom-in shadow-sm data-[te-lightbox-disabled]:cursor-auto" />
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
</div>
|