• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Bilder einer Diashow individuell beschriften

M

MQTT

Mitglied
Hallo, ich habe eine Diashow wie folgt aufgebaut:

html:
Code: 
<!doctype html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Haus</title>
    <link rel="icon" type="image/png" href="haus.png">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="grid-container">
        <img class="dia responsive fade" src="1.jpg">
        <img class="dia responsive fade" src="2.jpg">
        <img class="dia responsive fade" src="3.jpg">
        <img class="dia responsive fade" src="4.jpg">
        <img class="dia responsive fade" src="5.jpg">
        <img class="dia responsive fade" src="6.jpg">
        <img class="dia responsive fade" src="7.jpg">
        <img class="dia responsive fade" src="8.jpg">
        <img class="dia responsive fade" src="9.jpg">
        <img class="dia responsive fade" src="10.jpg">
        <img class="dia responsive fade" src="11.jpg">
        <img class="dia responsive fade" src="12.jpg">
        <img class="dia responsive fade" src="13.jpg">
        <img class="dia responsive fade" src="14.jpg">
        <img class="dia responsive fade" src="15.jpg">
        <img class="dia responsive fade" src="16.jpg">
        <img class="dia responsive fade" src="17.jpg">
        <img class="dia responsive fade" src="18.jpg">
        <a class="prev" onclick="plusDivs(-1)">&#10094;</a>
        <a class="next" onclick="plusDivs(1)">&#10095;</a>
    </div>
    <script src="java.js"></script>
</body>

</html>

Java:
Code: 
let slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    let i;
    let x = document.getElementsByClassName("dia");
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length };
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
}

CSS:
Code: 
.grid-container {
  display: grid;
  grid-template-columns: 98vw;
  grid-template-rows: 97vh;
  justify-items: center;
  align-items: center;
  margin-left: -2px;
  margin-top: -3px;
}

.prev {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 5%;
  color: black;
  font-weight: bold;
  font-size: 40px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 5%;
  width: auto;
  color: black;
  font-weight: bold;
  font-size: 40px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev:hover,
.next:hover {
  background-color: darkgrey;
}

.responsive {
  max-width: 99%;
  height: 97%;
  object-fit: scale-down;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

ich würde gern einzelne Bilder individuell beschriften, kriege es aber nicht hin ohne den Gridcontainer zu zerstören (2. Grid).
 
Werbung:
Ohne das groß getestet zu haben: Lege um die Bilder jeweils einen Container, am besten ein figure-Tag und gib diesem die Klassen "dia responsive fade" (statt dem img-Tag), dann müsste es so funktionieren wie vorher. Und die Beschreibung in ein figcaption-Tag.
Siehe z. B. hier:

HTML/Elemente/figure – SELFHTML-Wiki

wiki.selfhtml.org wiki.selfhtml.org
 
Zuletzt bearbeitet:
bei figcaption macht er immer ein 2. Grid auf.

ich habe hier zwei verschiedene templates und kriege den Text von template a) einfach nicht in template b).

template b) ist oben.

template a) sieht so aus:

Code: 
<body>
    <!-- Slideshow container -->
    <div class="slideshow-container">
        <!-- Full-width images with number and caption text -->
        <div class="mySlides fade">
            <div class="numbertext">1 / 18</div>
            <img src="1.jpg" style="width: 100%">
            <div class="text">Beschriftung</div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">2 / 18</div>
            <img src="2.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">3 / 18</div>
            <img src="3.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">4 / 18</div>
            <img src="4.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">5 / 18</div>
            <img src="5.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">6 / 18</div>
            <img src="6.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">7 / 18</div>
            <img src="7.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">8 / 18</div>
            <img src="8.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">9 / 18</div>
            <img src="9.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">10 / 18</div>
            <img src="10.jpg" style="width: 100%">
            <div class="text">15.09.2017</div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">10 / 18</div>
            <img src="11.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">12 / 18</div>
            <img src="12.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">13 / 18</div>
            <img src="13.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">14 / 18</div>
            <img src="14.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">15 / 18</div>
            <img src="15.jpg" style="width: 100%">
            <div class="text"></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">16 / 18</div>
            <img src="16.jpg" style="width: 100%">
            <div class="text">Beschriftung für 16</div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">17 / 18</div>
            <img src="17.jpg" style="width: 100%">
            <div class="text">Beschriftung für 17</div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">18 / 18</div>
            <img src="18.jpg" style="width: 100%">
            <div class="text">Beschriftung für 18</div>
        </div>
        <!-- Next and previous buttons -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <script> slideIndex = 1;
        showSlides(slideIndex);

        // Next/previous controls
        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        // Thumbnail image controls
        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            let i;
            let slides = document.getElementsByClassName("mySlides");
            if (n > slides.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = slides.length }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slides[slideIndex - 1].style.display = "block";
        }
    </script>
