Wisp X
56 lines
2.3 KiB
PHP
56 lines
2.3 KiB
PHP
@section('title', '画廊')
|
|
|
|
@push('styles')
|
|
<link rel="stylesheet" href="{{ asset('css/gallery.css') }}">
|
|
@endpush
|
|
|
|
<x-app-layout>
|
|
<div>
|
|
@if($images->isNotEmpty())
|
|
<div class="images-grid">
|
|
<div class="grid-sizer"></div>
|
|
@foreach($images as $image)
|
|
<div class="grid-item">
|
|
<div class="relative bg-white rounded-md overflow-hidden">
|
|
@if($image->extension === 'gif')
|
|
<span class="absolute top-1 right-1 z-[1] bg-white rounded-md text-sm px-1 py-0">Gif</span>
|
|
@endif
|
|
<a target="_blank" href="{{ $image->url }}">
|
|
<div class="relative overflow-hidden w-full h-32">
|
|
<img class="grow object-cover object-center w-full h-full" src="{{ $image->thumb_url }}"/>
|
|
</div>
|
|
</a>
|
|
<a target="_blank" href="{{ $image->user->url ?: 'javascript:void(0)' }}" class="flex justify-between items-center px-3 py-2 bg-white overflow-hidden group">
|
|
<img src="{{ $image->user->avatar }}" class="w-6 h-6 rounded-full">
|
|
<p class="ml-2 truncate group-hover:text-blue-500">{{ $image->user->name }}</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
{{ $images->links() }}
|
|
@else
|
|
<x-no-data message="暂时没有可展示的图片，再等等看吧～" />
|
|
@endif
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script src="{{ asset('js/masonry/masonry.pkgd.min.js') }}"></script>
|
|
<script src="{{ asset('js/imagesloaded/imagesloaded.pkgd.min.js') }}"></script>
|
|
<script>
|
|
var $grid = $('.images-grid').masonry({
|
|
itemSelector: '.grid-item',
|
|
columnWidth: '.grid-sizer',
|
|
duration: '0.8s',
|
|
resize: true,
|
|
initLayout: true,
|
|
percentPosition: true,
|
|
horizontalOrder: true,
|
|
});
|
|
$grid.imagesLoaded().progress(function() {
|
|
$grid.masonry('layout');
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|