diff --git a/src/components/ImageGallery.svelte b/src/components/ImageGallery.svelte
index f2e3fec..7ceb1ac 100644
--- a/src/components/ImageGallery.svelte
+++ b/src/components/ImageGallery.svelte
@@ -2,8 +2,18 @@
import { onMount } from "svelte";
import { fade } from "svelte/transition";
import normalizeWheel from "@helpers/normalizeWheel";
- let images = [];
- let progress = [];
+ type Image = {
+ exif: string[];
+ src: string;
+ alt: string;
+ sizes: string;
+ original: string;
+ loaded: string;
+ originalLoaded: boolean;
+ startedLoading: boolean;
+ };
+ let images: Image[] = [];
+ let progress: number[] = [];
let currentIndex = -1;
const maxZoom = 5;
import { swipe } from "svelte-gestures";
@@ -34,14 +44,14 @@
currentIndex = index;
};
- const handleKeyDown = ({ key }) => {
+ const handleKeyDown = ({ key }: KeyboardEvent) => {
if (currentIndex < 0) return;
if (key === "Escape" && currentIndex > -1) setIndex(-1);
if (key === "ArrowLeft") addIndex(-1);
if (key === "ArrowRight") addIndex(+1);
};
- const handleOriginalLoading = async (image) => {
+ const handleOriginalLoading = async (image: Image) => {
if (!image.startedLoading) {
image.startedLoading = true;
let cIndex = currentIndex;
@@ -54,7 +64,8 @@
},
});
const total = Number(response.headers.get("content-length"));
- const reader = response.body.getReader();
+ const reader = response?.body?.getReader();
+ if (!reader) return;
let bytesReceived = 0;
let chunks = [];
console.log("[SLIDER] started loading " + image.original);
@@ -145,7 +156,7 @@
console.log("Error loading", image);
});
- let exif = [];
+ let exif: string[] = [];
try {
const rawExif = image.getAttribute("data-exif");
@@ -166,7 +177,8 @@
return {
exif,
- // preview: preview.getAttribute("src"),
+ startedLoading: false,
+ loaded: "",
src: image.getAttribute("srcset"),
alt: image.getAttribute("alt"),
sizes: image.getAttribute("sizes"),
@@ -210,6 +222,7 @@
{/if}
-
-
- {exif.join(" | ")}
+ {#each exif as e}
+ {e}
+ {/each}
{/if}
{/if}
@@ -252,7 +262,7 @@
height: 10px;
z-index: 99;
left: 47px;
- background-color: black;
+ background: var(--neutral-800);
width: calc(100% - 94px);
transform-origin: left;
transition: transform 0.3s ease;
@@ -264,7 +274,7 @@
left: 0;
height: 100vh;
width: 100vw;
- background-color: rgba(24, 24, 24, 0.99);
+ background: var(--neutral-800);
opacity: 0;
transition: opacity 0.1s ease;
@@ -304,21 +314,11 @@
transform-origin 0.1s linear;
}
- .image > .background {
- filter: brightness(0.2);
- position: absolute;
- opacity: 0.3;
- width: 100%;
- z-index: 98;
- height: 100%;
- object-fit: fill;
- }
-
.controls {
width: fit-content;
left: 50vw;
transform: translateX(-50%);
- background: black;
+ background: var(--neutral-800);
padding: 5px;
position: absolute;
z-index: 99;
@@ -329,7 +329,7 @@
width: 15px;
height: 15px;
border-style: none;
- background: black;
+ background: transparent;
border: solid 1px white;
cursor: pointer;
margin: 2px;
@@ -346,15 +346,25 @@
left: 50vw;
transform: translateX(-50%);
z-index: 99;
- background-color: black;
+ background: var(--neutral-800);
color: white;
padding: 5px;
- font-size: 0.8em;
+ padding-inline: 10px;
+ font-size: 0.9em;
white-space: pre;
+ display: flex;
+ }
+
+ .exif > span {
+ padding: 0px 8px;
+ }
+
+ .exif > span:last-child {
+ border-right: none;
}
.gallery-wrapper > button {
- background: black;
+ background: var(--neutral-800);
color: white;
border-radius: 0px;
border: none;
diff --git a/src/components/arrows/ArrowB.astro b/src/components/arrows/ArrowB.astro
index bcefb06..7bcc1c5 100644
--- a/src/components/arrows/ArrowB.astro
+++ b/src/components/arrows/ArrowB.astro
@@ -12,6 +12,7 @@ const t = useTranslations(Astro.url);
.arrow {
position: absolute;
left: 0;
+ z-index: 1;
transform: translateX(-110%) translateY(-160px);
}
.arrow > p {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 89ce884..a74beac 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -120,7 +120,7 @@ import "./global.css";
-