Widget:SlidingGallery - Revision history

Gfc at 21:05, 15 October 2026

2026-10-15T21:05:07Z

@@ Line 56: / Line 56: @@
    <div class="gallery-bg">
      <div class="gallery-viewport">
-       <div class="wrapper">
+       <!-- The JavaScript loop will safely inject the layout directly into this wrapper -->
+      <div class="wrapper" id="js-gallery-wrapper"></div>
      </div>
    </div>
 </div>

2026-10-15T21:00:45Z

← Older revision		Revision as of 21:00, 15 October 2026
Line 16:		Line 16:
	}		}

	/* ⏸️ PAUSE ANIMATION ON HOVER~~: Stops the sliding movement when mouse enters the gallery area~~ */		/* ⏸️ PAUSE ANIMATION ON HOVER */
	.wrapper:hover {		.wrapper:hover {
	animation-play-state: paused;		animation-play-state: paused;
Line 34:		Line 34:
	}		}

	/* 🔍 ENLARGE IMAGE ON HOVER~~: Makes the specific image slightly pop out~~ */		/* 🔍 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">

	<!-- ~~Smarty loop dynamically printing your elements~~ -->		<!-- Correct MediaWiki Widget Loop Syntax -->
	{foreach $images ~~as $~~index =~~> $~~img}		<!-- {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>