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:
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 liegt daran, dass das CSS ist und kein Javascript. Du musst es in deiner CSS-Datei eintragen. Und dann das JS so erweitern:
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['data-filter'] == value.toLowerCase() || value == "All Menu") {
figure.classList.remove('hidden');
} else {
figure.classList.add('hidden');
}
});
}
});
Alles anzeigen
(ungetestet)
Das liegt daran, dass Du nur das img ausblendest, und nicht das gesamte figure. Bei dem figure wirkt dann das flex-basis: 350px; und es nimmt dennoch den Raum ein wie zuvor, auch wenn das Bild verschwunden ist. Setze das flex-basis für figure auf 0, dann wird es funktionieren.
Noch besser: Setze im Javascript eine Klasse "hidden" und blende dann im CSS das figure aus:
Das war jetzt wirklich ein wenig eine harte Nuss!
Der Schuldige ist das ul in dem Slider "Was sagen meine Kunden".
.testim .dots {
text-align: center;
position: absolute;
width: 100%;
bottom: 60px;
left: 0;
display: block;
z-index: 3333;
height: 12px;
padding: 0;
}
Alles anzeigen
Diesem weist Du eine Breite von 100% zu, damit es den umgebenden Container ausfüllt. Das Problem ist, dass dieses ul per Default ein padding hat. Das addiert sich zu der Breite, so dass sich mehr als 100% ergeben und die Breite des Browserfensters überschritten wird. Setze ich im Seiteninspektor das Padding auf 0 verschwindet die horizontale Scrollbar.
Natürlich, das ist zu empfehlen.
Übrigens, dies ist ganz schlecht:
Du löschst damit alle anderen Klassen, die das Element schon hat. Besser mit classList arbeiten:
Wenn Du den Filter, das wird ja wahrscheinlich eine Leiste mit Buttons werden, einfach im HTML dazwischen setzt, wird die Galerie nach unten rücken, Du brauchst nicht extra Platz zu machen.
ZitatVielleicht hast du ja eine Eingebung wie mich von den externen Scripts befreien kann.
Du kannst sie einfach herunter laden, die URL im src-Attribut kopieren, in der Adresszeile des Browsers einfügen. Dann wird die Datei geladen und Du kannst sie mit Rechtsklick, "Speichern unter" lokal speichern.
Ich nehme an, Du hast die Dateien von hier herunter geladen:
Und im dem Fall passt auch das, was Du auf deiner Seite hast. Warum es nicht funktioniert und wie man es korrigieren kann, habe ich nicht heraus gefunden. Aber anscheinend passt die Doku auf dieser Github-Seite nicht so richtig zu den Dateien, die dort liegen.
PS: Außerdem hast Du ein leeres a-Tag im HTML, statt dessen muss dieses den Inhalte des figure-Tags umschließen:
In der Doku wird angegeben, dass man das über CDN einbinden soll, d. h. im Head:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>
Und am Ende des Body:
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
Fancybox.bind('[data-fancybox]', {
// Your custom options
});
</script>
Versuche das zunächst so, wenn Du lieber unabhängig vom CDN sein willst, können wir das noch ändern.
Wie oben, Fancybox. Bezüglich der Lizenz finde ich auf Github dies:
ZitatFancybox is licensed under the GPLv3 license for all open source applications. A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).
Ich lese da auf Github:
Zitat
A simple, flexible, responsive, retina-ready jQuery lightbox plugin
Das bedeutet, dass Du jQuery vor nivo-lightbox.js einbinden musst.
Ich frage mich jedoch ob es empfehlenswert ist, ein Skript einzusetzen, das nicht mehr gepflegt wird und wozu es keine Doku gibt.
Klar, bzgl. der Lightbox haben wir die selbe Situation, ob mit divs oder mit figure-img-figcaption.
Was im CSS noch angepasst werden muss:
das li muss durch figure ersetzt werden und dem figure-Tag müssen wir das margin nehmen:
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.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;
}
.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
Und statt des ul ist jetzt das div unser Container für die Galerie und muss die Klasse "image-gallery" bekommen:
Da muss das CSS noch ein wenig mehr angepasst werden, ich sehe mir das an ...
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.