HF/ByChapters - Revision history

HMHTEST at 00:18, 12 May 2026

2026-05-12T00:18:32Z

← Older revision		Revision as of 02:18, 12 May 2026
Line 1:		Line 1:
	{{Seitenkopf\|Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}		{{Seitenkopf\|Illustrations in <i>Adventures of Huckleberry Finn</i> </br>by Chapter}}

HMHTEST at 16:33, 11 May 2026

2026-05-11T16:33:39Z

← Older revision		Revision as of 18:33, 11 May 2026
Line 1:		Line 1:
	{{{Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}}		{{Seitenkopf\|Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}

HMHTEST at 16:33, 11 May 2026

2026-05-11T16:33:12Z

← Older revision		Revision as of 18:33, 11 May 2026
Line 1:		Line 1:
	~~<div class="row">~~		{{{Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}}
	~~<div class="large-12 columns bubble bubble--seitenkopf">~~
	~~<h1 class="seitenkopf-titel">~~{{{Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}}~~</h1>~~
	~~</div>~~
	~~</div>~~

HMHTEST at 16:32, 11 May 2026

2026-05-11T16:32:14Z

← Older revision		Revision as of 18:32, 11 May 2026
Line 1:		Line 1:
	{{~~DISPLAYTITLE:~~ Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}		<div class="row">
			<div class="large-12 columns bubble bubble--seitenkopf">
			<h1 class="seitenkopf-titel">{{{Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}}</h1>
			</div>
			</div>


	<html>		<html>
	<p>		<p>

HMHTEST at 15:20, 16 September 2025

2025-09-16T15:20:24Z

← Older revision		Revision as of 17:20, 16 September 2025
Line 70:		Line 70:
	height: 400px; /* feste Höhe, Bilder passen sich an */		height: 400px; /* feste Höhe, Bilder passen sich an */
	object-fit: contain; /* Bilder bleiben proportional */		object-fit: contain; /* Bilder bleiben proportional */
			cursor: pointer; /* zeigt Hand beim Hover */
	}		}

HMHTEST at 15:13, 16 September 2025

2025-09-16T15:13:35Z

← Older revision		Revision as of 17:13, 16 September 2025
Line 6:		Line 6:
	<button id="displayButton" style="display: inline-block; margin-left: 5px;">Display</button>		<button id="displayButton" style="display: inline-block; margin-left: 5px;">Display</button>
	</p>		</p>


	<div class="slideshow-grid">		<div class="slideshow-grid">
Line 14:		Line 13:
	<select id="illustratorSelect1"></select>		<select id="illustratorSelect1"></select>
	<img id="slide1" src="" alt="">		<img id="slide1" src="" alt="">

			<!-- MediaInfo Box -->
			<div class="mediainfo" id="mediainfo1"></div>

	<div>		<div>
	<button class="prevBtn" data-box="1">←</button>		<button class="prevBtn" data-box="1">←</button>
Line 25:		Line 28:
	<select id="illustratorSelect2"></select>		<select id="illustratorSelect2"></select>
	<img id="slide2" src="" alt="">		<img id="slide2" src="" alt="">

			<!-- MediaInfo Box -->
			<div class="mediainfo" id="mediainfo2"></div>

	<div>		<div>
	<button class="prevBtn" data-box="2">←</button>		<button class="prevBtn" data-box="2">←</button>
Line 65:		Line 72:
	}		}

			.mediainfo {
			margin: 10px 0; /* Abstand zwischen Bild und Buttons */
			min-height: 3em; /* verhindert Zusammenfallen, wenn leer */
			}
	</style>		</style>


	<!-- Versteckte Tabelle -->		<!-- Versteckte Tabelle -->

HMHTEST: Undo revision 1787 by HMHTEST (talk)

2025-09-16T15:11:05Z

Undo revision 1787 by HMHTEST (talk)

← Older revision		Revision as of 17:11, 16 September 2025
Line 1:		Line 1:
	{{DISPLAYTITLE: Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}		{{DISPLAYTITLE: Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}
	<html>		<html>
	<p>Pick a Chapter (1–43):		<p>
	<input type="number" id="chapterInput" min="1" max="43" style="width:50px; margin-left:5px;">		Pick a Chapter (1–43):
	<button id="displayButton">Display</button>		<input type="number" id="chapterInput" min="1" max="43" style="width: 50px; display: inline-block; margin-left: 5px;">
			<button id="displayButton" style="display: inline-block; margin-left: 5px;">Display</button>
	</p>		</p>

	<div class="~~dual~~-~~slideshow~~">
			<div class="slideshow-grid">

	<!-- Box 1 -->		<!-- Box 1 -->
	<div class="slideshow-box">		<div class="slideshow-box" id="box1">
	<select id="illustratorSelect1"></select>		<select id="illustratorSelect1"></select>
	<img id="slide1" src="" alt="">		<img id="slide1" src="" alt="">
	~~<div class="mediainfo" id="mediainfo1"></div>~~
	<div>		<div>
	<button class="prevBtn" data-box="1">←</button>		<button class="prevBtn" data-box="1">←</button>
Line 20:		Line 22:

	<!-- Box 2 -->		<!-- Box 2 -->
	<div class="slideshow-box">		<div class="slideshow-box" id="box2">
	<select id="illustratorSelect2"></select>		<select id="illustratorSelect2"></select>
	<img id="slide2" src="" alt="">		<img id="slide2" src="" alt="">
	~~<div class="mediainfo" id="mediainfo2"></div>~~
	<div>		<div>
	<button class="prevBtn" data-box="2">←</button>		<button class="prevBtn" data-box="2">←</button>
Line 30:		Line 31:
	<div class="slide-counter" id="counter2">0/0</div>		<div class="slide-counter" id="counter2">0/0</div>
	</div>		</div>

	</div>		</div>

	<style>		<style>
	.~~dual~~-~~slideshow~~ {		.slideshow-grid {
	display: ~~flex~~;		display: grid;
			grid-template-columns: repeat(2, 1fr);
	gap: 20px;		gap: 20px;
	}		}

			.slide-counter {
			margin-top: 5px;
			font-size: 0.9em;
			color: #555;
			}

			#catalog_wrapper {
			opacity: 0;
			height: 0;
			overflow: hidden;
			}

	.slideshow-box {		.slideshow-box {
	text-align: center;		text-align: center;
	border: 1px solid #ccc;		border: 1px solid #ccc;
	padding: ~~10px;~~		padding: 20px; /* mehr Platz innen */
	~~flex: 1~~;
	}		}

	.slideshow-box img {		.slideshow-box img {
	max-width: 100%;		max-width: 100%;
	height: ~~auto;~~		height: 400px; /* feste Höhe, Bilder passen sich an */
	~~cursor: pointer~~; /* ~~zeigt~~ an~~, dass klickbar~~ */		object-fit: contain; /* Bilder bleiben proportional */
	}
	~~.slide-counter {~~
	~~margin-top: 5px;~~
	~~font-size: 0.9em;~~
	~~color: #555;~~
	}
	~~.mediainfo {~~
	~~margin-top: 5px;~~
	~~min~~-~~height~~: ~~3em~~; /* ~~verhindert zu starkes Zusammenfallen bei leerem Inhalt~~ */
	}		}

	</style>		</style>


	<!-- Versteckte Tabelle -->		<!-- Versteckte Tabelle -->

HMHTEST at 15:10, 16 September 2025

2025-09-16T15:10:38Z

← Older revision		Revision as of 17:10, 16 September 2025
Line 1:		Line 1:
	{{DISPLAYTITLE: Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}		{{DISPLAYTITLE: Illustrations in <i>Adventures of Huckleberry Finn</i> by Chapter}}
	<html>		<html>
	<p>		<p>Pick a Chapter (1–43):
	Pick a Chapter (1–43):		<input type="number" id="chapterInput" min="1" max="43" style="width:50px; margin-left:5px;">
	<input type="number" id="chapterInput" min="1" max="43" style="width: 50px~~; display: inline-block~~; margin-left: 5px;">		<button id="displayButton">Display</button>
	<button id="displayButton~~" style="display: inline-block; margin-left: 5px;~~">Display</button>
	</p>		</p>

			<div class="dual-slideshow">
	<div class="slideshow~~-grid~~">

	<!-- Box 1 -->		<!-- Box 1 -->
	<div class="slideshow-box~~" id="box1~~">		<div class="slideshow-box">
	<select id="illustratorSelect1"></select>		<select id="illustratorSelect1"></select>
	<img id="slide1" src="" alt="">		<img id="slide1" src="" alt="">
			<div class="mediainfo" id="mediainfo1"></div>
	<div>		<div>
	<button class="prevBtn" data-box="1">←</button>		<button class="prevBtn" data-box="1">←</button>
Line 22:		Line 20:

	<!-- Box 2 -->		<!-- Box 2 -->
	<div class="slideshow-box~~" id="box2~~">		<div class="slideshow-box">
	<select id="illustratorSelect2"></select>		<select id="illustratorSelect2"></select>
	<img id="slide2" src="" alt="">		<img id="slide2" src="" alt="">
			<div class="mediainfo" id="mediainfo2"></div>
	<div>		<div>
	<button class="prevBtn" data-box="2">←</button>		<button class="prevBtn" data-box="2">←</button>
Line 31:		Line 30:
	<div class="slide-counter" id="counter2">0/0</div>		<div class="slide-counter" id="counter2">0/0</div>
	</div>		</div>

	</div>		</div>

	<style>		<style>
	.slideshow~~-grid~~ {		.dual-slideshow {
	display: ~~grid;~~		display: flex;
	~~grid-template-columns: repeat(2, 1fr)~~;
	gap: 20px;		gap: 20px;
	}		}

	~~.slide-counter {~~
	~~margin-top: 5px;~~
	~~font-size: 0.9em;~~
	~~color: #555;~~
	}

	~~#catalog_wrapper {~~
	~~opacity: 0;~~
	~~height: 0;~~
	~~overflow: hidden;~~
	}

	.slideshow-box {		.slideshow-box {
	text-align: center;		text-align: center;
	border: 1px solid #ccc;		border: 1px solid #ccc;
	padding: ~~20px~~; ~~/* mehr Platz innen */~~		padding: 10px;
			flex: 1;
	}		}

	.slideshow-box img {		.slideshow-box img {
	max-width: 100%;		max-width: 100%;
	height: ~~400px~~; ~~/* feste Höhe, Bilder passen sich an */~~		height: auto;
	~~object-fit~~: ~~contain~~; /* ~~Bilder bleiben proportional~~ */		cursor: pointer; /* zeigt an, dass klickbar */
	}		}
			.slide-counter {
			margin-top: 5px;
			font-size: 0.9em;
			color: #555;
			}
			.mediainfo {
			margin-top: 5px;
			min-height: 3em; /* verhindert zu starkes Zusammenfallen bei leerem Inhalt */
			}
			</style>

	~~</style>~~

	<!-- Versteckte Tabelle -->		<!-- Versteckte Tabelle -->

HMHTEST at 21:03, 2 September 2025

2025-09-02T21:03:20Z

← Older revision		Revision as of 23:03, 2 September 2025
Line 60:		Line 60:

	.slideshow-box img {		.slideshow-box img {
	max-width: ~~140~~%;		max-width: 100%;
	height: ~~700px~~; /* feste Höhe, Bilder passen sich an */		height: 400px; /* feste Höhe, Bilder passen sich an */
	object-fit: contain; /* Bilder bleiben proportional */		object-fit: contain; /* Bilder bleiben proportional */
	}		}

HMHTEST at 21:02, 2 September 2025

2025-09-02T21:02:51Z

← Older revision		Revision as of 23:02, 2 September 2025
Line 60:		Line 60:

	.slideshow-box img {		.slideshow-box img {
	max-width: ~~100~~%;		max-width: 140%;
	height: ~~400px~~; /* feste Höhe, Bilder passen sich an */		height: 700px; /* feste Höhe, Bilder passen sich an */
	object-fit: contain; /* Bilder bleiben proportional */		object-fit: contain; /* Bilder bleiben proportional */
	}		}