diff --git a/assets/pics/centerpiece/centerpiece-cover.webp b/assets/pics/centerpiece/centerpiece-cover.webp new file mode 100644 index 0000000..90cfe5f Binary files /dev/null and b/assets/pics/centerpiece/centerpiece-cover.webp differ diff --git a/assets/pics/classic/ceiling.txt b/assets/pics/classic/ceiling.txt new file mode 100644 index 0000000..ba22403 --- /dev/null +++ b/assets/pics/classic/ceiling.txt @@ -0,0 +1 @@ +Ceiling Fill \ No newline at end of file diff --git a/assets/pics/classic/classic-cover.txt b/assets/pics/classic/classic-cover.txt new file mode 100644 index 0000000..dd710dd --- /dev/null +++ b/assets/pics/classic/classic-cover.txt @@ -0,0 +1 @@ +30ft Areopole Arch \ No newline at end of file diff --git a/assets/pics/organic/organic-cover.webp b/assets/pics/organic/organic-cover.webp new file mode 100644 index 0000000..a2f4228 Binary files /dev/null and b/assets/pics/organic/organic-cover.webp differ diff --git a/assets/pics/sculptures/sculpture-cover.webp b/assets/pics/sculptures/sculpture-cover.webp new file mode 100644 index 0000000..031fad6 Binary files /dev/null and b/assets/pics/sculptures/sculpture-cover.webp differ diff --git a/gallery/centerpiece/index.html b/gallery/centerpiece/index.html new file mode 100644 index 0000000..e69de29 diff --git a/gallery/classic.html b/gallery/classic.html new file mode 100644 index 0000000..44422f5 --- /dev/null +++ b/gallery/classic.html @@ -0,0 +1,100 @@ + + + + + + + + + + Beach Party Balloons - Gallery + + + + + + + + + + + +
+
+

Organic

+
+
+ +

+
+
+ +

+
+
+ +

+
+
+
+
+ + + + + + + + + + + diff --git a/gallery/classic/index.html b/gallery/classic/index.html new file mode 100644 index 0000000..e386a9f --- /dev/null +++ b/gallery/classic/index.html @@ -0,0 +1,127 @@ + + + + + + + + + + Beach Party Balloons + + + + + + + + + + + + + +
+
+

Modern Bulma Gallery

+
+ Gallery Image + Gallery Image + Gallery Image + Gallery Image + Gallery Image + Gallery Image +
+
+
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/gallery/index.html b/gallery/index.html index 14e0b5e..35817d3 100644 --- a/gallery/index.html +++ b/gallery/index.html @@ -73,13 +73,14 @@
-

Classic Balloon Décor

+

Classic Balloon Décor

+
- +

Organic Balloon Décor

@@ -89,7 +90,7 @@
- +

Centerpieces

@@ -97,7 +98,7 @@
- +

Sculptures & Themes

diff --git a/gallery/organic/index.html b/gallery/organic/index.html new file mode 100644 index 0000000..e69de29 diff --git a/gallery/sculpture/index.html b/gallery/sculpture/index.html new file mode 100644 index 0000000..e69de29 diff --git a/gallery/updateGallery.sh b/gallery/updateGallery.sh new file mode 100755 index 0000000..213167e --- /dev/null +++ b/gallery/updateGallery.sh @@ -0,0 +1,144 @@ +#!/bin/bash + +# Directory where images are stored +IMAGE_DIR="../assets/pics/organic" +OUTPUT_FILE="classic.html" + +# Ensure the images directory exists +if [ ! -d "$IMAGE_DIR" ]; then + echo "Error: Directory '$IMAGE_DIR' not found!" + exit 1 +fi + +# Start writing the HTML file +cat > "$OUTPUT_FILE" < + + + + + + + + + Beach Party Balloons - Gallery + + + + + + + + + + + +
+
+

Organic

+
+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 "
" >> "$OUTPUT_FILE" + echo " \"$caption\"" >> "$OUTPUT_FILE" + echo "

$caption

" >> "$OUTPUT_FILE" + echo "
" >> "$OUTPUT_FILE" + + count=$((count+1)) + fi +done + +# Add closing tags for the gallery +cat >> "$OUTPUT_FILE" < +
+
+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 + + echo "
" >> "$OUTPUT_FILE" + echo " ×" >> "$OUTPUT_FILE" + echo " \"$caption\"" >> "$OUTPUT_FILE" + echo "

