alu/personal-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use smaller thumbnails for photography preview,

Browse Source 
move gallery common css to gallery.css
This commit is contained in:
Arthur Lu 2024-12-12 07:35:39 +00:00
parent d47c30846d
commit 28a7630c9f
17 changed files with 36 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/gallery.css Normal file
View File

@ -0,0 +1,16 @@
#gallery-container {
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
row-gap: 16px;
margin-top: 1em;
margin-bottom: 1em;
}
#gallery-container modal-image {
max-width: 100%;
min-width: 100%;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}

4
photography.html
View File

@ -39,7 +39,7 @@
<main> <main>
<div id="galleries-container"> <div id="galleries-container">
<figure class="overlay-container gallery"> <figure class="overlay-container gallery">
<img src="/resources/photography/nature/1.jpg" alt="" class="image"> <img src="/resources/photography/nature/1-thumb.jpg" alt="" class="image">
<figcaption class="overlay-mask"> <figcaption class="overlay-mask">
<a href="/photography/nature.html" class="overlay-content"> <a href="/photography/nature.html" class="overlay-content">
<h2>Nature</h2> <h2>Nature</h2>
@ -48,7 +48,7 @@
</figcaption> </figcaption>
</figure> </figure>
<figure class="overlay-container gallery"> <figure class="overlay-container gallery">
<img src="/resources/photography/nature2/1.jpg" alt="" class="image"> <img src="/resources/photography/nature2/1-thumb.jpg" alt="" class="image">
<figcaption class="overlay-mask"> <figcaption class="overlay-mask">
<a href="/photography/nature2.html" class="overlay-content"> <a href="/photography/nature2.html" class="overlay-content">
<h2>Nature 2</h2> <h2>Nature 2</h2>

28
photography/nature.html
View File

@ -7,23 +7,9 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="/css/style.css" type="text/css"> <link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/overlay.css" type="text/css"> <link rel="stylesheet" href="/css/overlay.css" type="text/css">
<link rel="stylesheet" href="/css/gallery.css" type="text/css">
<link rel="icon" type="image/x-icon" href="/resources/icon/favicon.svg"> <link rel="icon" type="image/x-icon" href="/resources/icon/favicon.svg">
<script src="/scripts/ModalImage.js" type="module"></script> <script src="/scripts/ModalImage.js" type="module"></script>
<style>
#gallery-container {
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
row-gap: 16px;
margin-top: 1em;
margin-bottom: 1em;
}
#gallery-container modal-image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
</style>
</head> </head>
<body> <body>
<header> <header>
@ -37,12 +23,12 @@
</header> </header>
<main> <main>
<div id="gallery-container"> <div id="gallery-container">
<modal-image class="photo" src="/resources/photography/nature/1.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature/1-thumb.jpg" src="/resources/photography/nature/1.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature/2.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature/2-thumb.jpg" src="/resources/photography/nature/2.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature/3.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature/3-thumb.jpg" src="/resources/photography/nature/3.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature/4.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature/4-thumb.jpg" src="/resources/photography/nature/4.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature/5.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature/5-thumb.jpg" src="/resources/photography/nature/5.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature/6.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature/6-thumb.jpg" src="/resources/photography/nature/6.jpg" alt=""></modal-image>
</div> </div>
</main> </main>
<footer> <footer>

28
photography/nature2.html
View File

@ -7,23 +7,9 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="/css/style.css" type="text/css"> <link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/overlay.css" type="text/css"> <link rel="stylesheet" href="/css/overlay.css" type="text/css">
<link rel="stylesheet" href="/css/gallery.css" type="text/css">
<link rel="icon" type="image/x-icon" href="/resources/icon/favicon.svg"> <link rel="icon" type="image/x-icon" href="/resources/icon/favicon.svg">
<script src="/scripts/ModalImage.js" type="module"></script> <script src="/scripts/ModalImage.js" type="module"></script>
<style>
#gallery-container {
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
row-gap: 16px;
margin-top: 1em;
margin-bottom: 1em;
}
#gallery-container modal-image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
</style>
</head> </head>
<body> <body>
<header> <header>
@ -37,12 +23,12 @@
</header> </header>
<main> <main>
<div id="gallery-container"> <div id="gallery-container">
<modal-image class="photo" src="/resources/photography/nature2/1.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature2/1-thumb.jpg" src="/resources/photography/nature2/1.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature2/2.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature2/2-thumb.jpg" src="/resources/photography/nature2/2.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature2/3.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature2/3-thumb.jpg" src="/resources/photography/nature2/3.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature2/4.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature2/4-thumb.jpg" src="/resources/photography/nature2/4.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature2/5.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature2/5-thumb.jpg" src="/resources/photography/nature2/5.jpg" alt=""></modal-image>
<modal-image class="photo" src="/resources/photography/nature2/6.jpg" alt=""></modal-image> <modal-image class="photo" thumb="/resources/photography/nature2/6-thumb.jpg" src="/resources/photography/nature2/6.jpg" alt=""></modal-image>
</div> </div>
</main> </main>
<footer> <footer>

BIN
resources/photography/nature/1-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
resources/photography/nature/2-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 221 KiB

BIN
resources/photography/nature/3-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
resources/photography/nature/4-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

BIN
resources/photography/nature/5-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
resources/photography/nature/6-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 179 KiB

BIN
resources/photography/nature2/1-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

BIN
resources/photography/nature2/2-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
resources/photography/nature2/3-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
resources/photography/nature2/4-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
resources/photography/nature2/5-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 KiB

BIN
resources/photography/nature2/6-thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

5
scripts/ModalImage.js
View File

@ -29,7 +29,9 @@ class ModalImage extends HTMLElement {
cursor: pointer; cursor: pointer;
} }
img { img {
min-width: 100%;
max-width: 100%; max-width: 100%;
min-height: 100%;
max-height: 100%; max-height: 100%;
} }
</style> </style>
@ -40,11 +42,12 @@ class ModalImage extends HTMLElement {
} }
connectedCallback () { connectedCallback () {
const thumbnail = this.getAttribute("thumb")
const src = this.getAttribute("src"); const src = this.getAttribute("src");
const alt = this.getAttribute("alt"); const alt = this.getAttribute("alt");
this.#src = src; this.#src = src;
this.#alt = alt; this.#alt = alt;
this.#imgElem.src = src; this.#imgElem.src = thumbnail;
this.#imgElem.alt = alt; this.#imgElem.alt = alt;
} }