Widget:SlidingGallerySewing: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Manual revert |
No edit summary |
||
| Line 107: | Line 107: | ||
</div> | </div> | ||
<!-- ITEM 1: Singer Heavy Duty --> | |||
<div class="gallery-item"> | |||
<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> | |||
<div class="gallery-caption">Singer HD 4432<br><b>Basic sewing machine</b></div> | |||
</div> | |||
<!-- ITEM 2: Singer Simple --> | |||
<div class="gallery-item"> | |||
<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> | |||
<div class="gallery-caption">Singer Simple 3232<br><b>Starter sewing machine</b></div> | |||
</div> | |||
<!-- ITEM 3: Janome (Follows the same FilePath pattern) --> | |||
<div class="gallery-item"> | |||
<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> | |||
<div class="gallery-caption">Janome HD-3000BE<br><b>Intermediate Home Sewing Machine</b></div> | |||
</div> | |||
<!-- ITEM 4: Bernina --> | |||
<div class="gallery-item"> | |||
<a href="/wiki/Bernina_model_1000"> | |||
<img src="/wiki/images/thumb/f/f9/Bernina1008.png/400px-Bernina1008.png" alt="Bernina model 1008"> | |||
</a> | |||
<div class="gallery-caption">Bernina model 1008<br><b>Intermediate Home Sewing Machine</b></div> | |||
</div> | |||
<!-- ITEM 5: Brother Serger --> | |||
<div class="gallery-item"> | |||
<a href="/wiki/Brother_1034DX"> | |||
<img src="/wiki/images/3/3e/Brother-1034DX-Serger.jpeg?20261015223103" alt="Brother 1034DX"> | |||
</a> | |||
<div class="gallery-caption">Brother 1034DX<br><b>Serger</b></div> | |||
</div> | |||
<!-- ITEM 6: Brother Embroidery --> | |||
<div class="gallery-item"> | |||
<a href="/wiki/Brother_PE770"> | |||
<img src="/wiki/images/8/8d/BrotherPE770.jpg" alt="Brother PE770"> | |||
</a> | |||
<div class="gallery-caption">Brother PE770<br><b>Embroidery machine</b></div> | |||
</div> | |||
Revision as of 22:58, 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>