breadone/BreadnetV3
Archived
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add position indicator to buttons

Browse Source
This commit is contained in:
June
2025-11-14 14:16:20 +13:00
parent 6d752a4677
commit d14b15420c
3 changed files with 12 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/photos/carousel.astro
View File

@@ -23,9 +23,16 @@ const getImageLink = async (record: any) => {
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');
maxPosIndicator!.innerText = cap as string
currentPosIndicator!.innerText = (pos + 1) as string
function updatePhoto() {
const currentPhoto = photos[pos];
currentPosIndicator!.innerText = (pos + 1) as string
// Update image src
if (img && currentPhoto) {
@@ -64,15 +71,7 @@ const getImageLink = async (record: any) => {
<!-- Hidden element to pass server data to client -->
<div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
<!-- <div class="flex flex-col w-7/8 self-center"> -->
<!-- <button id="dec-button" class="" onclick="dec()">&lt;</button>
<button id="inc-button" class="" onclick="inc()">&gt;</button> -->
<div class="flex flex-col self-center">
<img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={ pb.files.getURL(photos[0], photos[0].image) } />
<!-- <div class="flex flex-col">
<p id="photo-title" class="bold text-2xl">{photos[0].title === "" ? "Untitled" : photos[0].title}</p>
{photos[0].camera && <p id="photo-camera" class="text-sm">{photos[0].camera}</p>}
{photos[0].location && <p id="photo-location" class="text-sm">{photos[0].location}</p>}
</div> -->
</div>
</div>