bildergalerie in CSS

brainstuff · 1. April 2019

Hallo,

Ich finde einfahc nicht heraus wie man die folgene CSS Bildergalerie um zwei weitere Bilder erweitern kann:

CSS

main {

background: transparent;

border-color: transparent;

}

#gallery {

position: relative;

background: none;

border: none;

}

#gallery figure {

position: absolute;

top: 0;

left: 0;

}

#gallery figcaption {

position: absolute;

left: 1em;

font-size: 2em;

font-weight: bold;

bottom: 0.5em;

color: white;

}

@-webkit-keyframes bilder {

0% {

opacity: 1;

}

34% {

opacity: 1;

}

35% {

opacity: 0;

}

100% {

opacity: 0;

}

@keyframes bilder {

0% {

opacity: 1;

}

34% {

opacity: 1;

}

35% {

opacity: 0;

}

100% {

opacity: 0;

}

#gallery figure:nth-of-type(1) {

-webkit-animation: bilder 15s 7s infinite;

animation: bilder 15s 7s infinite;

}

#gallery figure:nth-of-type(2) {

-webkit-animation: bilder 15s 2s infinite;

animation: bilder 15s 2s infinite;

}

#gallery figure:nth-of-type(3) {

-webkit-animation: bilder 15s 12s infinite;

animation: bilder 15s 12s infinite;

}

@-webkit-keyframes wechseln {

0% {

opacity: 1;

transform: scale(1, 1);

z-index: 20;

}

20% {

opacity: 1;

transform: scale(1, 1);

}

34% {

opacity: 0;

transform: scale(0, 0);

}

100% {

opacity: 1;

transform: scale(0, 0);

}

@keyframes wechseln {

0% {

opacity: 1;

transform: scale(1, 1);

z-index: 20;

}

20% {

opacity: 1;

transform: scale(1, 1);

}

34% {

opacity: 0;

transform: scale(0, 0);

}

100% {

opacity: 1;

transform: scale(0, 0);

}

#gallery figure:nth-of-type(4) {

-webkit-animation: wechseln 15s 10s infinite;

animation: wechseln 15s 10s infinite;

}

#gallery figure:nth-of-type(5) {

-webkit-animation: wechseln 15s 5s infinite;

animation: wechseln 15s 5s infinite;

}

#gallery figure:nth-of-type(6) {

-webkit-animation: wechseln 15s infinite;

animation: wechseln 15s infinite;

}

HTML

___________

<!DOCTYPE html>

</head>

<body

style="background-color: rgb(165,68,154);"

<main>

<h2>xxxxxx</h2>

</figure>

<figcaption>222

</figcaption>

</figure>

</figcaption>

</figure>

<figcaption>333

</figcaption>

</figure>

<figcaption>222

</figcaption>

</figure>

<figcaption>111

</figcaption>

</figure>

</div>

</main>

</body>

</html>

---------------------------------

Kann mir bitte jemand sagen, wie ich diese Bildergalerie um weitere Bilder erweitern kann?

Danke

brainstuff

Nackhthund94 · 1. April 2019

HTML:

den bisherigen code +

<figcaption>xxx

</figcaption>

</figure>

<figcaption>xxx

</figcaption>

</figure>

CSS:

deinen bisherigen code +

#gallery figure:nth-of-type(7) {

-webkit-animation: wechseln 15s infinite;

animation: wechseln 15s infinite;

}

#gallery figure:nth-of-type(8) {

-webkit-animation: wechseln 15s infinite;

animation: wechseln 15s infinite;

}

... Bin selbst total am Anfang aber das wäre so meine logische Schlussfolgerung!

brainstuff · 1. April 2019

Hallo Nackththund94,

Danke für das was du da sagst... das scheint mir auch logisch zu sein und das habe ich auch schon versucht, aber das ist nicht genug.

Ich vermute. dass ich auch noch etwas bei den "keyframes" ändern muss.

Ich begreife auch nicht, warum es in dem html 6x <figure> für 3 Bilder hat.

Ich habe auch verzweifelt nach dem Platz gesucht wo ich mit top und left einstellen kann wo das Bild platziert werden soll.

Danke,

brainstuff

