Widget:SlidingGallerySewing: Difference between revisions

From sandbox
Jump to navigation Jump to search
← Older editNewer edit →
Gfc (talk | contribs)
Bureaucrats, sandbox-editors, Administrators, Widget editors
2,219 edits
No edit summary
Tag: Reverted
Gfc (talk | contribs)
Bureaucrats, sandbox-editors, Administrators, Widget editors
2,219 edits
No edit summary
Tag: Reverted
Line 115: Line 115:


<style>
<style>
/* Override the animation block to let JavaScript control the width and loop */
/* Clean override to let JavaScript control the sliding loop metrics */
.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 {
.wrapper {
   width: max-content !important;
   width: max-content !important;
Line 140: Line 124:
<script>
<script>
(function() {
(function() {
   // Find the scrolling row track container
   // Find the scrolling layout track row
   var track = document.querySelector('.wrapper');
   var track = document.querySelector('.wrapper');
   if (!track) return;
   if (!track) return;
Line 146: Line 130:
   // 1. Grab all your unique items cleanly
   // 1. Grab all your unique items cleanly
   var originalItems = Array.prototype.slice.call(track.getElementsByClassName('gallery-item'));
   var originalItems = Array.prototype.slice.call(track.getElementsByClassName('gallery-item'));
  if (originalItems.length === 0) return;
   var totalItemsCount = originalItems.length;
 
   if (totalItemsCount === 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;
   /* 2. FIXED STEP ENGINE:
   var fullStepWidth = itemWidth + gapValue;
    Uses your exact CSS parameters: Card width (160px) + Gap space (20px) = 180px per step! */
   var totalOriginalWidth = originalItems.length * fullStepWidth;
   var fullStepWidth = 180;  
   var totalOriginalWidth = totalItemsCount * fullStepWidth;


   // 3. Smart Looper: Clone just enough items to fill the viewable viewport container limit safely (742px)
   // 3. Smart Looper: Clone just enough items to fill the viewable viewport frame area (742px)
   var clonesNeeded = Math.ceil(742 / fullStepWidth) + 1;
   var clonesNeeded = Math.ceil(742 / fullStepWidth) + 1;


   for (var i = 0; i < clonesNeeded; i++) {
   for (var i = 0; i < clonesNeeded; i++) {
     var cloneIndex = i % originalItems.length;
     var cloneIndex = i % totalItemsCount;
     var clonedNode = originalItems[cloneIndex].cloneNode(true);
     var clonedNode = originalItems[cloneIndex].cloneNode(true);
     track.appendChild(clonedNode);
     track.appendChild(clonedNode);
   }
   }


   // 4. Dynamically append loop keyframes cleanly right into the header of your document layout
   // 4. Inject the loop transition keyframes directly into the header layout
   var styleSheet = document.createElement("style");
   var styleSheet = document.createElement("style");
   styleSheet.type = "text/css";
   styleSheet.type = "text/css";

Revision as of 22:50, 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> 

         <a href="/wiki/Singer_HD_4432">
           <img src="/wiki/images/thumb/e/e1/Singer_HD-1_4452.jpg/600px-Singer_HD-1_4452.jpg?20250616215327" alt="Singer HD 4432">
         </a>
Singer HD 4432
Basic sewing machine
         <a href="/wiki/Singer_Simple_3232">
           <img src="/wiki/images/thumb/0/08/Singer_Simple.jpg/800px-Singer_Simple.jpg?20191223184102" alt="Singer Simple 3232">
         </a>
Singer Simple 3232
Starter sewing machine
         <a href="/wiki/Janome_HD-3000BE">
           <img src="/wiki/images/thumb/0/01/Janome_HD-3000BE.jpeg/400px-Janome_HD-3000BE.jpeg" alt="Janome HD-3000BE">
         </a>
Janome HD-3000BE
Intermediate Home Sewing Machine
         <a href="/wiki/Bernina_model_1000">
           <img src="/wiki/images/thumb/f/f9/Bernina1008.png/400px-Bernina1008.png" alt="Bernina model 1008">
         </a>
Bernina model 1008
Intermediate Home Sewing Machine
         <a href="/wiki/Brother_1034DX">
           <img src="/wiki/images/3/3e/Brother-1034DX-Serger.jpeg?20261015223103" alt="Brother 1034DX">
         </a>
Brother 1034DX
Serger
         <a href="/wiki/Brother_PE770">
           <img src="/wiki/images/8/8d/BrotherPE770.jpg" alt="Brother PE770">
         </a>
Brother PE770
Embroidery machine


<style> /* Clean override to let JavaScript control the sliding loop metrics */ .wrapper { 

 width: max-content !important;
 animation: none !important;

} </style>

<script> (function() { 

 // Find the scrolling layout track row
 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'));
 var totalItemsCount = originalItems.length;
 if (totalItemsCount === 0) return;

 /* 2. FIXED STEP ENGINE: 
    Uses your exact CSS parameters: Card width (160px) + Gap space (20px) = 180px per step! */
 var fullStepWidth = 180; 
 var totalOriginalWidth = totalItemsCount * fullStepWidth;

 // 3. Smart Looper: Clone just enough items to fill the viewable viewport frame area (742px)
 var clonesNeeded = Math.ceil(742 / fullStepWidth) + 1;

 for (var i = 0; i < clonesNeeded; i++) {
   var cloneIndex = i % totalItemsCount;
   var clonedNode = originalItems[cloneIndex].cloneNode(true);
   track.appendChild(clonedNode);
 }

 // 4. Inject the loop transition keyframes directly into the header 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>

Retrieved from "https://sandbox.umd.edu/wiki/index.php?title=Widget:SlidingGallerySewing&oldid=3410"