HF/Chapters: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

← Older editNewer edit →
VisualWikitext
Undo revision 1096 by HMHTEST (talk)
Tag: Undo
Undo revision 1095 by HMHTEST (talk)
Tag: Undo
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}}
{{DISPLAYTITLE: Illustrations by Chapter}}
<br><br>
<html>
<html>
<div class="chapter-input-row">
 
  <label for="chapterInput">Select Chapter (1–43): </label>
<p> Pick a Chapter (1–43):</p>
  <input type="number" id="chapterInput" min="1" max="43" value="1">
<input type="number" id="chapterInput" min="1" max="43">
  <button onclick="applyChapterFilter()">Load</button>
<button onclick="loadSlideshowsByChapter()">Display</button>
</div>


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


   <!-- Box A -->
   <!-- Acht Boxen -->
   <div class="slideshow-box" id="slideshowBoxA">
   <div class="slideshow-box">
     <select id="illustratorDropdownA" onchange="filterAndLoadSlideshow('A')">
     <h3>Kemble</h3>
      <option value="">-- Choose Illustrator --</option>
     <img id="slide-Kemble" src="" alt="">
      <option value="Kemble">Kemble</option>
     <div>
      <option value="Schroedter">Schroedter</option>
       <button onclick="prevSlide('Kemble')">←</button>
      <option value="Hirth">Hirth</option>
       <button onclick="nextSlide('Kemble')">→</button>
      <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>
    <div class="slideshow-container">
      <img id="slideA" src="">
     </div>
    <div class="gallery-button-row">
       <button onclick="prevSlide('A')">←</button>
       <button onclick="nextSlide('A')">→</button>
     </div>
     </div>
   </div>
   </div>


  <!-- Box B -->
   <div class="slideshow-box">
   <div class="slideshow-box" id="slideshowBoxB">
     <h3>Schroedter</h3>
     <select id="illustratorDropdownB" onchange="filterAndLoadSlideshow('B')">
     <img id="slide-Schroedter" src="" alt="">
      <option value="">-- Choose Illustrator --</option>
     <div>
      <option value="Kemble">Kemble</option>
       <button onclick="prevSlide('Schroedter')">←</button>
      <option value="Schroedter">Schroedter</option>
       <button onclick="nextSlide('Schroedter')">→</button>
      <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>
    <div class="slideshow-container">
      <img id="slideB" src="">
    </div>
     <div class="gallery-button-row">
       <button onclick="prevSlide('B')">←</button>
       <button onclick="nextSlide('B')">→</button>
     </div>
     </div>
   </div>
   </div>


  <!-- Box C -->
   <div class="slideshow-box">
   <div class="slideshow-box" id="slideshowBoxC">
     <h3>Hirth</h3>
     <select id="illustratorDropdownC" onchange="filterAndLoadSlideshow('C')">
     <img id="slide-Hirth" src="" alt="">
      <option value="">-- Choose Illustrator --</option>
     <div>
      <option value="Kemble">Kemble</option>
       <button onclick="prevSlide('Hirth')">←</button>
      <option value="Schroedter">Schroedter</option>
       <button onclick="nextSlide('Hirth')">→</button>
      <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>
    <div class="slideshow-container">
      <img id="slideC" src="">
    </div>
     <div class="gallery-button-row">
       <button onclick="prevSlide('C')">←</button>
       <button onclick="nextSlide('C')">→</button>
     </div>
     </div>
   </div>
   </div>


  <!-- Box D -->
   <div class="slideshow-box">
   <div class="slideshow-box" id="slideshowBoxD">
     <h3>Busoni</h3>
     <select id="illustratorDropdownD" onchange="filterAndLoadSlideshow('D')">
     <img id="slide-Busoni" src="" alt="">
      <option value="">-- Choose Illustrator --</option>
     <div>
      <option value="Kemble">Kemble</option>
       <button onclick="prevSlide('Busoni')">←</button>
      <option value="Schroedter">Schroedter</option>
       <button onclick="nextSlide('Busoni')">→</button>
      <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>
    <div class="slideshow-container">
      <img id="slideD" src="">
    </div>
     <div class="gallery-button-row">
       <button onclick="prevSlide('D')">←</button>
       <button onclick="nextSlide('D')">→</button>
     </div>
     </div>
   </div>
   </div>


  <!-- Box E -->
   <div class="slideshow-box">
   <div class="slideshow-box" id="slideshowBoxE">
     <h3>Kellerer</h3>
     <select id="illustratorDropdownE" onchange="filterAndLoadSlideshow('E')">
     <img id="slide-Kellerer" src="" alt="">
      <option value="">-- Choose Illustrator --</option>
     <div>
      <option value="Kemble">Kemble</option>
       <button onclick="prevSlide('Kellerer')">←</button>
      <option value="Schroedter">Schroedter</option>
       <button onclick="nextSlide('Kellerer')">→</button>
      <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>
    <div class="slideshow-container">
      <img id="slideE" src="">
    </div>
     <div class="gallery-button-row">
       <button onclick="prevSlide('E')">←</button>
       <button onclick="nextSlide('E')">→</button>
     </div>
     </div>
   </div>
   </div>


  <!-- Box F -->
   <div class="slideshow-box">
   <div class="slideshow-box" id="slideshowBoxF">
     <h3>Harder</h3>
     <select id="illustratorDropdownF" onchange="filterAndLoadSlideshow('F')">
     <img id="slide-Harder" src="" alt="">
      <option value="">-- Choose Illustrator --</option>
     <div>
      <option value="Kemble">Kemble</option>
       <button onclick="prevSlide('Harder')">←</button>
      <option value="Schroedter">Schroedter</option>
       <button onclick="nextSlide('Harder')">→</button>
      <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>
    <div class="slideshow-container">
      <img id="slideF" src="">
    </div>
     <div class="gallery-button-row">
       <button onclick="prevSlide('F')">←</button>
       <button onclick="nextSlide('F')">→</button>
     </div>
     </div>
   </div>
   </div>


  <!-- Box G -->
   <div class="slideshow-box">
   <div class="slideshow-box" id="slideshowBoxG">
     <h3>Trier</h3>
     <select id="illustratorDropdownG" onchange="filterAndLoadSlideshow('G')">
     <img id="slide-Trier" src="" alt="">
      <option value="">-- Choose Illustrator --</option>
     <div>
      <option value="Kemble">Kemble</option>
       <button onclick="prevSlide('Trier')">←</button>
      <option value="Schroedter">Schroedter</option>
       <button onclick="nextSlide('Trier')">→</button>
      <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>
    <div class="slideshow-container">
      <img id="slideG" src="">
    </div>
     <div class="gallery-button-row">
       <button onclick="prevSlide('G')">←</button>
       <button onclick="nextSlide('G')">→</button>
     </div>
     </div>
   </div>
   </div>


  <!-- Box H -->
   <div class="slideshow-box">
   <div class="slideshow-box" id="slideshowBoxH">
     <h3>Bebié</h3>
     <select id="illustratorDropdownH" onchange="filterAndLoadSlideshow('H')">
     <img id="slide-Bebié" src="" alt="">
      <option value="">-- Choose Illustrator --</option>
     <div>
      <option value="Kemble">Kemble</option>
       <button onclick="prevSlide('Bebié')">←</button>
      <option value="Schroedter">Schroedter</option>
       <button onclick="nextSlide('Bebié')">→</button>
      <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>
    <div class="slideshow-container">
      <img id="slideH" src="">
    </div>
     <div class="gallery-button-row">
       <button onclick="prevSlide('H')">←</button>
       <button onclick="nextSlide('H')">→</button>
     </div>
     </div>
   </div>
   </div>
Line 190: Line 84:


<style>
<style>
  .slideshow-grid {
.slideshow-grid {
    display: grid;
  display: grid;
    grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr); /* 3 Boxen pro Reihe */
    gap: 20px;
  gap: 20px;
  }
}
  .slideshow-box {
.slideshow-box {
    border: 1px solid #ccc;
  text-align: center;
    padding: 10px;
  border: 1px solid #ccc;
    text-align: center;
  padding: 10px;
  }
}
  .slideshow-container img {
.slideshow-box img {
    max-width: 100%;
  max-width: 100%;
    height: auto;
  height: auto;
  }
}
  .gallery-button-row {
    margin-top: 5px;
  }
  .chapter-input-row {
    margin-bottom: 20px;
  }




Revision as of 21:21, 2 September 2025

Pick a Chapter (1–43):

Kemble

Schroedter

Hirth

Busoni

Kellerer

Harder

Trier

Bebié

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