Dar war anstatt Semicolon Doppelpunkt .
Jetzt ist es im Script
Und was genau soll ich aus dem css nehmen?
Dar war anstatt Semicolon Doppelpunkt .
Jetzt ist es im Script
Und was genau soll ich aus dem css nehmen?
Dein Post #40 erklärt einiges Jetzt schau ich mal wo ich das in der css unterbringe
Den hatte ich schon lokal korrigiert.
Ich versuche jetzt alles umzusetzen dann lade ich neu hoch
So es ist neu hochgeladen
style.css
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.image-gallery>figure {
margin: 0;
flex-basis:350px;
/* width: 350px; */
position: relative;
cursor: pointer;
}
.image-gallery::after {
content: "";
flex-basis: 350px;
}
.image-gallery figure img {
object-fit: cover;
max-width: 100%;
height: auto;
vertical-align: middle;
border-radius: 5px;
}
figure.hidden {
flex-basis: 0;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(57, 57, 57, 0.502);
top: 0;
left: 0;
transform: scale(0);
transition: all 0.2s 0.1s ease-in-out;
color: #fff;
border-radius: 5px;
/* center overlay text */
display: flex;
align-items: center;
justify-content: center;
}
/* hover */
.image-gallery figure:hover .overlay {
transform: scale(1);
}
Alles anzeigen
filter.css
/* body,h1,ul,li{
margin: 0;
padding: 0;
} */
body{
background-color: #667d8e;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#filter{
width: 85%;
margin: 50px auto;
}
#filter>ul{
width: 100%;
display: flex;
justify-content: center;
margin-top: 10px;
border-bottom: 2px solid rgba(2, 2, 2, 0.57);
padding-bottom: 10px;
box-sizing: border-box;
margin-bottom: 10px;
}
#filter>ul>li{
list-style: none;
background-color: rgb(191, 155, 230);
padding: 5px 10px;
margin: 0 10px;
cursor: pointer;
font-size: 1.2em;
}
#filter>ul>li.active{
background-color: rgba(41, 255, 41, 0.897);
}
.photo{
width: 85%;
padding: 0 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.photo img{
width: 300px;
height: 180px;
margin-bottom: 10px;
}
Alles anzeigen
und das script
const liItem = document.querySelectorAll('ul li');
const figureItem = document.querySelectorAll('div.image-gallery figure');
liItem.forEach(li => {
li.onclick = function() {
//active
liItem.forEach(li => {
li.classList.remove('active');
})
li.classList.add("active");
//Filter
const value = li.textContent;
figureItem.forEach(figure => {
if (figure.dataset.filter == value.toLowerCase() || value == "All") {
figure.classList.remove('hidden');
} else {
figure.classList.add('hidden');
}
});
}
});
Alles anzeigen
noch ist aber der Wurm drin
Man! Wo nimmst du das alles nur her?
Das hätte ich nie hinbekommen. Super, dass es das Forum gibt.
Vielen Dank!
Wenn man versteht, wie es funktioniert, kann man das alles durch logische Überlegung herleiten.
Das Layout ist immer noch ein wenig unsauber. Wenn ich ein display:none hinzu füge, sieht es besser aus. Und auf das flex-basis kann man dann verzichten:
Das ist gut. Es kommen ja noch Bilder später dazu.
Ich hab mir mal den gesamten Code genau angeschaut um auch alles nachvollziehen und verstehen.
Dabei ist mir aufgefallen, dass ich viel weniger und verständlichen html- Code habe als zb. mit Bootstrap.
Was ich gut fände wäre, wenn ich einen Fliter bei der Galerie auswähle die animiert zu ihrem Platz gleiten. so wie hier
Ist das überhaupt möglich bzw. wie groß wäre der Aufwand?
ZitatDabei ist mir aufgefallen, dass ich viel weniger und verständlichen html- Code habe als zb. mit Bootstrap.
Das ist genau der Grund, warum ich selbst kein Freund von Bootstrap bin. Freut mich, dass Du das auch so siehst.
Was die Animation mit dem Gleiten zum Platz betrifft, so habe ich das schon bei Isotope gesehen, das Du am Anfang gepostet hattest. So weit ich das überblicke werden dort die Positionen nicht mit Flex oder Grid fest gelegt sondern komplett mit Javascript berechnet.
Auf der einen Seite bin ich nicht so dafür, das Rad neu zu erfinden aber auf der anderen wäre es eine interessante Herausforderung, so etwas wie bei Ben Yahia selbst aufzubauen. Der Effekt, dass die Bilder von unten her eingleiten, wäre noch relativ einfach zu machen: Wie bisher die Positionen durch Flex festlegen lassen, aber direkt nach dem Filtern durch transform:translate die Position nach unten verschieben und dann mit transform: translate(0,0) an den endgültigen Platz gleiten lassen. Die Animation kann man dabei durch CSS machen lassen, man braucht nur die Positionen am Anfang und Ende zu setzen.
Vielleicht wäre das ja für dich eine Herausforderung . Für mich ist es ein nettes Gadget auf das ich warte bist jemand es umgesetzt hat.
Also erstmal unwichtig.
Was mir wirklich aufgefallen ist und mir nicht gefällt ist:
Wenn ich die Seite aufrufe und über den Link Galerie zu dieser wechsel ist erst mal leer erst bim betätigen eines Filters werden die Bilder angezeigt.
Ich habe das
im verdacht.
Da müsst wohl noch was dazu
Du hast im HTML schon die Klasse "hidden" gesetzt, das brauchst Du nicht, sie wird erst beim Filtern durch JS gesetzt für die Elemente, die nicht angezeigt werden sollen.
Bin ich blöd? langsam bekomm ich zweifel
<div class="image-gallery photo">
<figure data-filter="dog">
<a data-fancybox="gallery" href="img/galerie/dog/dog1.jpg">
<img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" />
<figcaption class="overlay">Gerdtrud</figcaption>
</a>
</figure>
<figure data-filter="food">
<a data-fancybox="gallery" href="img/galerie/food/kul1.jpg">
<img src="img/galerie/food/kul1_t.jpg" alt="" />
<figcaption class="overlay">Entenschinken luftgetrocknet</figcaption>
</a>
</figure>
<figure data-filter="heimat">
<a data-fancybox="gallery" href="img/galerie/heimat/heimat1.jpg">
<img src="img/galerie/heimat/heimat1_t.jpg" alt="" />
<figcaption class="overlay">Heimat</figcaption>
</a>
</figure>
<figure data-filter="snake">
<a data-fancybox="gallery" href="img/galerie/snake/korn1.jpg">
<img src="img/galerie/snake/korn1_t.jpg" alt="" />
<figcaption class="overlay">Abgestreift</figcaption>
</a>
</figure>
<figure data-filter="food">
<a data-fancybox="gallery" href="img/galerie/food/kul2.jpg">
<img src="img/galerie/food/kul2_t.jpg" alt="" />
<figcaption class="overlay">Scaloppina Parmigiana</figcaption>
</a>
</figure>
<figure data-filter="dog">
<a data-fancybox="gallery" href="img/galerie/dog/dog2.jpg">
<img src="img/galerie/dog/dog2_t.jpg" alt="Gerdtrud" />
<figcaption class="overlay">Welpen-Gerdtrud </figcaption>
</a>
</figure>
<figure data-filter="snake">
<a data-fancybox="gallery" href="img/galerie/snake/korn3.jpg">
<img src="img/galerie/snake/korn3_t.jpg" alt="" />
<figcaption class="overlay">Kornnatter</figcaption>
</a>
</figure>
<figure data-filter="heimat">
<a data-fancybox="gallery" href="img/galerie/heimat/heimat2.jpg">
<img src="img/galerie/heimat/heimat2_t.jpg" alt="" />
<figcaption class="overlay">Heimat</figcaption>
</a>
</figure>
<figure data-filter="snake">
<a data-fancybox="gallery" href="img/galerie/snake/korn2.jpg">
<img src="img/galerie/snake/korn2_t.jpg" alt="" />
<figcaption class="overlay">Kornnatter</figcaption>
</a>
</figure>
Alles anzeigen
ich find da keine class="hidden" . Sorry aber ich vertsteh dich da gerade nicht
Ich verstehe das jetzt auch nicht: Wenn ich jetzt miflo.de lade, sind die Bilder am Anfang sichtbar und keine Klasse "hidden" am figure.
Dieses:
hatte ich aus miflo.de kopiert, allerdings aus der Inspektor-Ansicht, d. h. diese Klasse kann genau so gut durch JS gesetzt worden sein. Da habe ich wohl ein wenig Verwirrung gestiftet, tut mir Leid.
Da die Bilder jetzt nach dem Laden sichtbar sind, ist aber jetzt alles OK, hoffe ich?
Ich hab das jetzt so verstanden
<div class="image-gallery photo">
<figure data-filter="dog" class="hidden">
<a data-fancybox="gallery" href="img/galerie/dog/dog1.jpg">
<img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" />
<figcaption class="overlay">Gerdtrud</figcaption>
</a>
</figure>
<figure data-filter="food" class="hidden">
<a data-fancybox="gallery" href="img/galerie/food/kul1.jpg">
<img src="img/galerie/food/kul1_t.jpg" alt="" />
<figcaption class="overlay">Entenschinken luftgetrocknet</figcaption>
</a>
</figure>
Alles anzeigen
Das hat bei mir keine Auswirkung. Nach dem Hochladen und klick auf Galerie in der Navigation kommt das
Erst wenn ich auf einen Filter klicke kommen entsprechen Bilder. Aber die Thumbnails sollten ja gleich zu sehen sein.
Jetzt verstehe ich überhaupt nichts mehr: Bei meinem Posting #57 waren nach dem Laden alle Bilder sichtbar und keine Klasse "hidden" im figure. Also alles in Ordnung.
Jetzt ist die Klasse jedoch drin, auch in der Quelltextansicht und folgerichtig keine Bilder sichtbar. In dem folgenden Screenshot habe ich mit dem Seiteninspektor die Klasse gelöscht und sofort wird das eine Bild sichtbar.
Auf jeden Fall muss diese Klasse heraus aus dem HTML. Wenn Du sie in deinem Editor nicht siehst, müssen wir weiter forschen.
ok jetzt ist es so
<div class="image-gallery photo">
<figure data-filter="dog">
<a data-fancybox="gallery" href="img/galerie/dog/dog1.jpg">
<img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" />
<figcaption class="overlay">Gerdtrud</figcaption>
</a>
</figure>
<figure data-filter="food">
<a data-fancybox="gallery" href="img/galerie/food/kul1.jpg">
<img src="img/galerie/food/kul1_t.jpg" alt="" />
<figcaption class="overlay">Entenschinken luftgetrocknet</figcaption>
</a>
</figure>
Alles anzeigen
was mich etwas irritiert, ist dass h1 Überschrift und ie Filterauswahl erst mittig angezeigt wird und erst bei Filteranwendung alles hochrutscht und man die Bilder sehen kann.
vielleicht ist hier was falsch?
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.