Widget:SlidingGallery: Difference between revisions
Jump to navigation
Jump to search
Created page with "<style> →Layout containers matching your original specifications: .gallery-outer { position: relative; height: 100%; } .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 (Starts sliding automatically): .wrapper { position: absolute; top: 0; left: 0; displa..." |
No edit summary |
||
| Line 16: | Line 16: | ||
} | } | ||
/* ⏸️ PAUSE ANIMATION ON HOVER | /* ⏸️ PAUSE ANIMATION ON HOVER */ | ||
.wrapper:hover { | .wrapper:hover { | ||
animation-play-state: paused; | animation-play-state: paused; | ||
| Line 34: | Line 34: | ||
} | } | ||
/* 🔍 ENLARGE IMAGE ON HOVER | /* 🔍 ENLARGE IMAGE ON HOVER */ | ||
.gallery-item img:hover { | .gallery-item img:hover { | ||
transform: scale(1.15); | transform: scale(1.15); | ||
| Line 58: | Line 58: | ||
<div class="wrapper"> | <div class="wrapper"> | ||
<!-- | <!-- Correct MediaWiki Widget Loop Syntax --> | ||
{foreach $images | <!-- {foreach from=$images key=index item=img} --> | ||
<div class="gallery-item"> | <div class="gallery-item"> | ||
<a href="/wiki/{$links[$index]|escape:'url'}"> | <a href="/wiki/<!-- {$links[$index]|escape:'url'} -->"> | ||
<img src="/images/{$img|escape:'html'}" alt="{$captions[$index]|escape:'html'}"> | <img src="/images/<!-- {$img|escape:'html'} -->" alt="<!-- {$captions[$index]|escape:'html'} -->"> | ||
</a> | </a> | ||
<div class="gallery-caption">{$captions[$index]}</div> | <div class="gallery-caption"><!-- {$captions[$index]} --></div> | ||
</div> | </div> | ||
{/foreach} | <!-- {/foreach} --> | ||
</div> | </div> | ||
Revision as of 21:00, 15 October 2026
<style> /* Layout containers matching your original specifications */ .gallery-outer { position: relative; height: 100%; } .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 (Starts sliding automatically) */ .wrapper {
position: absolute; top: 0; left: 0; display: flex; gap: 15px; width: 5000px; animation: 60s credits linear infinite;
}
/* ⏸️ PAUSE ANIMATION ON HOVER */ .wrapper:hover {
animation-play-state: paused;
}
.gallery-item {
display: inline-block; text-align: center; width: 150px;
}
.gallery-item img {
width: 100px; /* Match widths=100px */ height: 200px; /* Match heights=200px */ 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: 5px; line-height: 1.2;
}
@keyframes credits {
0% { transform: translateX(0); }
100% { transform: translateX(-2500px); }
} </style>