88 lines
2.8 KiB
Plaintext
88 lines
2.8 KiB
Plaintext
---
|
|
import { authPB } from "src/utils/pocketbase";
|
|
import type { RecordModel } from 'pocketbase'
|
|
|
|
// export const prerender = false
|
|
|
|
const pb = await authPB()
|
|
const photos = await pb.collection('photos').getFullList({
|
|
sort: '-created'
|
|
})
|
|
---
|
|
|
|
<script>
|
|
import Swiper from 'swiper';
|
|
import { Navigation, Keyboard, EffectFade } from 'swiper/modules';
|
|
import 'swiper/css';
|
|
import 'swiper/css/effect-fade';
|
|
|
|
const dataElement = document.getElementById('carousel-data');
|
|
const photos = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
|
|
const titleEl = document.getElementById('photo-title');
|
|
const cameraEl = document.getElementById('photo-camera');
|
|
const locationEl = document.getElementById('photo-location');
|
|
const currentPosIndicator = document.getElementById('current-pos');
|
|
const maxPosIndicator = document.getElementById('max-pos');
|
|
|
|
if (maxPosIndicator) {
|
|
maxPosIndicator.innerText = String(photos.length);
|
|
}
|
|
if (currentPosIndicator) {
|
|
currentPosIndicator.innerText = '1';
|
|
}
|
|
|
|
const swiper = new Swiper('.swiper', {
|
|
modules: [Navigation, Keyboard, EffectFade],
|
|
effect: 'cards',
|
|
fadeEffect: {
|
|
crossFade: true
|
|
},
|
|
speed: 400,
|
|
navigation: {
|
|
nextEl: '#inc-button',
|
|
prevEl: '#dec-button',
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
onlyInViewport: false,
|
|
},
|
|
loop: true,
|
|
on: {
|
|
slideChange: function() {
|
|
const realIndex = this.realIndex;
|
|
const currentPhoto = photos[realIndex];
|
|
|
|
if (currentPosIndicator) {
|
|
currentPosIndicator.innerText = String(realIndex + 1);
|
|
}
|
|
|
|
if (titleEl && currentPhoto) {
|
|
titleEl.textContent = currentPhoto.title || "Untitled";
|
|
}
|
|
if (cameraEl && currentPhoto) {
|
|
cameraEl.textContent = `📸 ${currentPhoto.camera}`;
|
|
}
|
|
if (locationEl && currentPhoto) {
|
|
locationEl.textContent = `📌 ${currentPhoto.location}`;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- Hidden element to pass server data to client -->
|
|
<div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
|
|
|
|
<div class="swiper w-full h-[60vh] md:h-[calc(100vh-7rem)]">
|
|
<div class="swiper-wrapper">
|
|
{photos.map((photo) => (
|
|
<div class="swiper-slide flex items-center justify-center">
|
|
<img
|
|
src={pb.files.getURL(photo, photo.image)}
|
|
class="w-full h-full object-contain"
|
|
alt={photo.title || 'Photo'}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div> |