Ich würde gerne eine Galerie mit der Flexbox bauen mit Auswahlmöglichkeit
Normalerweise würde ich mir sowas Runterladen und anpassen.
Aber ich hätte lieber was mit Flexbox. Ist das überhaupt möglich?
Wenn Ja? Würde mir jemand Step by Step mit Rat und Tat zur Seite stehen
Hier soll es langsam wieder weitergehen
Habe eine Lightbox gefunden die passen könnte.
Aber im Augenblick stimmt die Smartphone Ansicht nicht .
Ich komm da nicht weiter.
das ist wohl nur ne kleinigkeit die mir da verborgen bleibt
Auf dem Smartphone scheint sich etwas zu überlappen, ist das das Problem, das Du meinst?
Auf dem Smartphone scheint sich etwas zu überlappen, ist das das Problem, das Du meinst?
Genau
Die Überlappung liegt daran, dass Du die Höhe einer Seite deines Onepagers auf 100vh begrenzt hast. Die Galerie passt dort nicht hinein und steht oben und unten über.
Ich sehe zwei Möglichkeiten, dass zu beheben:
Wegen der Nachteile von 1. würde ich 2. bevorzugen.
Noch einige Anmerkungen zur Galerie:
Dort werden Listenelemente ul,li verwendet. "Liste" ist ein dehnbarer Begriff, aber IMO ist es wenig angebracht, das für alles und jedes zu benutzen. figure-Tags mit figcaption für das Overlay wären wesentlich passender.
Und was die Lightbox betrifft: Leider geht der Link zur Doku ins Leere, anscheinend wird diese nicht mehr richtig gepflegt. Selber empfehle ich gern Fancybox:
Fancybox | Best JavaScript lightbox alternative
Allerdings sehe ich bei der aktuellen Version einen Menüpunkt "Pricing", da müsste man prüfen, wie es mit der Lizenz aussieht.
Ja genau, so habe ich mir das vor gestellt.
Damit auch das CSS funktioniert musst Du noch die Klasse zuweisen:
<figure>
<img src="img/galerie/dog/dog1.jpg" alt="Gerdtrud" />
<figcaption class="overlay">Gerdtrud</figcaption>
</figure>Da muss das CSS noch ein wenig mehr angepasst werden, ich sehe mir das an ...
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);
} Und statt des ul ist jetzt das div unser Container für die Galerie und muss die Klasse "image-gallery" bekommen:
<section id="galerie">
<div class="image-gallery">
<h1 class="heading-text">Gallerie</h1>
<figure>Klar, bzgl. der Lightbox haben wir die selbe Situation, ob mit divs oder mit figure-img-figcaption.
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.
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).
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!