HF/ByChapters: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

← Older edit
VisualWikitext
No edit summary
No edit summary
 
(11 intermediate revisions by the same user not shown)
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):</p>
  Pick a Chapter (1–43):
<input type="number" id="chapterInput" min="1" max="43">
  <input type="number" id="chapterInput" min="1" max="43" style="width: 50px; display: inline-block; margin-left: 5px;">
<button onclick="loadSlideshowsByChapter()">Display</button>
  <button id="displayButton" style="display: inline-block; margin-left: 5px;">Display</button>
</p>


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


   <!-- Box 1 -->
   <!-- Box 1 -->
   <div class="slideshow-box">
   <div class="slideshow-box" id="box1">
     <select id="illustratorSelect1" onchange="refreshGallery(1)">
     <select id="illustratorSelect1"></select>
      <option value="Kemble">Kemble</option>
      <option value="Schroedter">Schroedter</option>
      <option value="Hirth">Hirth</option>
      <option value="Busoni">Busoni</option>
      <option value="Kellerer">Kellerer</option>
      <option value="Harder">Harder</option>
      <option value="Trier">Trier</option>
      <option value="Bebié">Bebié</option>
    </select>
     <img id="slide1" src="" alt="">
     <img id="slide1" src="" alt="">
   
    <!-- MediaInfo Box -->
    <div class="mediainfo" id="mediainfo1"></div>
     <div>
     <div>
       <button onclick="prevSlideDropdown(1)">←</button>
       <button class="prevBtn" data-box="1">←</button>
       <button onclick="nextSlideDropdown(1)">→</button>
       <button class="nextBtn" data-box="1">→</button>
     </div>
     </div>
     <div class="slide-counter" id="counter1">0/0</div>
     <div class="slide-counter" id="counter1">0/0</div>
Line 29: Line 25:


   <!-- Box 2 -->
   <!-- Box 2 -->
   <div class="slideshow-box">
   <div class="slideshow-box" id="box2">
     <select id="illustratorSelect2" onchange="refreshGallery(2)">
     <select id="illustratorSelect2"></select>
      <option value="Kemble">Kemble</option>
      <option value="Schroedter">Schroedter</option>
      <option value="Hirth">Hirth</option>
      <option value="Busoni">Busoni</option>
      <option value="Kellerer">Kellerer</option>
      <option value="Harder">Harder</option>
      <option value="Trier">Trier</option>
      <option value="Bebié">Bebié</option>
    </select>
     <img id="slide2" src="" alt="">
     <img id="slide2" src="" alt="">
   
    <!-- MediaInfo Box -->
    <div class="mediainfo" id="mediainfo2"></div>
     <div>
     <div>
       <button onclick="prevSlideDropdown(2)">←</button>
       <button class="prevBtn" data-box="2">←</button>
       <button onclick="nextSlideDropdown(2)">→</button>
       <button class="nextBtn" data-box="2">→</button>
     </div>
     </div>
     <div class="slide-counter" id="counter2">0/0</div>
     <div class="slide-counter" id="counter2">0/0</div>
Line 53: Line 44:
.slideshow-grid {
.slideshow-grid {
   display: grid;
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* 2 Boxen pro Reihe */
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   gap: 20px;
}
}
.slideshow-box {
 
  text-align: center;
  border: 1px solid #ccc;
  padding: 10px;
}
.slideshow-box img {
  max-width: 100%;
  height: auto;
}
.slide-counter {
.slide-counter {
   margin-top: 5px;
   margin-top: 5px;
Line 76: Line 59:
   overflow: hidden;
   overflow: hidden;
}
}
</style>


<script>
.slideshow-box {
const illustrators = [
  text-align: center;
   "Kemble","Schroedter","Hirth","Busoni","Kellerer","Harder","Trier","Bebié"
   border: 1px solid #ccc;
];
  padding: 20px;       /* mehr Platz innen */
}


