Frage zum Wiki-Artikel „Bildwechsler“

[Walter]

Hallo Ich möchte das mit mehr als 3 Bilder machen - was muss ich ändern? Vielen Dank und viele Grüsse, Walter

[Gunnar Bittersmann]

@@Walter

Ich möchte das mit mehr als 3 Bilder machen - was muss ich ändern?

Ähm, einfach mal einen Blick in den Quelltext werfen?

Dann siehst du, dass da bereits mehr als 3 Dinger im Wechsler sind. Es dürfen auch mehr sein. Oder weniger. Oder eigene.

LLAP 🖖

[Walter]

Danke für die Antwort! Ich habe den Quellentext schon genau angeschaut, und auch es auch mit mehreren "#gallery figure:nth-of-type(1)" versucht, erfolglos - es werden einfach nur drei angezeigt. Wenn ich die nth-of-type() erweitere, werden nur andere Bilder angezeigt. Wo genau müsste ich das ändern?

[Gunnar Bittersmann]

@@Walter

Ich habe den Quellentext schon genau angeschaut, und auch es auch mit mehreren "#gallery figure:nth-of-type(1)" versucht, erfolglos

Oh, du hast dir den CSS-Quelltext angeschaut‽

Hatte SELFHTML nicht früher™ mal eine Einstiegsseite, auf der das Zusammenspiel von HTML, CSS und JavaScript erklärt wurde?

Die Startseite des jetzigen Wikis erschlägt einen gleich mit Begriffen und Linklisten. Ein absoluter Anfänger kann damit nichts anfangen. (No pun intended.)

Wo genau müsste ich das ändern?

Im HTML-Quelltext.

LLAP 🖖

[Walter]

Sorry, aber ich bin Amateur :-( ich habe folgendes Scripts - was ist denn falsch?

<style type="text/css">
main {
        background: transparent;
        border-color: transparent;
}

#gallery {
        position: relative;
        background: none;
        border: none;
}

#gallery figure {
        position: absolute;
        top: 0;
        left: 60px;
        z-index: 1;
        -webkit-animation: wechseln 15s infinite;
        animation: wechseln 15s infinite;
}

@keyframes wechseln {
        0% {opacity: 1;}
        25% {opacity: 1;}
        40% {opacity: 0;}
        92% {opacity: 0;}
        100% {opacity: 1;}
}

@-webkit-keyframes wechseln {
        0% {opacity: 1;}
        25% {opacity: 1;}
        40% {opacity: 0;}
        92% {opacity: 0;}
        100% {opacity: 1;}
}

#gallery figure:nth-of-type(8) {
        animation-delay: 5s;
}
#gallery figure:nth-of-type(7) {
        animation-delay: 5s;
}
#gallery figure:nth-of-type(6) {
        animation-delay: 5s;
}
#gallery figure:nth-of-type(5) {
        animation-delay: 5s;
}
#gallery figure:nth-of-type(4) {
        animation-delay: 5s;
}
#gallery figure:nth-of-type(3) {
        animation-delay: 5s;
}
#gallery figure:nth-of-type(2) {
        animation-delay: 5s;
}
#gallery figure:nth-of-type(1) {
        animation-delay: 10s;
}
</style>
und folgendes HTML/PHP

1. <main>
2.      <div id="gallery">
3.          <figure> <img src="<?echo $bild1 ;?>" alt="bild1"></figure>
4.          <figure> <img src="<?echo $bild2 ;?>" alt="bild2"></figure>
5.          <figure> <img src="<?echo $bild3 ;?>" alt="bild3"></figure>
6.          <figure> <img src="<?echo $bild4 ;?>" alt="bild4"></figure>
7.          <figure> <img src="<?echo $bild5 ;?>" alt="bild5"></figure>
8.          <figure> <img src="<?echo $bild6 ;?>" alt="bild6"></figure>
9.          <figure> <img src="<?echo $bild7 ;?>" alt="bild7"></figure>
10.          <figure> <img src="<?echo $bild8 ;?>" alt="bild8"></figure>
11.      </div>
12. </main> 

[JürgenB]

Hallo Walter,

was ist denn falsch?

du hast dir noch nicht klar gemacht, wie der Wechsler funktioniert:

Jedes Bild wird für eine kurze Zeit ein- und sonst ausgeblendet. Damit das nicht alle Bilder synchron machen, bekommt jedes für seine Animation eine eigene Verzögerung. Daher musst du

• Animationsdauer
• Animationsdelay
• und Framedefinition anpassen.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Damit das nicht alle Bilder synchron machen, bekommt jedes für seine Animation eine eigene Verzögerung. Daher musst du

• Animationsdauer
• Animationsdelay
• und Framedefinition anpassen.

Und das macht den Bildwechsler ziemlich gebrauchsuntauglich. Bei Änderungen am Bildmaterial sollte man nichts weiter tun müssen als die Bilder im Markup hinzuzufügen/rauszunehmen.

Eine reine CSS-Lösung fällt mir dafür gerade nicht ein. Mit CSS-Präprozessor sollte es aber ein Leichtes sein, dass man nur an einer Stelle im Code eine Veränderung vornehmen muss: der Wert der Variablen für die Anzahl der Bilder.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Und das macht den Bildwechsler ziemlich gebrauchsuntauglich.

so extrem sehe ich das nicht, aber man sollte schon die Idee dahinter verstehen.

Eine reine CSS-Lösung fällt mir dafür gerade nicht ein. Mit CSS-Präprozessor sollte es aber ein Leichtes sein, …

was zeigt, das im CSS noch vieles im Argen liegt. Könnte man mit Variablen da etwas erreichen? Funktioniert calc auch in Keyframes etc?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

was zeigt, das im CSS noch vieles im Argen liegt.

Nun ja, CSS ist halt eine deklarative Sprache zur Darstellung, keine Programmiersprache. Und das ist auch gut so.

Könnte man mit Variablen da etwas erreichen? Funktioniert calc auch in Keyframes etc?

Ja, etwas. Man müsste nur die Anzahl der Bilder in eine Variable reinbekommen. Ein Einzeiler in JavaScript.

Um aber die verschiedenen Delays zu setzen, bräuchte man wohl eine Schleife. Mit Sass kein Problem …

Ich hätte da noch eine Idee, muss aber erstmal nachdenken, ob das druckreif ist.

LLAP 🖖

[JürgenB]

Hallo Walter,

du musst folgendes ändern/erweitern:

• Im HTML einen weiteren figure-Block einfügen, oder auch mehrere,
• in der css-Regel #gallery figure die Animationszeit von 15 auf 20 (oder mehr) Sekunden anpassen,
• in der Keyframedefinition @keyframes wechseln die Prozentangaben auf 0%, 20%, 30%, 92%, 100% anpassen (für 4 Bilder), hier ist bestimmt noch Feintuning nötig,
• eine weitere css-Regel #gallery figure:nth-of-type(3) einfügen und die Delays auf 5s, 10s und 15s setzen. Bei mehr als 4 Bildern analog weitere Regeln.

Gruß
Jürgen