$caption

" >> "$OUTPUT_FILE" + echo "
" >> "$OUTPUT_FILE" + + count=$((count+1)) + fi +done + +# Finish the HTML file +cat >> "$OUTPUT_FILE" < +
+ Copyright © Beach Party Balloons + All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited. +
+ + + + + + + +EOL + +echo "Gallery generated with captions! Open $OUTPUT_FILE in your browser." diff --git a/script.js b/script.js index dd001d6..918e790 100644 --- a/script.js +++ b/script.js @@ -33,3 +33,118 @@ document.addEventListener("load", function () { document.querySelectorAll("formFooter").style.display = "none"; }); + +document.addEventListener("DOMContentLoaded", function () { + // Close lightbox when clicking outside the image + document.querySelectorAll(".lightbox").forEach(function (lightbox) { + lightbox.addEventListener("click", function (event) { + if (event.target === lightbox) { + window.location.hash = ""; // Close lightbox + } + }); + }); + + // Close lightbox when pressing Escape key + document.addEventListener("keydown", function (event) { + if (event.key === "Escape") { + window.location.hash = ""; // Close lightbox + } + }); +}); + + + +document.addEventListener("DOMContentLoaded", function () { + let images = Array.from(document.querySelectorAll(".gallery-item a")); + let lightboxImages = images.map(img => img.getAttribute("href")); + let currentIndex = 0; + + function openLightbox(index) { + currentIndex = index; + let lightbox = document.getElementById("lightbox"); + if (!lightbox) { + lightbox = document.createElement("div"); + lightbox.id = "lightbox"; + lightbox.className = "lightbox"; + lightbox.innerHTML = ` + × + + + `; + document.body.appendChild(lightbox); + } + + let lightboxImg = document.getElementById("lightbox-img"); + let lightboxCaption = document.getElementById("lightbox-caption"); + let caption = images[currentIndex].parentElement.querySelector(".caption").textContent; + + lightboxImg.src = images[currentIndex].querySelector("img").src; + lightboxCaption.textContent = caption; + lightbox.style.display = "flex"; + + document.getElementById("prev").onclick = () => navigateLightbox(-1); + document.getElementById("next").onclick = () => navigateLightbox(1); + } + + function navigateLightbox(direction) { + currentIndex += direction; + if (currentIndex < 0) currentIndex = images.length - 1; + if (currentIndex >= images.length) currentIndex = 0; + + let lightboxImg = document.getElementById("lightbox-img"); + let lightboxCaption = document.getElementById("lightbox-caption"); + + lightboxImg.src = images[currentIndex].querySelector("img").src; + lightboxCaption.textContent = images[currentIndex].parentElement.querySelector(".caption").textContent; + } + + // Open lightbox when clicking a thumbnail + images.forEach((img, index) => { + img.addEventListener("click", (event) => { + event.preventDefault(); + openLightbox(index); + }); + }); + + // Close lightbox when clicking outside the image + document.addEventListener("click", (event) => { + if (event.target.classList.contains("lightbox")) { + document.getElementById("lightbox").style.display = "none"; + } + }); + + // Close lightbox with Escape key, navigate with Left/Right arrows + document.addEventListener("keydown", (event) => { + if (event.key === "Escape") { + document.getElementById("lightbox").style.display = "none"; + } else if (event.key === "ArrowRight") { + navigateLightbox(1); + } else if (event.key === "ArrowLeft") { + navigateLightbox(-1); + } + }); + + // Swipe gestures for mobile + let touchStartX = 0; + let touchEndX = 0; + + document.addEventListener("touchstart", (event) => { + touchStartX = event.changedTouches[0].screenX; + }); + + document.addEventListener("touchend", (event) => { + touchEndX = event.changedTouches[0].screenX; + handleSwipe(); + }); + + function handleSwipe() { + let swipeDistance = touchStartX - touchEndX; + if (swipeDistance > 50) { + navigateLightbox(1); // Swipe left → Next image + } else if (swipeDistance < -50) { + navigateLightbox(-1); // Swipe right → Previous image + } + } +}); + + diff --git a/style.css b/style.css index 205709e..7d9aaf4 100644 --- a/style.css +++ b/style.css @@ -68,6 +68,7 @@ header { position: relative; display: inline-block; width: 100%; + padding: 1rem; } .image-container img {