</body>

Code: 
* {
  box-sizing: border-box;
}

/* Slideshow container */
.slideshow-container {
  max-width: 2000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 32px;
  color: white;
  font-weight: bold;
  font-size: 32px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Caption text */
.text {
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, Sans-Serif;
  font-size: x-large;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text */
.numbertext {
  color: gray;
  font-size: 14px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.active,
.dot:hover {
  background-color: grey;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

ich hatte daraus u.a. template b) gebaut - b) hat den Grid Container wo die Fotos perfekt skaliert werden.
egal wie ich die "div class" umbaue, verliere ich das responsive design.
 
Werbung:
Ich nehme an, mit "oben" meinst Du das aus deinem ersten Posting?
Wenn ich das auf figure-Tags umstelle, funktioniert es bei mir einwandfrei:
Code: 
    <div class="grid-container">
        <figure class="dia responsive fade">
            <img src="images/dia0.jpg">
            <figcaption>
                Text 1
            </figcaption>
        </figure>
        <figure class="dia responsive fade">
            <img src="images/dia1.jpg">
            <figcaption>
                Text 2
            </figcaption>
        </figure>
        <figure class="dia responsive fade">
            <img src="images/dia2.jpg">
            <figcaption>
                Text 3
            </figcaption>
        </figure>
        <figure class="dia responsive fade">
            <img src="images/dia3.jpg">
            <figcaption>
                Text 4
            </figcaption>
        </figure>
        <a class="prev" onclick="plusDivs(-1)">&#10094;</a>
        <a class="next" onclick="plusDivs(1)">&#10095;</a>
    </div>
Javascript und CSS unverändert.

Wenn Du jetzt noch die Seitennummern einbauen willst, muss man sich die Frage stellen, ob es nicht besser ist, ein ausgereiftes, fertiges Skript einzusetzen wie z. B. Swiper. Das funktioniert dann auch auf Touchgeräten mit Wischen.
 
bei mir leider nicht, es gibt dann 2 Grid Container und das Bild ist viel zu groß und nicht mehr responsive.
Seiten Nr. brauche ich nicht.
Nur ein Texfeld im Bild wäre schön.
 
Werbung:
Habe einen entscheidenden Tipp bekommen, es geht doch ohne Grid Container.

Hier der Code:
HTML: 
<!doctype html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hausbau</title>
    <link rel="icon" type="image/png" href="haus.png">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="dia responsive fade">
        <div class="text">Bild 1</div>
        <img src="1.jpg">
    </div>
    <div class="dia responsive fade">
        <div class="text">Bild 2</div>
        <img src="2.jpg">
    </div>
    <a class="prev" onclick="plusDivs(-1)">&#10094</a>
    <a class="next" onclick="plusDivs(1)">&#10095</a>
    <script src="java.js"></script>
</body>

</html>

Javascript: 
let slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    let i;
    let x = document.getElementsByClassName("dia");
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length };
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
}

CSS: 
img {
  max-height: 98vh;
  max-width: 98vw;
  display: block;
  margin: 0 auto;
}
.text {
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, Sans-Serif;
  font-size: x-large;
  font-weight: bold;
  color: crimson;
  position: absolute;
  bottom: 20px;
  width: 98%;
  text-align: center;
}
.prev {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 5%;
  padding: 24px;
  color:gray;
  font-weight: bold;
  font-size: 32px;
  transition: 0.9s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 5%;
  padding: 24px;
  color: gray;
  font-weight: bold;
  font-size: 32px;
  transition: 0.9s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.fade {
  animation-name: fade;
  animation-duration: 1.6s;
}
@keyframes fade {
  from {
    opacity: .3
  }
  to {
    opacity: 1
  }
}

Wenn da noch was falsch ist oder verbessert werden kann gerne schreiben!

Das war der entscheidende Tipp:
Code: 
img {
  max-height: 98vh;
  max-width: 98vw;
  display: block;
  margin: 0 auto;
hatte eigentlich alle erdenklichen Kombinationen ausprobiert.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben