denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated image gallery to use side-to-side view

Browse Source
This commit is contained in:
denizk0461
2026-04-12 12:40:12 +02:00
parent d5777351e6
commit d13e4516da
1 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/lib/lists/image-gallery.svelte
View File

@@ -31,14 +31,13 @@
} }
</script> </script>
<div class="gallery-zone"> <!-- <div class="gallery-zone">
<div class="gallery-container blurred-background"> <div class="gallery-container blurred-background">
<div class="gallery-button-container"> <div class="gallery-button-container">
<button class="gallery-button" onclick={galleryBack}>&lt;</button> <button class="gallery-button" onclick={galleryBack}>&lt;</button>
<div class="gallery-text-container"> <div class="gallery-text-container">
<p class="gallery-index">{currentIndex + 1} / {images.length} :: <a href={images[currentIndex].src}>full-size</a></p> <p class="gallery-index">{currentIndex + 1} / {images.length} :: <a href={images[currentIndex].src}>full-size</a></p>
<div class="gallery-desc-container"> <div class="gallery-desc-container">
<p>&nbsp;</p> <!-- this element intentionally left blank -->
{#each images[currentIndex].desc as d} {#each images[currentIndex].desc as d}
<p>{@html d}</p> <p>{@html d}</p>
{/each} {/each}
@@ -50,78 +49,81 @@
<img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}> <img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
</div> </div>
</div> </div>
</div> -->
<div class="gallery-zone blurred-background">
<div class="gallery-img-container">
<img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
</div>
<div class="gallery-button-container">
<button class="gallery-button" onclick={galleryBack}>&lt;</button>
<div class="gallery-text-container">
<p class="gallery-index">{currentIndex + 1} / {images.length} :: <a href={images[currentIndex].src}>full-size</a></p>
<div class="gallery-desc-container">
{#each images[currentIndex].desc as d}
<p>{@html d}</p>
{/each}
</div>
</div>
<button class="gallery-button" onclick={galleryForward}>&gt;</button>
</div>
</div> </div>
<style> <style>
.gallery-zone { .gallery-zone {
width: 100%; width: 100%;
} display: grid;
grid-template-columns: 5fr 4fr;
.gallery-container {
max-width: var(--media-width);
margin: 12px auto; margin: 12px auto;
border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt); border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
border-radius: var(--border-radius); border-radius: var(--border-radius);
overflow: hidden; overflow: hidden;
height: var(--media-height);
} }
.gallery-img-container { .gallery-img-container {
width: 100%; width: 100%;
height: var(--media-height);
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-right: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
} }
.gallery-img { .gallery-img {
object-fit: contain; object-fit: contain;
margin: 0; margin: 0;
width: 100%; width: 100%;
filter: brightness(100%) saturate(100%);
transition: filter var(--duration-animation) var(--anim-curve);
}
.gallery-button-container,
.gallery-text-container {
opacity: 0%;
transition: opacity var(--duration-animation) var(--anim-curve);
}
.gallery-zone:hover .gallery-button-container,
.gallery-zone:hover .gallery-text-container
{
opacity: 100%;
}
.gallery-zone:hover .gallery-img {
filter: brightness(50%) saturate(80%);
} }
.gallery-text-container { .gallery-text-container {
height: 100%;
width: 100%; width: 100%;
height: calc(var(--media-height));
/* overflow: hidden; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; /* justify-content: space-between; */
margin: 8px 32px; margin: 0 16px;
overflow: scroll;
box-sizing: border-box;
} }
.gallery-index { .gallery-index {
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: 600; font-weight: 600;
font-size: 1.0rem; font-size: 1.0rem;
padding-top: 12px;
} }
.gallery-text-container p, .gallery-index a { .gallery-text-container p, .gallery-index a {
height: fit-content; height: fit-content;
font-size: 1.0rem; font-size: 1.0rem;
line-height: 1.4rem; line-height: 1.4rem;
text-shadow: 0 0 6px black, 0 0 9px black;
} }
.gallery-desc-container { .gallery-desc-container {
padding-bottom: 12px; padding-bottom: 24px;
padding-right: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
@@ -131,8 +133,6 @@
} }
.gallery-button-container { .gallery-button-container {
z-index: 1;
position: absolute;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;