simon/luxury-detailing-maine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates to reviews and new services

Browse Source
This commit is contained in:
sotrali
2026-01-04 17:30:39 -05:00
parent dd5efd0b36
commit 852185cf29
2 changed files with 79 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
reviews.html
+62 -42
View File
@@ -241,44 +241,20 @@
<script>
/** script stuff just for this page */
// on page init
/**
* PAGE INITIALIZATION
*/
window.onload = function () {
// first, insert all reviews into the page
insertReviews(reviewData);
window.addEventListener("scroll", jiggleGallery);
window.addEventListener("resize", manageImageSize);
manageImageSize();
// set listener to jiggle gallery sliders
window.addEventListener("scroll", jiggleGallerySliders);
// set listener for overriding gallery resize logic
window.addEventListener("resize", setImageSizes);
// initialize gallery image sizes by feigning resize upon init
setImageSizes();
};
function manageImageSize() {
let isDesktop = window.innerWidth > 850;
let newWidth, newHeight;
if (isDesktop) {
newWidth = window.innerWidth * 0.40;
newHeight = newWidth * 1.2;
}
else {
newWidth = window.innerWidth * 0.80;
newHeight = newWidth * 1.2;
}
// resize iframes
let images = document.getElementsByClassName("juxtapose");
for (let i = 0; i < images.length; i++) {
images[i].style.width = newWidth + 'px';
images[i].style.height = newHeight + 'px';
}
// resize images in iframe to match
images = document.getElementsByClassName("jx-image");
for (let i = 0; i < images.length; i++) {
images[i].style.width = newWidth + 'px';
images[i].style.height = newHeight + 'px';
images[i].children[0].style.width = newWidth + 'px';
images[i].children[0].style.height = newHeight + 'px';
}
}
/** review insertion **/
let reviewData = [
{
@@ -345,30 +321,74 @@
}
}
/** gallery jiggling (indicate to user they can use slider) */
/** gallery jiggling (indicate to user they can slide images for comparison) */
let jiggled = false;
async function jiggleGallery() {
if (window.scrollY < 850 || jiggled) return;
async function jiggleGallerySliders() {
let jiggleThreshold = document.getElementById("reviews").offsetHeight + 25;
console.log('jiggle trheshold: ' + jiggleThreshold);
console.log('current pos: ' + window.scrollY);
// once user scrolls to gallery, change sliders on all images
// ensure jiggle only triggers once, upon gallery scrolling into view
if (window.scrollY < jiggleThreshold || jiggled) return;
// once user scrolls to gallery, move sliders on all images up a bit
let sliders = juxtapose.sliders;
for (let i = 0; i < sliders.length; i++) {
sliders[i].updateSlider(65, true);
sliders[i].updateSlider(60, true);
}
// sleep, then slide again
// sleep, then slide them all down,
await new Promise(resolve => setTimeout(resolve, 1000));
for (let i = 0; i < sliders.length; i++) {
sliders[i].updateSlider(35, true);
sliders[i].updateSlider(40, true);
}
// sleep, then slide back to center
// sleep, then reset sliders back to center
await new Promise(resolve => setTimeout(resolve, 1000));
for (let i = 0; i < sliders.length; i++) {
sliders[i].updateSlider(50, true);
}
jiggled = true;
}
/** override logic for 'juxtapose' image scaling based on window size changes */
function setImageSizes() {
let isDesktop = window.innerWidth > 850;
let newWidth, newHeight;
if (isDesktop) {
newWidth = window.innerWidth * 0.40;
}
else {
newWidth = window.innerWidth * 0.80;
}
// keep all images at 1:1.2 ratio
newHeight = newWidth * 1.2;
// resize iframes
let images = document.getElementsByClassName("juxtapose");
for (let i = 0; i < images.length; i++) {
images[i].style.width = newWidth + 'px';
images[i].style.height = newHeight + 'px';
}
// resize images in iframe to match
images = document.getElementsByClassName("jx-image");
for (let i = 0; i < images.length; i++) {
images[i].style.width = newWidth + 'px';
images[i].style.height = newHeight + 'px';
images[i].children[0].style.width = newWidth + 'px';
images[i].children[0].style.height = newHeight + 'px';
}
let sliders = juxtapose.sliders;
for (let i = 0; i < sliders.length; i++) {
sliders[i].updateSlider(sliders[i].sliderPosition.replace("%", ""), true);
}
}
</script>
<!-- <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script> -->
services2.html
+17 -5
View File
@@ -31,6 +31,18 @@
margin-top: 2rem;
}
.jumpLink {
border: 1px solid var(--gold);
padding: 1rem;
border-radius: 1rem;
text-decoration: none;
color: var(--gold);
transition: 0.3s ease;
}
.jumpLink:hover {
color: white;
}
#categoryContainer {
width: 90%;
height: 100%;
@@ -162,11 +174,11 @@
<div id="tableOfContents">
<h1>Our Services</h1>
<div id="categoryLinks">
<h2><a href="#packagesJump">Service Packages</a></h2>
<h2><a href="#ceramicJump">Ceramic Coating</a></h2>
<h2><a href="#paintJump">Polish & Paint Correction</a></h2>
<h2><a href="#exteriorJump">Exterior Detailing</a></h2>
<h2><a href="#interiorJump">Interior Detailing</a></h2>
<a href="#packagesJump" class="jumpLink"><h2>Service<br/>Packages</h2></a>
<a href="#ceramicJump" class="jumpLink"><h2>Ceramic<br/>Coating</h2></a>
<a href="#paintJump"><h2>Polish &<br/>Paint Correction</h2></a>
<a href="#exteriorJump"><h2>Exterior<br/>Detailing</h2></a>
<a href="#interiorJump"><h2>Interior<br/>Detailing</h2></a>
</div>
</div>