DER · 2. April 2019

Dein Code ist sehr Fehlerhaft, du solltest erstmal dafür sorgen, dass all die Fehler beseitigt werden.

Wie Du ein weiteres Bild einfügst?

Code

<figure> <img src="images/dan03.jpg" alt="1111">
<figcaption>333
</figcaption>
</figure>

Wir bräuchten Dahingehend mehr input. Was genau ist das Ziel? Ich wollte nicht das ganze CSS durchlesen, nur um herauszufinden was da passiert.

basti1012 · 2. April 2019

wie viele bilder willst du den insgesamt haben ? Weil einfach so wie ihr es gemacht habt klappt es nicht perfekt? Die Bider haben alle Anfangs Zeiten ( sage ich mal dazu ) wann die Animation beginnen soll. Wenn du eine unbestimmte Anzahl hinzufügen willst ,oder die Anzahl schwanken tut wird man wohl etwas JS brauchen. Bei einer festen Zahl ,zb 10 Bilder muß man nur etwas die Css ändern

Sempervivum · 2. April 2019

Das ist nun Mal der große Nachteil bei solch einer reinen CSS-Lösung: Sie ist extrem schwer zu erweitern.

brainstuff · 2. April 2019

Danke für eure Kommentare,

Das Ding ist eigentlich ganz einfach: Die Seite ist eine Slide show aus 5 Bildern .. beim Seitenaufruf wird Bild 1 angezeigt, nach x Sekunden wird es durch Bild 2 ersetzt, dann durch BIld 3 .... Bild 5 wird dann wieder durch Bild 1 ersetzt und das läuft so lange im Kreis, bis jemand auf das noch hinzuzufügende Menu klickt oder auf einen Link der unter der Bilder Serie eingeblendet wird

Also :

MENU = ein Ikon mit den 3 Strichen, was wenn man drauf klickt eine Menu auswahl aufklappt.

---------------------

BILDERSERIE (die 5 Bilder abwechselnt und in einer Endlosschleife

---------------------

link zu einer Kontakt Seite

Die Bilder müssen in der Mitte der Seite zentriert erscheinen.

Also so

_______________________

.........BILDER

_______________________

Es gibt dann noch eine 2. Version von der Seite für Smartphones ... da wird die Bilderserie nur vertuikal zentriert.

Also so:

___________________________

..OOBILDEROO

____________________________

Links hat es dabei nur einen schmalen Rand. Das Bild ist wieder in der entsprechenden Grösse, in der vertikalen Mitte vom Smartphone Bildschirm. Das alles ohne irgendwelche effekte (kein fading, kein reinschieben,..) einfach ein bild nach dem anderen in einer Endlosschleife.

Das Script was ich da gefunden habe, geht sehr gut mit 3 Bildern ... aber sobald ich da ein weiteres Bild (bzw 2 weitere Bilder) hinzufüge, geht das nicht mehr.

Danke für eure Hilfe, ich brauche das sehr dringend und schaffe das einfach nicht ohne eure Hilfe.

brainstuff

Sempervivum · 2. April 2019

Es gibt dafür zahlreiche fertige Skripte, die ich normaler Weise gern empfehle, aber wenn Du keine Übergangseffekte willst, dann versuche dies:

Code

    <script>
        var idx = 0;
        var slides = document.querySelectorAll("#gallery figure");
        function slideIt() {
            for (var i = 0; i < slides.length; i++) {
                if (idx == i) slides[i].style.display = "inline-block";
                else slides[i].style.display = "none";
            }
            if (idx < slides.length - 2) idx++;
            else idx = 0;
        }
        slideIt();
        setInterval(slideIt, 3000);
    </script>

Alles anzeigen

Hinter dem HTML einfügen, am besten vor dem schließenden </body>

brainstuff · 2. April 2019

Hallo Supervivum,

Ich habe das mit Deinem Script versucht, aber das geht nicht. Kann es sein, dass das nicht gehen will, weil das CSS für den Rest in einem *.css File ist? Das Scrppt im HTML verändert nichts.

brainstuff

Sempervivum · 2. April 2019

Was heißt denn "es geht nicht"? Wird nur ein Bild angezeigt oder werden alle auf einmal angezeigt oder gar keins?

Ich hatte es mit dem HTML aus deinem ersten Posting getestet; dieses <div id="gallery"> darf nicht verändert werden. Am besten wäre es, wenn Du es online hättest, damit man es sich ansehen kann. Ist sicher nur eine Kleinigkeit.

Ach so, das alte CSS musst Du löschen, jedenfalls soweit es die Slideshow betrifft, vor allem das position:absolute; bewirkt, dass alle Bilder übereinander liegen und nur das oberste sichtbar ist.

brainstuff · 2. April 2019

Hallo Sempervivum,

Ich habe jetzt ein anderes Script gefunden, was einfacher ist, aber was auch auf 3 Bilder geschränkt ist.

Ich habe Dir das auf

http://mail2vip.com/test/

gelegt ... da kannst Du sehen, dass das ordentlich funktioniert ... aber nur für 3 Bilder . Du findest auch im Nachfolgenden das CSS und das HTML ...

Ich muss nur noch wissen wie ich da zwei weitere Bilder dranhängen kann und wie ich die in die Mitte von der normalen WEB Seite stellen kann und wie ich sie auf der Smartphone Seite vertikal in die Mitte platzieren kann und horizontal mit einem kleinen Rand auf beiden Seiten.

brainstuff

<!DOCTYPE html>

</head>

<body

style="background-color: rgb(165,68,154);">

<h1>BildwechslerCSS</h1>

<main>

<h2>XXXXXXXX</h2>

</figure>

</figure>

</figure>

<figcaption>zzzzzzzzz</figcaption>

</figure>

</main>

</body>

</html>

Css

_________________

main {

background: transparent;

border-color: transparent;

}

#gallery {

position: relative;

margin: 0;

background: none;

border: none;

}

