Widget:SlidingGallerySewing: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 124: | Line 124: | ||
<style> | <style> | ||
/* Override the animation block to let JavaScript control the width and loop */ | /* Override the animation block to let JavaScript control the width and loop */ | ||
.wrapper { | |||
width: max-content !important; | |||
animation: none !important; | |||
} | |||
</style> | |||
<style> | |||
/* Override the baseline animation to give full width control over to the script engine */ | |||
.wrapper { | .wrapper { | ||
width: max-content !important; | width: max-content !important; | ||
| Line 140: | Line 148: | ||
if (originalItems.length === 0) return; | if (originalItems.length === 0) return; | ||
// 2. FIXED: | // 2. FIXED: Target item 0 in the array list to read individual card box structural parameters | ||
var | var firstItem = originalItems[0]; | ||
var itemWidth = firstItem ? firstItem.getBoundingClientRect().width : 160; | |||
if (!itemWidth || itemWidth === 0) itemWidth = 160; // Safe default backup calculation check | |||
var gapValue = 20; | var gapValue = 20; | ||
var fullStepWidth = itemWidth + gapValue; | var fullStepWidth = itemWidth + gapValue; | ||
var totalOriginalWidth = originalItems.length * fullStepWidth; | var totalOriginalWidth = originalItems.length * fullStepWidth; | ||
// 3. Smart Looper: Clone just enough items to fill the viewable viewport | // 3. Smart Looper: Clone just enough items to fill the viewable viewport container limit safely (742px) | ||
var clonesNeeded = Math.ceil(742 / fullStepWidth) + 1; | var clonesNeeded = Math.ceil(742 / fullStepWidth) + 1; | ||
| Line 155: | Line 166: | ||
} | } | ||
// 4. Dynamically | // 4. Dynamically append loop keyframes cleanly right into the header of your document layout | ||
var styleSheet = document.createElement("style"); | var styleSheet = document.createElement("style"); | ||
styleSheet.type = "text/css"; | styleSheet.type = "text/css"; | ||
Revision as of 22:47, 15 October 2026
<style> /* Layout containers matching your original specifications */ .gallery-outer { position: relative; height: 100%; margin: 20px 0; } .gallery-bg { position: relative; margin: 0 -1em; padding: 0; background-color: transparent; border: 1px none #ddd; height: 100%; } .gallery-viewport { position: relative; margin: 0 auto; width: 742px; height: 300px; overflow: hidden; }
/* Sliding engine (Pure CSS - Starts automatically) */ .wrapper {
position: absolute; top: 0; left: 0; display: flex; gap: 20px; width: 300px; /* Generous width for the moving track */ animation: 45s credits linear infinite;
}
/* ⏸️ PAUSE ANIMATION ON HOVER */ .wrapper:hover {
animation-play-state: paused;
}
.gallery-item {
display: inline-block; text-align: center; width: 160px; flex-shrink: 0;
}
.gallery-item img {
width: 120px; height: 180px; object-fit: contain; transition: transform 0.3s ease;
}
/* 🔍 ENLARGE IMAGE ON HOVER */ .gallery-item img:hover {
transform: scale(1.15); cursor: pointer;
}
.gallery-caption {
font-size: 0.85em; color: #333; margin-top: 8px; line-height: 1.3;
}
@keyframes credits {
0% { transform: translateX(0); }
100% { transform: translateX(-1620px); } /* Perfect loop reset point based on total item widths */
} </style>
<style> /* Override the animation block to let JavaScript control the width and loop */ .wrapper {
width: max-content !important; animation: none !important;
} </style>
<style> /* Override the animation block to let JavaScript control the width and loop */ .wrapper {
width: max-content !important; animation: none !important;
} </style>
<style> /* Override the baseline animation to give full width control over to the script engine */ .wrapper {
width: max-content !important; animation: none !important;
} </style>
<script> (function() {
// Find the scrolling row track container
var track = document.querySelector('.wrapper');
if (!track) return;
// 1. Grab all your unique items cleanly
var originalItems = Array.prototype.slice.call(track.getElementsByClassName('gallery-item'));
if (originalItems.length === 0) return;
// 2. FIXED: Target item 0 in the array list to read individual card box structural parameters var firstItem = originalItems[0]; var itemWidth = firstItem ? firstItem.getBoundingClientRect().width : 160; if (!itemWidth || itemWidth === 0) itemWidth = 160; // Safe default backup calculation check
var gapValue = 20; var fullStepWidth = itemWidth + gapValue; var totalOriginalWidth = originalItems.length * fullStepWidth;
// 3. Smart Looper: Clone just enough items to fill the viewable viewport container limit safely (742px) var clonesNeeded = Math.ceil(742 / fullStepWidth) + 1;
for (var i = 0; i < clonesNeeded; i++) {
var cloneIndex = i % originalItems.length;
var clonedNode = originalItems[cloneIndex].cloneNode(true);
track.appendChild(clonedNode);
}
// 4. Dynamically append loop keyframes cleanly right into the header of your document layout
var styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText =
"@keyframes dynamicCredits {" +
" 0% { transform: translateX(0); }" +
" 100% { transform: translateX(-" + totalOriginalWidth + "px); }" +
"}\n" +
".wrapper { animation: 45s dynamicCredits linear infinite !important; }";
document.head.appendChild(styleSheet);
})(); </script>