Ankündigung

Einklappen
Keine Ankündigung bisher.

Diashow

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Diashow

    Guten Tag,
    ich möchte in meiner rechten Div ein Informations-Panal hinzufügen, welches man mit Bildern jederzeit updaten kann. Die Bilder sollen per Diashow angezeigt werden. Das funktioniert auch alles reibungslos. Mein Problem ist es, das ich das nicht hinbekomme, dass sich die Bilder automatisch an die Fenstergröße skalieren.
    Als hilfe, habe ich die Webseite "selfhtml" benutzt. Leider kenn ich mich kaum mit CSS aus. Durch probieren habe ich es nur kleiner bekommen, sodas es von der Breite stimmt, allerdings nicht von der Höhe. Als beispiel habe ich eine PDF-Datei in eine JPG-Datei umgewandelt (online) welches in der Mitte abgetrennt wird. Die Webseite wird in der hälfte getrennt, sodas ich eine linke Div habe und eine rechte.

    Anbei zu finden ist der HTML-Code, sowie der CSS-Code (Animation-Code wurde weggelassen).

    VG

    HTML-Code:
    <center>
    <div id="rightdiv">
    <h1> Informationen </h>
    <main>
    <div id="gallery">
    <figure> <img src="/jpg/Bild0.jpg">
    </figure>
    <figure> <img src="/jpg/Bild1.jpg">
    </figure>
    <figure> <img src="/jpg/Bild2.jpg">
    </figure>
    <figure> <img src="/jpg/Bild3.jpg">
    </figure>
    <figure> <img src="/jpg/Bild4.jpg">
    </figure>
    </div>
    </main>
    </div>
    </center>
    Code:
    main {
    padding: 0;
    }
    
    #gallery {
    width: 20em;
    height: 15em;
    margin: 0 auto;
    overflow: hidden;
    }
    
    @media (min-width: 100%) {
    #gallery {
    width: 100%;
    height: 100%;
    }
    }
    
    @media (max-width: 100%) {
    #gallery {
    width: auto;
    height: auto;
    }
    }
    
    #gallery figure {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    }
    
    #gallery img {
    width: 100%;
    margin: 0;
    padding: 0;
    }

  • #2
    Hallo,

    CSS ist jetzt nicht mein Ding, aber mal hiermit versuchen - siehe

    >> https://www.html-seminar.de/bilder-b...ive-design.htm

    daniel5959
    Zuletzt geändert von daniel5959; 20.10.2020, 13:05.
    FindeLinks.de - Kurzinfos mit Linkempfehlung
    Homepage-FAQs.de - seit Ende 2020 offline

    Kommentar


    • #3
      Hallo daniel5959 ,
      diese Seite hatte ich mir auch schon angeschaut gehabt, leider ohne Erfolg.
      Sobal ich diese anwende, werden die Bilder nicht mehr angezeigt.
      Dennoch bedanke ich mich bei dir.

      VG

      Kommentar


      • #4
        Hast Du das online? Dann wäre es am besten, wenn Du die URL posten würdest. Die Animation kann schon wichtig sein, wenn sie zusätzliches CSS hinzu fügt o. ä.

        Kommentar


        • #5
          Hallo Sempervivum ,
          die Webseite ist nicht Online und ich habe auch nicht vor diesen Online zu nehmen, da dieser ledeglich als Übung für mich selber dient. (Bitte nicht falsch verstehen)
          Den Code für die Animation kannst du unten entnehmen.

          VG

          Code:
          #gallery figure {
          height: auto;
          animation: slide 18s infinite ease-in-out;
          }
          
          #gallery:hover figure {
          animation-play-state: paused;
          }
          
          @keyframes slide {
          0% {
          top: 0
          }
          12% {
          top: 0
          }
          16% {
          top: -100%
          }
          28% {
          top: -100%
          }
          32% {
          top: -200%
          }
          44% {
          top: -200%
          }
          48% {
          top: -300%
          }
          60% {
          top: -300%
          }
          65% {
          top: -400%
          }
          78% {
          top: -400%
          }
          83% {
          top: -500%
          }
          95% {
          top: -500%
          }
          100% {
          top: 0
          }
          }

          Kommentar


          • #6
            Ich schätze diese Slideshows mit nur-CSS nicht so besonders weil es i. allg. ein Qual ist, wenn man die Anzahl der Slides ändern will. Aber spaßeshalber habe ich diese mal umgestellt, so dass sie responsiv ist. Eine Herausforderung dabei ist es, einen Container, in diesem Fall #gallery, auf ein festes Seitenverhältnis einzustellen, wenn sich die Breite ändert. Dabei habe ich einen Trick mit padding-top angewendet, der hier beschrieben wird:
            https://stackoverflow.com/questions/...a-div-with-css
            Gleich die erste Antwort mit dem grünen Haken.
            Code:
            <!doctype html>
            <html lang="en" dir="ltr">
            <head>
                <style>
                    body {
                        margin: 0;
                        display: flex;
                    }
                    #leftdiv,
                    #rightdiv {
                        flex: 1;
                    }
                    #gallery {
                        width: 100%;
                        padding-top: 75%;
                        height: 0;
                        margin: 0 auto;
                        overflow: hidden;
                        position: relative;
                    }
                    @media (min-width: 100%) {
                        #gallery {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    @media (max-width: 100%) {
                        #gallery {
                            width: auto;
                            height: auto;
                        }
                    }
                    #gallery figure {
                        position: absolute;
                        width: 100%;
                        margin: 0;
                        padding: 0;
                    }
                    #gallery img {
                        width: 100%;
                        margin: 0;
                        padding: 0;
                    }
                    #gallery figure {
                        height: auto;
                        animation: slide 18s infinite ease-in-out;
                    }
                    #gallery:hover figure {
                        animation-play-state: paused;
                    }
                    @keyframes slide {
                        0% {
                            top: 0
                        }
                        12% {
                            top: 0
                        }
                        16% {
                            top: -100%
                        }
                        28% {
                            top: -100%
                        }
                        32% {
                            top: -200%
                        }
                        44% {
                            top: -200%
                        }
                        48% {
                            top: -300%
                        }
                        60% {
                            top: -300%
                        }
                        65% {
                            top: -400%
                        }
                        78% {
                            top: -400%
                        }
                        83% {
                            top: -500%
                        }
                        95% {
                            top: -500%
                        }
                        100% {
                            top: 0
                        }
                    }
                </style>
                <title>
                    Responsive CSS Only Slideshow
                </title>
            </head>
            <body>
                <div id="leftdiv"></div>
                <div id="rightdiv">
                    <h1> Informationen </h1>
                    <main>
                        <div id="gallery">
                            <figure>
                                <img src="https://via.placeholder.com/800x600">
                                <img src="https://via.placeholder.com/800x600">
                                <!-- usw. es muessen 6 Grafiken sein
                            </figure>
                        </div>
                    </main>
                </div>
            </body>
            </html>
            Eine gute Herausforderung, um weiter zu lernen, wäre, das Ganze auf die Webanimations-API umzustellen, dann könnte man die Berechnung der Keyframes automatisch machen.
            https://wiki.selfhtml.org/wiki/JavaS...Web_Animations

            Kommentar


            • #7
              Hallo,

              vielleicht können die CSS-Experten etwas mit den Codeschnipseln anfangen.

              Ich bräuchte die ganze Testumgebung, also die komplette HTML- und CSS-Datei sowie die Bilder. Evtl. den Text durch "lorem ipsum"-Text und die Bilder durch kostenlose Pixabay (pixabay.com/de/) der gleichen Größe ersetzen.

              daniel5959
              FindeLinks.de - Kurzinfos mit Linkempfehlung
              Homepage-FAQs.de - seit Ende 2020 offline

              Kommentar


              • #8
                Leider wartet meine Lösung noch auf Freigabe ...

                Kommentar


                • #9
                  Guten Morgen Sempervivum ,
                  wie meinst du das?
                  Du musst mir ja nicht die Lösung direkt sagen, du könntest mich auch einfach auf den richtigen Weg bringen.

                  VG

                  Kommentar


                  • #10
                    Guten Morgen silent, ich hatte die Lösung schon gepostet, aber das Forum hier hat einen Spamfilter und der hat dieses Posting zunächst gesperrt. Vermutlich weil zwei Links darin waren. Es muss von einem Moderator/Admin erst frei gegeben werden. Ich versuche es Mal ohne Links per privater Nachricht ...

                    Kommentar


                    • #11
                      Update:

                      Ich bin mittlerweile soweit, dass ich die Inhalte automatisch aus dem Ordner beziehen kann. Nach den empfehlungen von Sempervivum und eigener recherche, bin ich soweit, dass ich das versuchen werde, mit Javascript zu verwirklichen (automatische Diashow).


                      Code zum beziehen des inhaltes aus einem Ordner:
                      Code:
                      <?php
                      $verzeichnis = "/.../.../daten/jpg/";
                      $ordner = opendir ($_SERVER["DOCUMENT_ROOT"] . $verzeichnis);
                      while ($file = readdir ($ordner)) {
                      if($file != "." && $file != "..") {
                      echo '<img src="' . $verzeichnis . $file . '" alt="Boot">';
                      }
                      }
                      ?>

                      Kommentar


                      • #12
                        Hallo,

                        ich muss da aussteigen - betrifft auch gesendete Nachricht an mich - und es den CSS-, JS und PHP-Experten überlassen.

                        daniel5959
                        Zuletzt geändert von daniel5959; 22.10.2020, 16:10.
                        FindeLinks.de - Kurzinfos mit Linkempfehlung
                        Homepage-FAQs.de - seit Ende 2020 offline

                        Kommentar


                        • #13
                          Guten Morgen daniel5959 ,
                          dennoch möchte auch ich dir danken, dass du dir dafür Zeit genommen hast.

                          VG!

                          Kommentar


                          • #14
                            Update:

                            Soweit alles gut mit Javascript, auch alles sehr verständlich.

                            Dennoch habe ich auch hier das Problem, dass es sich nicht automatisch der Bildgröße anpasst.
                            Desweiteren muss ich noch die Zeit, für das wechseln auf das andere Bild, anpassen.

                            VG


                            Code:
                            <center>
                            <div id="rightdiv">
                            <h1> Informationen </h>
                            <body>
                            <meta http-equiv="Content-Type" content="text/html; width=device-width, initial-scale=1">
                            <style type="text/css">
                            /* ein paar allgemeine formatierungen */
                            * {
                            margin: 0;
                            padding: 0;
                            }
                            body {
                            font: 80% sans-serif;
                            background-color: #fff;
                            margin: 10px;
                            color: #000;
                            }
                            /* wichtige formatierungen für cycle */
                            #bilder {
                            width: 100%;
                            height: auto;
                            margin: 20px 5px;
                            padding-top: 56.25%;      /* sollte eigt bild anpassen? */
                            position: relative;
                            }
                            /* boarder für das bild */
                            #bilder img {
                            padding: 15px;
                            border: 1px solid #ccc;
                            background-color: #eee;
                            width: 100%;
                            height: auto;
                            position: absolute;
                            }
                            </style>
                            <script type="text/javascript" src="jquery.js"></script>
                            <script type="text/javascript" src="cycle.js"></script>
                            <script type="text/javascript">
                            $(function(){
                            $('#bilder').cycle();
                            });
                            </script>
                            <div id="bilder">
                            <!--
                            ini_set('display_errors', '1'); <---|
                            error_reporting(E_ALL); <---| Anzeige für Fehler
                            var_dump($file); <---|
                            -->
                            <?php
                            /* $_SERVER["DOCUMENT_ROOT"] = /var/www/html
                            Bilder werden RELATIV zum $_SERVER["DOCUMENT_ROOT"] geladen */
                            $verzeichnis = "/daten/jpg/";
                            $ordner = opendir ($_SERVER["DOCUMENT_ROOT"] . $verzeichnis);
                            while ($file = readdir ($ordner)) {
                            if($file != "." && $file != "..") {
                            echo '<img src="' . $verzeichnis . $file . '" alt="Load Error.">';
                            }
                            }
                            ?>
                            </div>
                            </body>
                            </div>
                            </center>

                            Kommentar

                            homepage-forum.de - Hilfe für Webmaster! Statistiken

                            Einklappen

                            Themen: 56.805   Beiträge: 430.091   Mitglieder: 28.558   Aktive Mitglieder: 55
                            Willkommen an unser neuestes Mitglied, Koller-Consulting.

                            Online-Benutzer

                            Einklappen

                            299 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 296.

                            Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

                            Die neuesten Themen

                            Einklappen

                            Die neuesten Beiträge

                            Einklappen

                            Lädt...
                            X