bildergalerie in CSS

  • 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>

    <html><head>



    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>form1test</title>



    <link rel="stylesheet" type="text/css" href="css/form1.css">


    </head>



    <body

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



    <main>

    <h2>xxxxxx</h2>


    <div id="gallery">


    <figure> <img src="images/dan03.jpg" alt="33333">

    <figcaption>333</figcaption>

    </figure>


    <figure> <img src="images/dan02.jpg" alt="22222">

    <figcaption>222

    </figcaption>


    </figure>

    <figure> <img src=""images/dan01.jpg" alt="1111">

    <figcaption>

    </figcaption>

    </figure>



    <figure> <img src="images/dan03.jpg" alt="33333">

    <figcaption>333

    </figcaption>

    </figure>



    <figure> <img src="images/dan02.jpg" alt="22222">

    <figcaption>222

    </figcaption>

    </figure>



    <figure> <img src="images/dan01.jpg" alt="1111">

    <figcaption>111

    </figcaption>

    </figure>



    </div>

    </main>


    </body>

    </html>



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



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



    Danke

    brainstuff



  • HTML:


    den bisherigen code +


    <figure> <img src="images/weiteresbild1.jpg" alt="xxxx">

    <figcaption>xxx

    </figcaption>

    </figure>


    <figure> <img src="images/weiteresbild2.jpg" alt="xxxx">

    <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!

  • 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

  • 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.

  • 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

  • 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

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

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

  • 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

  • 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.

  • 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>


    <html><head>


    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>form1test</title>


    <link rel="stylesheet" type="text/css" href="css/form4.css">


    </head>


    <body


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


    <h1>BildwechslerCSS</h1>

    <main>

    <h2>XXXXXXXX</h2>

    <figure id="gallery">

    <figure> <img src="images/dan01.jpg" alt="1">

    <figcaption>1</figcaption>

    </figure>

    <figure> <img src="images/dan02.jpg" alt="2">

    <figcaption>2</figcaption>

    </figure>

    <figure> <img src="images/dan03.jpg" alt="3">

    <figcaption>3</figcaption>

    </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;

    }

  • 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.

  • 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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!