let slides = {};
.slideshow-box img {
let currentIndex = {};
   max-width: 100%;
 
   height: 400px;       /* feste Höhe, Bilder passen sich an */
illustrators.forEach(name => {
   object-fit: contain; /* Bilder bleiben proportional */
   slides[name] = [];
   cursor: pointer; /* zeigt Hand beim Hover */
   currentIndex[name] = 0;
});
 
function loadSlideshowsByChapter() {
  const chapterInput = document.getElementById("chapterInput").value.trim();
  const chapterNumber = parseInt(chapterInput, 10);
 
   if (isNaN(chapterNumber) || chapterNumber < 1 || chapterNumber > 43) {
    alert("Please enter a number between 1 and 43.");
    return;
   }
 
  const chapterTag = "ch" + String(chapterNumber).padStart(3, "0");
  const rows = document.querySelectorAll("#catalog tbody tr");
 
  illustrators.forEach(name => {
    slides[name] = [];
    currentIndex[name] = 0;
    for (let i = 0; i < rows.length; i++) {
      const row = rows[i];
      const illustratorCell = row.cells[2];
      const idCell = row.cells[8];
      const illustratorText = illustratorCell ? illustratorCell.textContent.trim().toLowerCase() : "";
      const idLink = idCell ? idCell.getElementsByTagName("a")[0] : null;
      const idText = idLink ? idLink.textContent.trim().toLowerCase() : "";
      if (illustratorText.indexOf(name.toLowerCase()) !== -1 && idText.indexOf(chapterTag) !== -1) {
        slides[name].push(idText);
      }
    }
  });
 
  // Nach dem Laden direkt beide Boxen refreshen
  refreshGallery(1);
  refreshGallery(2);
}
}


function refreshGallery(boxNumber) {
.mediainfo {
   const select = document.getElementById("illustratorSelect" + boxNumber);
   margin: 10px 0;       /* Abstand zwischen Bild und Buttons */
   const illustrator = select.value;
   min-height: 3em;     /* verhindert Zusammenfallen, wenn leer */
  const img = document.getElementById("slide" + boxNumber);
  const counter = document.getElementById("counter" + boxNumber);
 
  if (!slides[illustrator] || slides[illustrator].length === 0) {
    img.src = "https://illus.twainframe.org/images/2/2b/ChapterPlaceholder.png";
    currentIndex[illustrator] = 0;
    counter.textContent = "0/0";
  } else {
    showSlideDropdown(boxNumber, 0);
  }
}
}
</style>


function showSlideDropdown(boxNumber, index) {
  const select = document.getElementById("illustratorSelect" + boxNumber);
  const illustrator = select.value;
  const img = document.getElementById("slide" + boxNumber);
  const counter = document.getElementById("counter" + boxNumber);
  const slideArray = slides[illustrator];
  if (!img || slideArray.length === 0) return;


  currentIndex[illustrator] = (index + slideArray.length) % slideArray.length;
<!-- Versteckte Tabelle -->
  const imageId = slideArray[currentIndex[illustrator]];
  img.src = "/index.php/Special:Redirect/file/" + imageId + ".jpg";
  img.alt = imageId;
  img.title = imageId;
  counter.textContent = (currentIndex[illustrator] + 1) + "/" + slideArray.length;
}


function nextSlideDropdown(boxNumber) {
  const select = document.getElementById("illustratorSelect" + boxNumber);
  showSlideDropdown(boxNumber, currentIndex[select.value] + 1);
}
function prevSlideDropdown(boxNumber) {
  const select = document.getElementById("illustratorSelect" + boxNumber);
  showSlideDropdown(boxNumber, currentIndex[select.value] - 1);
}
</script>


<table id="catalog" class="wikitable" style="display: none;">
<table id="catalog" class="wikitable" style="display: none;">

Latest revision as of 16:20, 16 September 2025

Pick a Chapter (1–43):

0/0
0/0

Retrieved from "https://illus.twainframe.org/index.php?title=HF/ByChapters&oldid=1791"