final update for gallery
This commit is contained in:
parent
681569e5b3
commit
d019a24c3d
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,3 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5506
|
||||
"liveServer.settings.port": 5509
|
||||
}
|
||||
@ -39,8 +39,9 @@
|
||||
.article {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
q {
|
||||
.q {
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
color: #2c3e50 !important;
|
||||
}
|
||||
</style>
|
||||
@ -121,7 +122,7 @@
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<p> class="q"Q: What steps does BPB take to be environmentally mindful?</p>
|
||||
<p class="q">Q: What steps does BPB take to be environmentally mindful?</p>
|
||||
<p>A: BPB weights and/or bags all balloons leaving our shop to minimize any accidental release. We create mainly air-filled designs on frames for outside and discourage all clients from using helium balloons outside.</p>
|
||||
<p>Additionally, most of the balloons we use are natural latex, which is biodegradable over 3-6 months. We do our best to educate our clients about responsible use of balloons when it comes to the environment.</p>
|
||||
</div>
|
||||
|
||||
@ -1,45 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/favicon/site.webmanifest">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<title>Beach Party Balloons</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<style>
|
||||
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; padding: 20px; max-width: 1200px; margin: auto; }
|
||||
.gallery-item { text-align: center; }
|
||||
.gallery img { object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }
|
||||
.lightbox:target { display: flex; }
|
||||
.close { position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; text-decoration: none; }
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
@ -52,7 +88,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Centerpieces</a></li>
|
||||
@ -66,7 +102,43 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
@ -85,6 +157,5 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../../script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Directory where images are stored
|
||||
# Directory where images are stored (Quote it!)
|
||||
IMAGE_DIR="../../assets/pics/gallery/centerpiece"
|
||||
OUTPUT_FILE="index.html"
|
||||
# Output file (Quote it!)
|
||||
OUTPUT_FILE="./index.html" # Or specify the full path: /path/to/your/file/index.html
|
||||
|
||||
# Ensure the images directory exists
|
||||
if [ ! -d "$IMAGE_DIR" ]; then
|
||||
@ -10,48 +11,86 @@ if [ ! -d "$IMAGE_DIR" ]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Start writing the HTML file
|
||||
# Start writing the HTML file (Redirect to the quoted variable)
|
||||
cat > "$OUTPUT_FILE" <<EOL
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/favicon/site.webmanifest">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<title>Beach Party Balloons</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<style>
|
||||
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; padding: 20px; max-width: 1200px; margin: auto; }
|
||||
.gallery-item { text-align: center; }
|
||||
.gallery img { object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }
|
||||
.lightbox:target { display: flex; }
|
||||
.close { position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; text-decoration: none; }
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
@ -64,7 +103,7 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Centerpieces</a></li>
|
||||
@ -76,75 +115,105 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
<div class="gallery">
|
||||
EOL
|
||||
|
||||
# Add images dynamically with captions
|
||||
count=1
|
||||
for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
|
||||
if [[ -f "$img" ]]; then
|
||||
filename=$(basename "$img")
|
||||
caption_file="${img%.*}.txt"
|
||||
|
||||
# Read caption if available, otherwise use default
|
||||
|
||||
if [[ -f "$caption_file" ]]; then
|
||||
caption=$(cat "$caption_file")
|
||||
else
|
||||
caption=""
|
||||
fi
|
||||
|
||||
echo " <div class=\"gallery-item\">" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#lightbox$count\"> <figure class=\"image is-square\"> <img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></figure></a>" >> "$OUTPUT_FILE"
|
||||
echo " <p class=\"caption\">$caption</p>" >> "$OUTPUT_FILE"
|
||||
echo " </div>" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"gallery-item\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <figure class=\"image is-square\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <img src=\"%s\" alt=\"%s\" data-target=\"modal%d\" aria-haspopup=\"true\">\n" "$IMAGE_DIR/$filename" "$caption" "$count" >> "$OUTPUT_FILE"
|
||||
printf " </figure>\n" >> "$OUTPUT_FILE"
|
||||
printf " <p class=\"caption\">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
|
||||
# Modal structure
|
||||
printf " <div class=\"modal\" id=\"modal%d\">\n" "$count" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"modal-background\"></div>\n" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"modal-card\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <header class=\"modal-card-head\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <p class=\"modal-card-title\">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " <button class=\"delete\" aria-label=\"close\" data-action=\"close\"></button>\n" >> "$OUTPUT_FILE"
|
||||
printf " </header>\n" >> "$OUTPUT_FILE"
|
||||
printf " <section class=\"modal-card-body\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <img class=\"modal-image\" src=\"%s\" alt=\"%s\">\n" "$IMAGE_DIR/$filename" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " </section>\n" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
|
||||
count=$((count+1))
|
||||
fi
|
||||
done
|
||||
|
||||
# Add closing tags for the gallery
|
||||
cat >> "$OUTPUT_FILE" <<EOL
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
EOL
|
||||
|
||||
# Add lightbox overlays with captions
|
||||
count=1
|
||||
for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
|
||||
if [[ -f "$img" ]]; then
|
||||
filename=$(basename "$img")
|
||||
caption_file="${img%.*}.txt"
|
||||
|
||||
if [[ -f "$caption_file" ]]; then
|
||||
caption=$(cat "$caption_file")
|
||||
else
|
||||
caption=""
|
||||
fi
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
echo " <div id=\"lightbox$count\" class=\"lightbox\">" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#\" class=\"close\">×</a>" >> "$OUTPUT_FILE"
|
||||
echo " <img class="image is-square" src=\"$IMAGE_DIR/$filename\" alt=\"$caption\">" >> "$OUTPUT_FILE"
|
||||
echo " <div><p class=\"caption\" style=\"color: black; text-align: center; margin-top: 10px;\">$caption</p></div>" >> "$OUTPUT_FILE"
|
||||
echo " </div>" >> "$OUTPUT_FILE"
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
count=$((count+1))
|
||||
fi
|
||||
done
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
# Finish the HTML file
|
||||
cat >> "$OUTPUT_FILE" <<EOL
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.facebook.com/beachpartyballoons"><i class="fa-brands fa-facebook-f is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.instagram.com/beachpartyballoons/"><i class="fa-brands fa-instagram is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://bsky.app/profile/beachpartyballoons.bsky.social">
|
||||
<i class="fa-brands fa-bluesky is-size-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="footer"></div>
|
||||
<script src="../../script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
EOL
|
||||
|
||||
echo "Gallery generated with captions! Open $OUTPUT_FILE in your browser."
|
||||
|
||||
echo "Gallery generated with Bulma modals! Open $OUTPUT_FILE in your browser."
|
||||
212
gallery/classic/classic.css
Normal file
212
gallery/classic/classic.css
Normal file
@ -0,0 +1,212 @@
|
||||
|
||||
/*
|
||||
font
|
||||
*/
|
||||
/*
|
||||
body
|
||||
*/
|
||||
body {
|
||||
font-family: "Montserrat Alternates", sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
sprite svg
|
||||
*/
|
||||
.sprite-svg {
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/*
|
||||
title
|
||||
*/
|
||||
h1 {
|
||||
padding: 40px 0 40px;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*
|
||||
images wrapper
|
||||
*/
|
||||
.wrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
-moz-columns: 1;
|
||||
columns: 1;
|
||||
-moz-column-gap: 0;
|
||||
column-gap: 0;
|
||||
-moz-column-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
margin: 20px auto 50px;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
.wrapper {
|
||||
-moz-columns: 2;
|
||||
columns: 2;
|
||||
}
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
.wrapper {
|
||||
-moz-columns: 3;
|
||||
columns: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-image {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
.grid-image img {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zoom-wrapper {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
background-color: black;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.zoom-wrapper:target {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@-webkit-keyframes top-animation {
|
||||
from {
|
||||
top: -100px;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes top-animation {
|
||||
from {
|
||||
top: -100px;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.zoom-wrapper__image {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* animation */
|
||||
-webkit-animation-name: top-animation;
|
||||
animation-name: top-animation;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.cell {
|
||||
box-flex: 1;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.zoom-image {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
/*
|
||||
arrow navigation
|
||||
*/
|
||||
.navigation-arrow {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
perspective: 1000px;
|
||||
perspective-origin: 100% 50%;
|
||||
}
|
||||
|
||||
.navigation-arrow__left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navigation-arrow__next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navigation-arrow__image {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.navigation-arrow__prev .navigation-arrow__image {
|
||||
left: 40px;
|
||||
transform: rotateY(90deg);
|
||||
transform-origin: 0% 50%;
|
||||
}
|
||||
.navigation-arrow__next .navigation-arrow__image {
|
||||
right: 40px;
|
||||
transform: rotateY(-90deg);
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
.navigation-arrow__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.navigation-arrow__prev:hover .navigation-arrow__image, .navigation-arrow__next:hover .navigation-arrow__image {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
.navigation-arrow__icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 100px;
|
||||
padding: 6px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.navigation-arrow__icon svg.icon {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
fill: #000000;
|
||||
position: relative;
|
||||
stroke-width: 2;
|
||||
stroke: #000000;
|
||||
}
|
||||
|
||||
.zoom-wrapper__close {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
right: 10px;
|
||||
z-index: 100 !important;
|
||||
color: #ffffff;
|
||||
font-size: 40px;
|
||||
text-decoration: none;
|
||||
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
139
gallery/classic/classic.html
Normal file
139
gallery/classic/classic.html
Normal file
@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="classic1.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="../../index.html">Home</a>
|
||||
<a class="navbar-item" href="../../about/index.html">About Us</a>
|
||||
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
|
||||
<a class="navbar-item" href="../../terms/index.html">Terms</a>
|
||||
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
|
||||
<a class="navbar-item" href="../../contact/index.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Images used to open the lightbox -->
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<img src="../../assets/pics/gallery/classic/20230617_131551.webp" onclick="openModal();currentSlide(1)" class="hover-shadow">
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" onclick="openModal();currentSlide(2)" class="hover-shadow">
|
||||
</div>
|
||||
|
||||
|
||||
<!-- The Modal/Lightbox -->
|
||||
<div id="myModal" class="modal">
|
||||
<span class="close cursor" onclick="closeModal()">×</span>
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">1 / 4</div>
|
||||
<img src="../../assets/pics/gallery/classic/20230617_131551.webp" style="width:100%">
|
||||
</div>
|
||||
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">2 / 4</div>
|
||||
<img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" style="width:100%">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Next/previous controls -->
|
||||
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
||||
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||
|
||||
<!-- Caption text -->
|
||||
<div class="caption-container">
|
||||
<p id="caption"></p>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail image controls -->
|
||||
<div class="column">
|
||||
<img class="demo" src="../../assets/pics/gallery/classic/20230617_131551.webp" onclick="currentSlide(1)" alt="Nature">
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<img class="demo" src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" onclick="currentSlide(2)" alt="Snow">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
// Open the Modal
|
||||
function openModal() {
|
||||
document.getElementById("myModal").style.display = "block";
|
||||
}
|
||||
|
||||
// Close the Modal
|
||||
function closeModal() {
|
||||
document.getElementById("myModal").style.display = "none";
|
||||
}
|
||||
|
||||
var slideIndex = 1;
|
||||
showSlides(slideIndex);
|
||||
|
||||
// Next/previous controls
|
||||
function plusSlides(n) {
|
||||
showSlides(slideIndex += n);
|
||||
}
|
||||
|
||||
// Thumbnail image controls
|
||||
function currentSlide(n) {
|
||||
showSlides(slideIndex = n);
|
||||
}
|
||||
|
||||
function showSlides(n) {
|
||||
var i;
|
||||
var slides = document.getElementsByClassName("mySlides");
|
||||
var dots = document.getElementsByClassName("demo");
|
||||
var captionText = document.getElementById("caption");
|
||||
if (n > slides.length) {slideIndex = 1}
|
||||
if (n < 1) {slideIndex = slides.length}
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none";
|
||||
}
|
||||
for (i = 0; i < dots.length; i++) {
|
||||
dots[i].className = dots[i].className.replace(" active", "");
|
||||
}
|
||||
slides[slideIndex-1].style.display = "block";
|
||||
dots[slideIndex-1].className += " active";
|
||||
captionText.innerHTML = dots[slideIndex-1].alt;
|
||||
}
|
||||
</script>
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<p>Copyright © <span id="year"></span> Beach Party Balloons</p>
|
||||
<p>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
125
gallery/classic/classic1.css
Normal file
125
gallery/classic/classic1.css
Normal file
@ -0,0 +1,125 @@
|
||||
.row > .column {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Create four equal columns that floats next to eachother */
|
||||
.column {
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: #fefefe;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
right: 25px;
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Hide the slides by default */
|
||||
.mySlides {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Next & previous buttons */
|
||||
.prev,
|
||||
.next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
padding: 16px;
|
||||
margin-top: -50px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
transition: 0.6s ease;
|
||||
border-radius: 0 3px 3px 0;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* Position the "next button" to the right */
|
||||
.next {
|
||||
right: 0;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
/* On hover, add a black background color with a little bit see-through */
|
||||
.prev:hover,
|
||||
.next:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Number text (1/3 etc) */
|
||||
.numbertext {
|
||||
color: #f2f2f2;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Caption text */
|
||||
.caption-container {
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
padding: 2px 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
img.demo {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.active,
|
||||
.demo:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
img.hover-shadow {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.hover-shadow:hover {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
361
gallery/classic/classic1.html
Normal file
361
gallery/classic/classic1.html
Normal file
@ -0,0 +1,361 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="classic.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="../../index.html">Home</a>
|
||||
<a class="navbar-item" href="../../about/index.html">About Us</a>
|
||||
<a class="navbar-item" href="../../faq/index.html">FAQ</a>
|
||||
<a class="navbar-item" href="../../terms/index.html">Terms</a>
|
||||
<a class="navbar-item is-tab is-active" href="../../gallery/index.html">Gallery</a>
|
||||
<a class="navbar-item" href="../../contact/index.html">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- <section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered has-text-dark">Gallery</h1>
|
||||
<div class="gallery">
|
||||
<label class="item" style="background-image:url(../../assets/pics/gallery/classic/20230617_131551.webp);"><p class="has-text-dark has-text-centered has-background-grey-lighter" id="cap">Classic Arch</p></label>
|
||||
<label class="item" style="background-image:url(../../assets/pics/gallery/classic/_Photos_20241207_083534.webp);"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
<label class="item" style="background-image:url();"></label>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<div class='sprite-svg'>
|
||||
<svg height='64' viewbox='0 0 64 64' width='64'>
|
||||
<path d='M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z' id='arrow-left-1'></path>
|
||||
</svg>
|
||||
<svg height='64' viewbox='0 0 64 64' width='64'>
|
||||
<path d='M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z' id='arrow-right-1'></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>minimal mosaic</h1>
|
||||
<div class='wrapper'>
|
||||
<a class='grid-image' href='#img1'>
|
||||
<img alt='image 1' src='../../assets/pics/gallery/classic/20230617_131551.webp'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img2'>
|
||||
<img alt='image 2' src='../../assets/pics/gallery/classic/_Photos_20241207_083534.webp'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img3'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img4'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img5'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img6'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img7'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img8'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
<a class='grid-image' href='#img9'>
|
||||
<img alt='image 4' src='https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class='zoom-wrapper' id='img1'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 1' class='zoom-image' src='../../assets/pics/gallery/classic/20230617_131551.webp'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img2'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 2' src=''>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img2'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 2' class='zoom-image' src='../../assets/pics/gallery/classic/_Photos_20241207_083534.webp''>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img1'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 1' src='https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img3'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img3'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img2'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 2' src='https://images.pexels.com/photos/774861/pexels-photo-774861.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img4'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img4'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img3'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367179/pexels-photo-1367179.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img5'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img5'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img4'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1367105/pexels-photo-1367105.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img6'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img6'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img5'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1292115/pexels-photo-1292115.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img7'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img7'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img6'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/794079/pexels-photo-794079.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img8'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img8'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 3' class='zoom-image' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img7'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/640809/pexels-photo-640809.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class='navigation-arrow navigation-arrow__next' href='#img9'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 4' src='https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-right-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class='zoom-wrapper' id='img9'>
|
||||
<div class='zoom-wrapper__image'>
|
||||
<div class='cell'>
|
||||
<img alt='image 4' class='zoom-image' src='https://images.pexels.com/photos/708921/pexels-photo-708921.jpeg?auto=compress&cs=tinysrgb&w=1000'>
|
||||
</div>
|
||||
</div>
|
||||
<a class='zoom-wrapper__close' href='#'>×</a>
|
||||
<a class='navigation-arrow navigation-arrow__prev' href='#img8'>
|
||||
<span class='navigation-arrow__image'>
|
||||
<img alt='image 3' src='https://images.pexels.com/photos/1000559/pexels-photo-1000559.jpeg?auto=compress&cs=tinysrgb&w=400'>
|
||||
</span>
|
||||
<span class='navigation-arrow__icon'>
|
||||
<svg class='icon' height='28' viewbox='0 0 64 64' width='28'>
|
||||
<use xlink:href='#arrow-left-1' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<p>Copyright © <span id="year"></span> Beach Party Balloons</p>
|
||||
<p>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll(".item").forEach(item => {
|
||||
item.addEventListener("click", function () {
|
||||
expandImage(this);
|
||||
});
|
||||
});
|
||||
function expandImage(element) {
|
||||
let expandedItem = document.querySelector('.item.expanded');
|
||||
// If another image is expanded, remove it
|
||||
if (expandedItem && expandedItem !== element) {
|
||||
expandedItem.classList.remove('expanded');
|
||||
}
|
||||
// Toggle expansion and update caption class
|
||||
element.classList.toggle('expanded');
|
||||
document.querySelector("#cap").classList.add('is-size-2');
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,45 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/favicon/site.webmanifest">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<title>Beach Party Balloons</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<style>
|
||||
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; padding: 20px; max-width: 1200px; margin: auto; }
|
||||
.gallery-item { text-align: center; }
|
||||
.gallery img { object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; display:block; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 100%; border-radius: 10px; }
|
||||
.lightbox:target { display: flex; }
|
||||
.close { position: absolute; top: 20%; right: 10%; font-size: 30px; color: white; text-decoration: none; display: none;}
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
@ -52,7 +88,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Classic</a></li>
|
||||
@ -63,70 +99,82 @@
|
||||
<h1 class="title has-text-centered has-text-dark">Classic Balloon Décor</h1>
|
||||
<div class="gallery">
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox1"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch"></figure></a>
|
||||
<div class="caption">20' Classic Arch</div>
|
||||
<figure class="image is-square">
|
||||
<img src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch" data-target="modal1" aria-haspopup="true">
|
||||
</figure>
|
||||
<p class="caption">20' Classic Arch</p>
|
||||
</div>
|
||||
<div class="modal" id="modal1">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">20' Classic Arch</p>
|
||||
<button class="delete" aria-label="close" data-action="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<img class="modal-image" src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch">
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox2"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241116_194051.webp" alt="Column with Custom Vinyl and a Bouquet"></figure></a>
|
||||
<div class="caption">Column with Custom Vinyl and a Bouquet</div>
|
||||
<figure class="image is-square">
|
||||
<img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns" data-target="modal2" aria-haspopup="true">
|
||||
</figure>
|
||||
<p class="caption">Classic Columns</p>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox3"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241123_094218.webp" alt="Classic 25' Arch"></figure></a>
|
||||
<div class="caption">Classic 25' Arch</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox4"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241231_171144.webp" alt="Ceiling Fill"></figure></a>
|
||||
<div class="caption">Ceiling Fill</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox5"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20250129_121605.webp" alt="Classic Columns"></figure></a>
|
||||
<div class="caption">Classic Columns</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox6"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20250129_121638.webp" alt="
|
||||
Classic 20' Arch with SIgnature Arrangement"></figure></a>
|
||||
<div class="caption">
|
||||
Classic 20' Arch with SIgnature Arrangement</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox7"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns"></figure></a>
|
||||
<div class="caption">Classic Columns</div>
|
||||
<div class="modal" id="modal2">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Classic Columns</p>
|
||||
<button class="delete" aria-label="close" data-action="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<img class="modal-image" src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns">
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="lightbox1" class="lightbox">
|
||||
<a href="#lightbox1"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">20' Classic Arch</p>
|
||||
</div>
|
||||
<div id="lightbox2" class="lightbox">
|
||||
<a href="#lightbox2"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241116_194051.webp" alt="Column with Custom Vinyl and a Bouquet"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">Column with Custom Vinyl and a Bouquet</p>
|
||||
</div>
|
||||
<div id="lightbox3" class="lightbox">
|
||||
<a href="#lightbox3"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241123_094218.webp" alt="Classic 25' Arch"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">Classic 25' Arch</p>
|
||||
</div>
|
||||
<div id="lightbox4" class="lightbox">
|
||||
<a href="#lightbox4"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241231_171144.webp" alt="Ceiling Fill"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">Ceiling Fill</p>
|
||||
</div>
|
||||
<div id="lightbox5" class="lightbox">
|
||||
<a href="#lightbox5"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20250129_121605.webp" alt="Classic Columns"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">Classic Columns</p>
|
||||
</div>
|
||||
<div id="lightbox6" class="lightbox">
|
||||
<a href="#lightbox6"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20250129_121638.webp" alt="
|
||||
Classic 20' Arch with SIgnature Arrangement"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">
|
||||
Classic 20' Arch with SIgnature Arrangement</p>
|
||||
</div>
|
||||
<div id="lightbox7" class="lightbox">
|
||||
<a href="#lightbox7"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">Classic Columns</p>
|
||||
</div>
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
@ -145,6 +193,5 @@ Classic 20' Arch with SIgnature Arrangement</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../../script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Directory where images are stored
|
||||
# Directory where images are stored (Quote it!)
|
||||
IMAGE_DIR="../../assets/pics/gallery/classic"
|
||||
OUTPUT_FILE="index.html"
|
||||
# Output file (Quote it!)
|
||||
OUTPUT_FILE="./index.html" # Or specify the full path: /path/to/your/file/index.html
|
||||
|
||||
# Ensure the images directory exists
|
||||
if [ ! -d "$IMAGE_DIR" ]; then
|
||||
@ -10,48 +11,86 @@ if [ ! -d "$IMAGE_DIR" ]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Start writing the HTML file
|
||||
# Start writing the HTML file (Redirect to the quoted variable)
|
||||
cat > "$OUTPUT_FILE" <<EOL
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/favicon/site.webmanifest">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<title>Beach Party Balloons</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<style>
|
||||
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; padding: 20px; max-width: 1200px; margin: auto; }
|
||||
.gallery-item { text-align: center; }
|
||||
.gallery img { object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; display:block; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 100%; border-radius: 10px; }
|
||||
.lightbox:target { display: flex; }
|
||||
.close { position: absolute; top: 20%; right: 10%; font-size: 30px; color: white; text-decoration: none; display: none;}
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
@ -64,7 +103,7 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Classic</a></li>
|
||||
@ -76,75 +115,105 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
<div class="gallery">
|
||||
EOL
|
||||
|
||||
# Add images dynamically with captions
|
||||
count=1
|
||||
for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
|
||||
if [[ -f "$img" ]]; then
|
||||
filename=$(basename "$img")
|
||||
caption_file="${img%.*}.txt"
|
||||
|
||||
# Read caption if available, otherwise use default
|
||||
|
||||
if [[ -f "$caption_file" ]]; then
|
||||
caption=$(cat "$caption_file")
|
||||
else
|
||||
caption=""
|
||||
fi
|
||||
|
||||
echo " <div class=\"gallery-item\">" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#lightbox$count\"><figure class=\"image is-square\"> <img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></figure></a>" >> "$OUTPUT_FILE"
|
||||
echo " <div class=\"caption\">$caption</div>" >> "$OUTPUT_FILE"
|
||||
echo " </div>" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"gallery-item\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <figure class=\"image is-square\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <img src=\"%s\" alt=\"%s\" data-target=\"modal%d\" aria-haspopup=\"true\">\n" "$IMAGE_DIR/$filename" "$caption" "$count" >> "$OUTPUT_FILE"
|
||||
printf " </figure>\n" >> "$OUTPUT_FILE"
|
||||
printf " <p class=\"caption\">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
|
||||
# Modal structure
|
||||
printf " <div class=\"modal\" id=\"modal%d\">\n" "$count" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"modal-background\"></div>\n" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"modal-card\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <header class=\"modal-card-head\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <p class=\"modal-card-title\">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " <button class=\"delete\" aria-label=\"close\" data-action=\"close\"></button>\n" >> "$OUTPUT_FILE"
|
||||
printf " </header>\n" >> "$OUTPUT_FILE"
|
||||
printf " <section class=\"modal-card-body\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <img class=\"modal-image\" src=\"%s\" alt=\"%s\">\n" "$IMAGE_DIR/$filename" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " </section>\n" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
|
||||
count=$((count+1))
|
||||
fi
|
||||
done
|
||||
|
||||
# Add closing tags for the gallery
|
||||
cat >> "$OUTPUT_FILE" <<EOL
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
EOL
|
||||
|
||||
# Add lightbox overlays with captions
|
||||
count=1
|
||||
for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
|
||||
if [[ -f "$img" ]]; then
|
||||
filename=$(basename "$img")
|
||||
caption_file="${img%.*}.txt"
|
||||
|
||||
if [[ -f "$caption_file" ]]; then
|
||||
caption=$(cat "$caption_file")
|
||||
else
|
||||
caption=""
|
||||
fi
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
echo " <div id=\"lightbox$count\" class=\"lightbox\">" >> "$OUTPUT_FILE"
|
||||
# echo " <a href=\"#\" class=\"close\">×</a>" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#lightbox$count\"> <figure class=\"image is-square\"> <img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></figure></a>" >> "$OUTPUT_FILE"
|
||||
echo " <br/><p class=\"caption\" style=\"color: black; text-align: center; margin-top: 10px; padding: 10px;\">$caption</p>" >> "$OUTPUT_FILE"
|
||||
echo " </div>" >> "$OUTPUT_FILE"
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
count=$((count+1))
|
||||
fi
|
||||
done
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
# Finish the HTML file
|
||||
cat >> "$OUTPUT_FILE" <<EOL
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.facebook.com/beachpartyballoons"><i class="fa-brands fa-facebook-f is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.instagram.com/beachpartyballoons/"><i class="fa-brands fa-instagram is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://bsky.app/profile/beachpartyballoons.bsky.social">
|
||||
<i class="fa-brands fa-bluesky is-size-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="footer"></div>
|
||||
<script src="../../script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
EOL
|
||||
|
||||
echo "Gallery generated with captions! Open $OUTPUT_FILE in your browser."
|
||||
|
||||
echo "Gallery generated with Bulma modals! Open $OUTPUT_FILE in your browser."
|
||||
@ -1,45 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/favicon/site.webmanifest">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<title>Beach Party Balloons</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<style>
|
||||
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; padding: 20px; max-width: 1200px; margin: auto; }
|
||||
.gallery-item { text-align: center; }
|
||||
.gallery img { object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }
|
||||
.lightbox:target { display: flex; }
|
||||
.close { position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; text-decoration: none; }
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
@ -52,7 +88,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Organic</a></li>
|
||||
@ -63,28 +99,82 @@
|
||||
<h1 class="title has-text-centered has-text-dark">Organic Balloon Décor</h1>
|
||||
<div class="gallery">
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox1"> <figure class="image is-square"> <img src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt=""></figure></a>
|
||||
<figure class="image is-square">
|
||||
<img src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="" data-target="modal1" aria-haspopup="true">
|
||||
</figure>
|
||||
<p class="caption"></p>
|
||||
</div>
|
||||
<div class="modal" id="modal1">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title"></p>
|
||||
<button class="delete" aria-label="close" data-action="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<img class="modal-image" src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="">
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox2"> <figure class="image is-square"> <img src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt=""></figure></a>
|
||||
<figure class="image is-square">
|
||||
<img src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="" data-target="modal2" aria-haspopup="true">
|
||||
</figure>
|
||||
<p class="caption"></p>
|
||||
</div>
|
||||
<div class="modal" id="modal2">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title"></p>
|
||||
<button class="delete" aria-label="close" data-action="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<img class="modal-image" src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="">
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="lightbox1" class="lightbox">
|
||||
<a href="#" class="close">×</a>
|
||||
<img class=image is-square src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="">
|
||||
<p class="caption" style="color:black; text-align: center; margin-top: 10px;"></p>
|
||||
</div>
|
||||
<div id="lightbox2" class="lightbox">
|
||||
<a href="#" class="close">×</a>
|
||||
<img class=image is-square src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="">
|
||||
<p class="caption" style="color:black; text-align: center; margin-top: 10px;"></p>
|
||||
</div>
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
@ -103,6 +193,5 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../../script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Directory where images are stored
|
||||
# Directory where images are stored (Quote it!)
|
||||
IMAGE_DIR="../../assets/pics/gallery/organic"
|
||||
OUTPUT_FILE="index.html"
|
||||
# Output file (Quote it!)
|
||||
OUTPUT_FILE="./index.html" # Or specify the full path: /path/to/your/file/index.html
|
||||
|
||||
# Ensure the images directory exists
|
||||
if [ ! -d "$IMAGE_DIR" ]; then
|
||||
@ -10,48 +11,86 @@ if [ ! -d "$IMAGE_DIR" ]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Start writing the HTML file
|
||||
# Start writing the HTML file (Redirect to the quoted variable)
|
||||
cat > "$OUTPUT_FILE" <<EOL
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/favicon/site.webmanifest">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<title>Beach Party Balloons</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<style>
|
||||
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; padding: 20px; max-width: 1200px; margin: auto; }
|
||||
.gallery-item { text-align: center; }
|
||||
.gallery img { object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }
|
||||
.lightbox:target { display: flex; }
|
||||
.close { position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; text-decoration: none; }
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
@ -64,7 +103,7 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Organic</a></li>
|
||||
@ -76,75 +115,105 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
<div class="gallery">
|
||||
EOL
|
||||
|
||||
# Add images dynamically with captions
|
||||
count=1
|
||||
for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
|
||||
if [[ -f "$img" ]]; then
|
||||
filename=$(basename "$img")
|
||||
caption_file="${img%.*}.txt"
|
||||
|
||||
# Read caption if available, otherwise use default
|
||||
|
||||
if [[ -f "$caption_file" ]]; then
|
||||
caption=$(cat "$caption_file")
|
||||
else
|
||||
caption=""
|
||||
fi
|
||||
|
||||
echo " <div class=\"gallery-item\">" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#lightbox$count\"> <figure class=\"image is-square\"> <img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></figure></a>" >> "$OUTPUT_FILE"
|
||||
echo " <p class=\"caption\">$caption</p>" >> "$OUTPUT_FILE"
|
||||
echo " </div>" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"gallery-item\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <figure class=\"image is-square\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <img src=\"%s\" alt=\"%s\" data-target=\"modal%d\" aria-haspopup=\"true\">\n" "$IMAGE_DIR/$filename" "$caption" "$count" >> "$OUTPUT_FILE"
|
||||
printf " </figure>\n" >> "$OUTPUT_FILE"
|
||||
printf " <p class=\"caption\">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
|
||||
# Modal structure
|
||||
printf " <div class=\"modal\" id=\"modal%d\">\n" "$count" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"modal-background\"></div>\n" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"modal-card\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <header class=\"modal-card-head\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <p class=\"modal-card-title\">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " <button class=\"delete\" aria-label=\"close\" data-action=\"close\"></button>\n" >> "$OUTPUT_FILE"
|
||||
printf " </header>\n" >> "$OUTPUT_FILE"
|
||||
printf " <section class=\"modal-card-body\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <img class=\"modal-image\" src=\"%s\" alt=\"%s\">\n" "$IMAGE_DIR/$filename" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " </section>\n" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
|
||||
count=$((count+1))
|
||||
fi
|
||||
done
|
||||
|
||||
# Add closing tags for the gallery
|
||||
cat >> "$OUTPUT_FILE" <<EOL
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
EOL
|
||||
|
||||
# Add lightbox overlays with captions
|
||||
count=1
|
||||
for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
|
||||
if [[ -f "$img" ]]; then
|
||||
filename=$(basename "$img")
|
||||
caption_file="${img%.*}.txt"
|
||||
|
||||
if [[ -f "$caption_file" ]]; then
|
||||
caption=$(cat "$caption_file")
|
||||
else
|
||||
caption=""
|
||||
fi
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
echo " <div id=\"lightbox$count\" class=\"lightbox\">" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#\" class=\"close\">×</a>" >> "$OUTPUT_FILE"
|
||||
echo " <img class="image is-square" src=\"$IMAGE_DIR/$filename\" alt=\"$caption\">" >> "$OUTPUT_FILE"
|
||||
echo " <p class=\"caption\" style=\"color:black; text-align: center; margin-top: 10px;\">$caption</p>" >> "$OUTPUT_FILE"
|
||||
echo " </div>" >> "$OUTPUT_FILE"
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
count=$((count+1))
|
||||
fi
|
||||
done
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
# Finish the HTML file
|
||||
cat >> "$OUTPUT_FILE" <<EOL
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.facebook.com/beachpartyballoons"><i class="fa-brands fa-facebook-f is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.instagram.com/beachpartyballoons/"><i class="fa-brands fa-instagram is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://bsky.app/profile/beachpartyballoons.bsky.social">
|
||||
<i class="fa-brands fa-bluesky is-size-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="footer"></div>
|
||||
<script src="../../script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
EOL
|
||||
|
||||
echo "Gallery generated with captions! Open $OUTPUT_FILE in your browser."
|
||||
|
||||
echo "Gallery generated with Bulma modals! Open $OUTPUT_FILE in your browser."
|
||||
@ -1,45 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/favicon/site.webmanifest">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<title>Beach Party Balloons</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<style>
|
||||
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; padding: 20px; max-width: 1200px; margin: auto; }
|
||||
.gallery-item { text-align: center; }
|
||||
.gallery img { object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }
|
||||
.lightbox:target { display: flex; }
|
||||
.close { position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; text-decoration: none; }
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
@ -52,21 +88,57 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Sculpture</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Sculptures and Themes</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered has-text-dark">Sculptures and Themes</h1>
|
||||
<h1 class="title has-text-centered has-text-dark">Sculptures and Themes<</h1>
|
||||
<div class="gallery">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
@ -85,6 +157,5 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../../script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Directory where images are stored
|
||||
# Directory where images are stored (Quote it!)
|
||||
IMAGE_DIR="../../assets/pics/gallery/sculpture"
|
||||
OUTPUT_FILE="index.html"
|
||||
# Output file (Quote it!)
|
||||
OUTPUT_FILE="./index.html" # Or specify the full path: /path/to/your/file/index.html
|
||||
|
||||
# Ensure the images directory exists
|
||||
if [ ! -d "$IMAGE_DIR" ]; then
|
||||
@ -10,48 +11,86 @@ if [ ! -d "$IMAGE_DIR" ]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Start writing the HTML file
|
||||
# Start writing the HTML file (Redirect to the quoted variable)
|
||||
cat > "$OUTPUT_FILE" <<EOL
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/favicon/site.webmanifest">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Beach Party Balloons - Gallery</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<title>Beach Party Balloons</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<style>
|
||||
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; padding: 20px; max-width: 1200px; margin: auto; }
|
||||
.gallery-item { text-align: center; }
|
||||
.gallery img { object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }
|
||||
.lightbox:target { display: flex; }
|
||||
.close { position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; text-decoration: none; }
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer; /* Make images clickable */
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
color: #4a4a4a;
|
||||
font-family: 'Autour One', cursive;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
max-height: 95vh;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modal-card-title {
|
||||
font-family: 'Autour One', cursive;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand is-size-1">
|
||||
<a class="navbar-item" href="../../index.html">
|
||||
<img style="background-color: white;" src="../../assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
|
||||
</a>
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||
<div class="navbar-end">
|
||||
@ -64,87 +103,117 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="../index.html">Gallery</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Sculpture</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Sculptures and Themes</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered has-text-dark">Sculptures and Themes</h1>
|
||||
<h1 class="title has-text-centered has-text-dark">Sculptures and Themes<</h1>
|
||||
<div class="gallery">
|
||||
EOL
|
||||
|
||||
# Add images dynamically with captions
|
||||
count=1
|
||||
for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
|
||||
if [[ -f "$img" ]]; then
|
||||
filename=$(basename "$img")
|
||||
caption_file="${img%.*}.txt"
|
||||
|
||||
# Read caption if available, otherwise use default
|
||||
|
||||
if [[ -f "$caption_file" ]]; then
|
||||
caption=$(cat "$caption_file")
|
||||
else
|
||||
caption=""
|
||||
fi
|
||||
|
||||
echo " <div class=\"gallery-item\">" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#lightbox$count\"> <figure class=\"image is-square\"> <img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></figure></a>" >> "$OUTPUT_FILE"
|
||||
echo " <p class=\"caption\">$caption</p>" >> "$OUTPUT_FILE"
|
||||
echo " </div>" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"gallery-item\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <figure class=\"image is-square\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <img src=\"%s\" alt=\"%s\" data-target=\"modal%d\" aria-haspopup=\"true\">\n" "$IMAGE_DIR/$filename" "$caption" "$count" >> "$OUTPUT_FILE"
|
||||
printf " </figure>\n" >> "$OUTPUT_FILE"
|
||||
printf " <p class=\"caption\">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
|
||||
# Modal structure
|
||||
printf " <div class=\"modal\" id=\"modal%d\">\n" "$count" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"modal-background\"></div>\n" >> "$OUTPUT_FILE"
|
||||
printf " <div class=\"modal-card\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <header class=\"modal-card-head\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <p class=\"modal-card-title\">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " <button class=\"delete\" aria-label=\"close\" data-action=\"close\"></button>\n" >> "$OUTPUT_FILE"
|
||||
printf " </header>\n" >> "$OUTPUT_FILE"
|
||||
printf " <section class=\"modal-card-body\">\n" >> "$OUTPUT_FILE"
|
||||
printf " <img class=\"modal-image\" src=\"%s\" alt=\"%s\">\n" "$IMAGE_DIR/$filename" "$caption" >> "$OUTPUT_FILE"
|
||||
printf " </section>\n" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
printf " </div>\n" >> "$OUTPUT_FILE"
|
||||
|
||||
count=$((count+1))
|
||||
fi
|
||||
done
|
||||
|
||||
# Add closing tags for the gallery
|
||||
cat >> "$OUTPUT_FILE" <<EOL
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
EOL
|
||||
|
||||
# Add lightbox overlays with captions
|
||||
count=1
|
||||
for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
|
||||
if [[ -f "$img" ]]; then
|
||||
filename=$(basename "$img")
|
||||
caption_file="${img%.*}.txt"
|
||||
|
||||
if [[ -f "$caption_file" ]]; then
|
||||
caption=$(cat "$caption_file")
|
||||
else
|
||||
caption=""
|
||||
fi
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
echo " <div id=\"lightbox$count\" class=\"lightbox\">" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#\" class=\"close\">×</a>" >> "$OUTPUT_FILE"
|
||||
echo " <img class="image is-square" src=\"$IMAGE_DIR/$filename\" alt=\"$caption\">" >> "$OUTPUT_FILE"
|
||||
echo " <div><p class=\"caption\" style=\"color: black; text-align: center; margin-top: 10px;\">$caption</p></div>" >> "$OUTPUT_FILE"
|
||||
echo " </div>" >> "$OUTPUT_FILE"
|
||||
function closeModal(modal) {
|
||||
modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
count=$((count+1))
|
||||
fi
|
||||
done
|
||||
const images = document.querySelectorAll('.gallery img');
|
||||
images.forEach(image => {
|
||||
image.addEventListener('click', () => {
|
||||
const targetModal = image.dataset.target;
|
||||
openModal(targetModal);
|
||||
});
|
||||
});
|
||||
|
||||
# Finish the HTML file
|
||||
cat >> "$OUTPUT_FILE" <<EOL
|
||||
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const modal = button.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
const modalBackgrounds = document.querySelectorAll('.modal-background');
|
||||
modalBackgrounds.forEach(background => {
|
||||
background.addEventListener('click', () => {
|
||||
const modal = background.closest('.modal');
|
||||
closeModal(modal);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<div>
|
||||
<a target="_blank" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.facebook.com/beachpartyballoons"><i class="fa-brands fa-facebook-f is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.instagram.com/beachpartyballoons/"><i class="fa-brands fa-instagram is-size-2"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://bsky.app/profile/beachpartyballoons.bsky.social">
|
||||
<i class="fa-brands fa-bluesky is-size-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="footer"></div>
|
||||
<script src="../../script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
EOL
|
||||
|
||||
echo "Gallery generated with captions! Open $OUTPUT_FILE in your browser."
|
||||
|
||||
echo "Gallery generated with Bulma modals! Open $OUTPUT_FILE in your browser."
|
||||
@ -26,6 +26,9 @@
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
max-width: max-content;
|
||||
border-radius: 2%;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
h1{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user