Widget:SlidingGallerySewing - Revision history

Gfc at 23:30, 15 October 2026

2026-10-15T23:30:53Z

← Older revision		Revision as of 23:30, 15 October 2026
Line 13:		Line 13:
	},		},
	{		{
	link: "/Singer_Simple_3232",		link: "/wiki/index.php/Singer_Simple_3232",
	img: "/wiki/images/thumb/0/08/Singer_Simple.jpg/800px-Singer_Simple.jpg?20191223184102",		img: "/wiki/images/thumb/0/08/Singer_Simple.jpg/800px-Singer_Simple.jpg?20191223184102",
	title: "Singer Simple 3232",		title: "Singer Simple 3232",
Line 19:		Line 19:
	},		},
	{		{
	link: "/wiki/Janome_HD-3000BE",		link: "/wiki/index.php/Janome_HD-3000BE",
	img: "/wiki/images/thumb/0/01/Janome_HD-3000BE.jpeg/400px-Janome_HD-3000BE.jpeg",		img: "/wiki/images/thumb/0/01/Janome_HD-3000BE.jpeg/400px-Janome_HD-3000BE.jpeg",
	title: "Janome HD-3000BE",		title: "Janome HD-3000BE",
Line 25:		Line 25:
	},		},
	{		{
	link: "/wiki/Bernina_model_1000",		link: "/wiki/index.php/Bernina_model_1000",
	img: "/wiki/images/thumb/f/f9/Bernina1008.png/400px-Bernina1008.png",		img: "/wiki/images/thumb/f/f9/Bernina1008.png/400px-Bernina1008.png",
	title: "Bernina model 1008",		title: "Bernina model 1008",
Line 31:		Line 31:
	},		},
	{		{
	link: "/wiki/Brother_1034DX",		link: "/wiki/index.php/Brother_1034DX",
	img: "/wiki/images/thumb/3/3e/Brother-1034DX-Serger.jpeg/120px-Brother-1034DX-Serger.jpeg",		img: "/wiki/images/thumb/3/3e/Brother-1034DX-Serger.jpeg/120px-Brother-1034DX-Serger.jpeg",
	title: "Brother 1034DX",		title: "Brother 1034DX",
Line 37:		Line 37:
	},		},
	{		{
	link: "/wiki/Brother_PE770",		link: "/wiki/index.php/Brother_PE770",
	~~/* 🌟 UPDATED: Added your optimized 240px thumbnail path below */~~
	img: "/wiki/images/thumb/8/8d/BrotherPE770.jpg/240px-BrotherPE770.jpg",		img: "/wiki/images/thumb/8/8d/BrotherPE770.jpg/240px-BrotherPE770.jpg",
	title: "Brother PE770",		title: "Brother PE770",
Line 133:		Line 132:
	var item = GALLERY_DATA[i];		var item = GALLERY_DATA[i];
	htmlOutput += '<div class="gallery-item">';		htmlOutput += '<div class="gallery-item">';
			/* 🌟 Pulls the complete, absolute path directly from your variables */
	htmlOutput += ' <a href="' + item.link + '"><img src="' + item.img + '" alt="' + item.title + '"></a>';		htmlOutput += ' <a href="' + item.link + '"><img src="' + item.img + '" alt="' + item.title + '"></a>';
	htmlOutput += ' <div class="gallery-caption">' + item.title + '<br><b>' + item.desc + '</b></div>';		htmlOutput += ' <div class="gallery-caption">' + item.title + '<br><b>' + item.desc + '</b></div>';
Line 142:		Line 142:
	var cloneItem = GALLERY_DATA[j];		var cloneItem = GALLERY_DATA[j];
	htmlOutput += '<div class="gallery-item">';		htmlOutput += '<div class="gallery-item">';
			/* 🌟 Pulls the complete, absolute path directly from your variables */
	htmlOutput += ' <a href="' + cloneItem.link + '"><img src="' + cloneItem.img + '" alt="' + cloneItem.title + '"></a>';		htmlOutput += ' <a href="' + cloneItem.link + '"><img src="' + cloneItem.img + '" alt="' + cloneItem.title + '"></a>';
	htmlOutput += ' <div class="gallery-caption">' + cloneItem.title + '<br><b>' + cloneItem.desc + '</b></div>';		htmlOutput += ' <div class="gallery-caption">' + cloneItem.title + '<br><b>' + cloneItem.desc + '</b></div>';
Line 151:		Line 152:

	// 4. Calculate the mathematically perfect loop point dynamically using percentage tracking:		// 4. Calculate the mathematically perfect loop point dynamically using percentage tracking:
	~~// Sliding left by exactly -50% ensures an infinite, gapless repeat loop regardless of dimensions.~~
	var styleSheet = document.createElement("style");		var styleSheet = document.createElement("style");
	styleSheet.type = "text/css";		styleSheet.type = "text/css";

Gfc at 23:26, 15 October 2026

2026-10-15T23:26:00Z

← Older revision		Revision as of 23:26, 15 October 2026
Line 7:		Line 7:
	var GALLERY_DATA = [		var GALLERY_DATA = [
	{		{
	link: "/Singer_HD_4432",		link: "/wiki/index.php/Singer_HD_4432",
	img: "/wiki/images/thumb/e/e1/Singer_HD-1_4452.jpg/600px-Singer_HD-1_4452.jpg?20250616215327",		img: "/wiki/images/thumb/e/e1/Singer_HD-1_4452.jpg/600px-Singer_HD-1_4452.jpg?20250616215327",
	title: "Singer HD 4432",		title: "Singer HD 4432",

Gfc at 23:23, 15 October 2026

2026-10-15T23:23:34Z

← Older revision		Revision as of 23:23, 15 October 2026
Line 7:		Line 7:
	var GALLERY_DATA = [		var GALLERY_DATA = [
	{		{
	link: "~~/wiki~~/Singer_HD_4432",		link: "/Singer_HD_4432",
	img: "/wiki/images/thumb/e/e1/Singer_HD-1_4452.jpg/600px-Singer_HD-1_4452.jpg?20250616215327",		img: "/wiki/images/thumb/e/e1/Singer_HD-1_4452.jpg/600px-Singer_HD-1_4452.jpg?20250616215327",
	title: "Singer HD 4432",		title: "Singer HD 4432",
Line 13:		Line 13:
	},		},
	{		{
	link: "~~/wiki~~/Singer_Simple_3232",		link: "/Singer_Simple_3232",
	img: "/wiki/images/thumb/0/08/Singer_Simple.jpg/800px-Singer_Simple.jpg?20191223184102",		img: "/wiki/images/thumb/0/08/Singer_Simple.jpg/800px-Singer_Simple.jpg?20191223184102",
	title: "Singer Simple 3232",		title: "Singer Simple 3232",

Gfc at 23:12, 15 October 2026

2026-10-15T23:12:26Z

Show changes

Gfc at 22:58, 15 October 2026

2026-10-15T22:58:03Z

← Older revision		Revision as of 22:58, 15 October 2026
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>

Gfc at 22:56, 15 October 2026

2026-10-15T22:56:57Z

← Older revision		Revision as of 22:56, 15 October 2026
Line 113:		Line 113:
	</div>		</div>
	</div>		</div>

	~~<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>~~

Gfc at 22:50, 15 October 2026

2026-10-15T22:50:12Z

← Older revision		Revision as of 22:50, 15 October 2026
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";

Gfc at 22:47, 15 October 2026

2026-10-15T22:47:25Z

← Older revision		Revision as of 22:47, 15 October 2026
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: ~~Read the width of the FIRST~~ item ~~box instead of~~ the ~~whole collection~~ list		// 2. FIXED: Target item 0 in the array list to read individual card box structural parameters
	var ~~itemWidth~~ = originalItems[0].~~offsetWidth~~ \|\| 160;		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 ~~width~~ (742px)		// 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 ~~generate and inject the looping~~ keyframes cleanly into the ~~browser head~~		// 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";

Gfc at 22:46, 15 October 2026

2026-10-15T22:46:02Z

← Older revision		Revision as of 22:46, 15 October 2026
Line 113:		Line 113:
	</div>		</div>
	</div>		</div>

			<style>
			/* Override the animation block to let JavaScript control the width and loop */
			.wrapper {
			width: max-content !important;
			animation: none !important;
			}
			</style>

	<style>		<style>
Line 124:		Line 132:
	<script>		<script>
	(function() {		(function() {
	// Find the scrolling row		// Find the scrolling row track container
	var track = document.querySelector('.wrapper');		var track = document.querySelector('.wrapper');
	if (!track) return;		if (!track) return;

	// 1. Grab all your unique items		// 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;		if (originalItems.length === 0) return;

	// 2. ~~Automatically compute widths (Item~~ width~~: 160px + Gap: 20px = 180px)~~		// 2. FIXED: Read the width of the FIRST item box instead of the whole collection list
	var itemWidth = originalItems[0].offsetWidth \|\| 160;		var itemWidth = originalItems[0].offsetWidth \|\| 160;
	var gapValue = 20;		var gapValue = 20;
	var fullStepWidth = itemWidth + gapValue;		var fullStepWidth = itemWidth + gapValue;

Gfc at 22:44, 15 October 2026

2026-10-15T22:44:39Z

← Older revision		Revision as of 22:44, 15 October 2026
Line 113:		Line 113:
	</div>		</div>
	</div>		</div>

			<style>
			/* Override the animation block to let JavaScript control the width and loop */
			.wrapper {
			width: max-content !important;
			animation: none !important;
			}
			</style>

			<script>
			(function() {
			// Find the scrolling row
			var track = document.querySelector('.wrapper');
			if (!track) return;

			// 1. Grab all your unique items
			var originalItems = Array.prototype.slice.call(track.getElementsByClassName('gallery-item'));
			if (originalItems.length === 0) return;

			// 2. Automatically compute widths (Item width: 160px + Gap: 20px = 180px)
			var itemWidth = originalItems[0].offsetWidth \|\| 160;
			var gapValue = 20;
			var fullStepWidth = itemWidth + gapValue;
			var totalOriginalWidth = originalItems.length * fullStepWidth;

			// 3. Smart Looper: Clone just enough items to fill the viewable viewport width (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 generate and inject the looping keyframes cleanly into the browser head
			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>