#gallery figure {

position: absolute;

display: inline-block;

top: 0;

left: 2em;

z-index: 1;

animation: wechseln 15s infinite;

}

#gallery figure:last-of-type {

position: relative;

}

#gallery > figure figcaption {

position: absolute;

left: 1em;

font-size: 2em;

font-weight: bold;

bottom: 0.5em;

z-index: 2;

color: white;

}

@keyframes wechseln {

0% {

opacity: 0;

}

20% {

opacity: 1;

}

40% {

opacity: 1;

}

60% {

opacity: 0;

}

100% {

opacity: 0;

}

#gallery figure:nth-of-type(2) {

animation-delay: 5s;

opacity: 0;

}

#gallery figure:nth-of-type(3) {

animation-delay: 10s;

opacity: 0;

}

#gallery figure:nth-of-type(4) {

animation-delay: 10s;

opacity: 0;

}

#gallery figure:nth-of-type(5) {

animation-delay: 10s;

opacity: 0;

}

Sempervivum · 2. April 2019

Da hast Du dir dummerweise wieder eine CSS-Lösung ausgesucht, die umständlich zu erweitern ist. Wenn es nicht anders ginge, würde ich es dir ja umändern aber prüfe zunächst, ob Du dich mit einer Javascript-Lösung anfreunden kannst.

Stef · 2. April 2019

Hey,

brainstuff : Bitte deinen Code in Code Tags stellen!

djheke · 2. April 2019

Guck mal hier. Vielleicht kannst Du was gebrauchen(sind 5 Bilder). Musst es natürlich auf Deine Bedürfnisse anpassen.

CSS-Slider

brainstuff · 3. April 2019

Hi djheke,

Danke für dieses script... das ist ganz prima.

Es läuft jetzt schon ganz toll, ich muss nur noch die Bildgrösse anpassen (das geht auch ganz einfach... das ist ganz toll in dem script erklärt).

Ich habe auch herausgefunden, wie man das Bild (für die mobile Seite) weiter oben platzieren kann.

Ich habe aber nocn nicht begriffen, wie man die Slides (für die mobile Version) linksbündig, mit einen 5px Rand, anordnen kann.

Wenn Du zufällig weisst wie das geht, erspart mir das das probieren.

Danke euch allen, ihr habt mir sehr geholfen.

brainstuff

bildergalerie in CSS

Jetzt mitmachen!

Teilen

Tags