Ankündigung

**daniel5959** · 20.10.2020, 13:02

Hallo,

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

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

daniel5959

**silent** · 20.10.2020, 13:16

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

**Sempervivum** · 20.10.2020, 13:20

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

**silent** · 20.10.2020, 13:34

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

**Sempervivum** · 20.10.2020, 14:52

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

**daniel5959** · 20.10.2020, 15:26

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

**Sempervivum** · 20.10.2020, 15:27

Leider wartet meine Lösung noch auf Freigabe ...

**silent** · 21.10.2020, 08:36

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

**Sempervivum** · 21.10.2020, 08:45

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

**silent** · 22.10.2020, 15:56

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">';
}
}
?>

**daniel5959** · 22.10.2020, 16:03

Hallo,

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

daniel5959

**silent** · 23.10.2020, 07:10

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

VG!

**silent** · 23.10.2020, 07:57

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>

Ankündigung

Diashow

Diashow

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

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

Online-Benutzer

Die neuesten Themen

Die neuesten Beiträge