nicht angemeldet
Bildergalerie nur mit CSS
Julius
0 
Matthias Apsel
0 0 Matthias Apsel
0
0 
marctrix
0 Julius
0
Bildergalerie nur mit CSS
Julius
Camping_RIDERMoin!
Ich versuche gerade eine Bildergalerie nur mit CSS zu erstellen. Die Lösung soll sowohl ohne JavaScipt als auch (rudimentär) ohne CSS funktionieren und keine HTTP-Requests erfordern (bisherige Lösung hängt das anzufordernde Bild als Parameter an die URL):
HTML:
<section id="b1" class="b111">
<p><< <a href="#b2">>></a></p>
<p>Erste Seite</p>
</section>
<section id="b2" class="b123">
<p><a href="#b1"><<</a> <a href="#b3">>></a></p>
<p>Zweite Seite</p>
</section>
<section id="b3">
<p><a href="#b2"><<</a> >></p>
<p>Dritte Seite</p>
</section>
CSS:
section {display:none;}
section:target {display:block;}
section:first-of-type {display:block;}
section:not(:first-of-type):target~section:first-of-type {display:none;}
⇒ Codepen
Ich bin mir sicher, dass es zumindest an der letzten Zeile hängt. Dort versuche ich für den Fall, dass nicht das erste Bild ausgewählt ist, die erste section auszublenden, was aber nicht klappt: Bei den Fragment-Identifiern #b2 und #b3 sind immer die erste und die zweite oder dritte section zu sehen.
So stelle ich mir das von der Funktion her vor: https://codepen.io/jcm/pen/EZqrjZ (quick and dirty mit JavaScript nachgeholfen)
Was mache ich falsch? Kann ich das gewünschte Verhalten überhaupt nur mit CSS erreichen?
Gruß
Julius
akzeptierte Antworten
Bildergalerie nur mit CSS
Matthias Apsel
Bewertung: keine Bewertung
Bildergalerie nur mit CSS
Julius
Bewertung: keine Bewertung
-
Hallo Julius,
> section:not(:first-of-type):target~section:first-of-type {display:none;}Ich bin mir sicher, dass es zumindest an der letzten Zeile hängt. Dort versuche ich für den Fall, dass nicht das erste Bild ausgewählt ist, die erste
sectionauszublenden, was aber nicht klappt: Bei den Fragment-Identifiern#b2und#b3sind immer die erste und die zweite oder drittesectionzu sehen.Was mache ich falsch?
Du denkst, CSS könne rückwärts selektieren. Derzeit ist das nicht möglich. Der Geschwisterselektor selektiert nur die jüngeren Geschwister.
Bis demnächst
Matthias-
Ein möglicher Ansatz wäre, das default-Anzeige-Element in der logische Folge zuletzt zu notieren, und mit flex order es visuell als erstes zu präsentieren. Damit wäre die Lösung mit dem Sybling-Selektor machbar.
-
Hallo Beat - der Beat? Cappuchino?
Bis demnächst
Matthias-
Ja, der bin ich. Hätte nicht gedacht, dass man hier wiedererkannt wird. Allerding: RIP elcappuccino. Ich habe die letzten 6 Jahre Webdesign ganz liegen gelassen. Derzeit mache ich einen neuen Start.
So nebenbei, habe mich versucht, hier in den alten Account reinzuhacken, ohne Erfolg. Also bin ich mit neuem Account am Start.
-
Hallo Beat,
Ja, der bin ich. Hätte nicht gedacht, dass man hier wiedererkannt wird.
Doch, ich bin begeistert, von dir zu lesen.
So nebenbei, habe mich versucht, hier in den alten Account reinzuhacken, ohne Erfolg. Also bin ich mit neuem Account am Start.
Woran scheiterts?
Benutzername und E-Mail kann ich dir zukommen lassen, letztere auch ändern. So kannst du dir eine PW-Reset-Mail schicken lassen.
Willkommen zurück!
Bis demnächst
Matthias-
Benutzer/Anmeldename war der gleiche wie mein jetziger Nick, aber eventuell auch [Bb]eatovich
-
-
-
-
-
-
Hallo marctrix,
Du denkst, CSS könne rückwärts selektieren.
p:nth-last-child(2)?Das ist keine Rückwärts-Selektion. Das ist ein Zählen aller Absätze. Und zwar imho von vorn. („Insgesamt haben wir 8 Absätze, ich brauche den zweitletzten, also den siebenten.“)
Bis demnächst
Matthias
-
-
Hallo Matthias,
Du denkst, CSS könne rückwärts selektieren. Derzeit ist das nicht möglich. Der Geschwisterselektor selektiert nur die jüngeren Geschwister.
Interessant, das wusste ich noch nicht, vielen Dank für den Hinweis! Steht das auch irgendwo im Wiki?
Ich habe es jetzt mit meinen beschränkten JavaScript-Kenntnissen gelöst, ohne
target-Pseudoklasse, weil das CSS via:targetvor dem JS wirkte, das erste Bild ausblenden sollte, und das gab ein hässliches Aufblitzen des zweiten Bildes, während das erste noch nicht ausgeblendet war.Ohne CSS und JavaScript ist die Lösung immer noch brauchbar, daher sah ich keinen Anlass, mich mit dem Checkbox-Hack zu befassen und das einzusetzen.
Gruß
Julius-
Hallo Julius,
Der Geschwisterselektor selektiert nur die jüngeren Geschwister.
Interessant, das wusste ich noch nicht, vielen Dank für den Hinweis! Steht das auch irgendwo im Wiki?
„Werden zwei einfache Selektoren durch die Tilde („~“) miteinander verbunden, z.B. „E ~ F“, so werden alle F-Elemente angesprochen, die im Elementbaum in derselben Ebene auf ein E-Element folgen - unabhängig davon, ob sich zwischen den Elementen weitere, im Selektor nicht genannte, Elemente befinden.“
Du kannst natürlich gern einen Satz einfügen, der das noch deutlicher formuliert.
Bis demnächst
Matthias-
Hallo Matthias,
Du kannst natürlich gern einen Satz einfügen, der das noch deutlicher formuliert.
Ich habe das „folgen“ einfach nur kursiv hervorgehoben, das sollte reichen – vielleicht hätte ich es dann auch nicht einfach so überlesen.
Aber kann ich auch im Allgemeinen in CSS nicht rückwärts selektieren? Also zum Beispiel einen Thread (bzw. das
header-Element des ersten Eintrags) hier im Forum, wenn es neue, ungelesene Einträge enthält? Dafür bräuchte ich dann eine Klasse à lahas-unread-entriesim HTML, oder?Gruß
Julius-
Hallo Julius,
Ich habe das „folgen“ einfach nur kursiv hervorgehoben, das sollte reichen – vielleicht hätte ich es dann auch nicht einfach so überlesen.
Seit einiger Zeit heißt der im englischen auch offiziell following-sibling combinator. Früher hieß er general sibling combinator.
Die Umbennenung finde ich gut.
Aber kann ich auch im Allgemeinen in CSS nicht rückwärts selektieren?
Nein, derzeit ist das nicht möglich.
Bis demnächst
Matthias
-
-
-
-
-
Kann ich das gewünschte Verhalten überhaupt nur mit CSS erreichen?
Das geht mit dem "Radio-Hack", bzw. "Checkbox Hack". Damit kannst du eine "rückwärts"-Selektion simulieren ohne JS. Alle reinen CSS-Gallerien die ich kenne arbeiten damit.
-
Aloha ;)
Kann ich das gewünschte Verhalten überhaupt nur mit CSS erreichen? Das geht mit dem "Radio-Hack", bzw. "Checkbox Hack". Damit kannst du eine "rückwärts"-Selektion simulieren ohne JS. Alle reinen CSS-Gallerien die ich kenne arbeiten damit.
Der Wiki-Artikel mit Beispielen dazu wird leider einfach nicht fertig, weil ich seit einer Weile keine Zeit dafür finde. Aber danke für die Anregung; wenn ich mal wieder Zeit habe, daran weiterzubasteln, bau ich noch ne Bildergalerie ein 😉
Grüße,
RIDER
-
:) Fett! Aber auch derbst aufwendig.
-
-