HF/ByChapters: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

← Older edit
VisualWikitext
No edit summary
Tag: Reverted
No edit summary
 
(2 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>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="">
   
    <!-- MediaInfo Box -->
     <div class="mediainfo" id="mediainfo1"></div>
     <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 25:


   <!-- 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="">
   
    <!-- MediaInfo Box -->
     <div class="mediainfo" id="mediainfo2"></div>
     <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 38:
     <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 */
}
   cursor: pointer; /* zeigt Hand beim Hover */
.slide-counter {
   margin-top: 5px;
   font-size: 0.9em;
  color: #555;
}
}
.mediainfo {
.mediainfo {
   margin-top: 5px;
   margin: 10px 0;       /* Abstand zwischen Bild und Buttons */
   min-height: 3em; /* verhindert zu starkes Zusammenfallen bei leerem Inhalt */
   min-height: 3em;     /* verhindert Zusammenfallen, wenn leer */
}
}
</style>
</style>

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"