HF/ByChapters: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

No edit summary
No edit summary
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>


<p>Pick a Chapter (1–43):</p>
<p>Pick a Chapter (1–43):</p>
<input type="number" id="chapterInput" min="1" max="43">
<input type="number" id="chapterInput" min="1" max="43">
<button onclick="loadSlideshowsByChapterAlt()">Display</button>
<button id="displayButton">Display</button>


<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="">
     <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 19:


   <!-- 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="">
     <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 34:
.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;
}
}
Line 78: Line 59:
</style>
</style>


<!-- Versteckte Tabelle -->





Revision as of 22:55, 2 September 2025


Pick a Chapter (1–43):

<input type="number" id="chapterInput" min="1" max="43"> <button id="displayButton">Display</button>

   <select id="illustratorSelect1"></select>
   <img id="slide1" src="" alt="">
     <button class="prevBtn" data-box="1">←</button>
     <button class="nextBtn" data-box="1">→</button>
0/0
   <select id="illustratorSelect2"></select>
   <img id="slide2" src="" alt="">
     <button class="prevBtn" data-box="2">←</button>
     <button class="nextBtn" data-box="2">→</button>
0/0

<style> .slideshow-grid {

 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;

} .slideshow-box {

 text-align: center;
 border: 1px solid #ccc;
 padding: 10px;

} .slideshow-box img {

 max-width: 100%;
 height: auto;

} .slide-counter {

 margin-top: 5px;
 font-size: 0.9em;
 color: #555;

}

  1. catalog_wrapper {
 opacity: 0;
 height: 0;
 overflow: hidden;

} </style>


<thead> </thead> <tbody> </tbody> <tfoot> </tfoot>

</html>