[ERLEDIGT] Erste Versuche CSS Radio "Slider"

[rantanplan2000]

Moin,

ich habe durch ein buch "gelernt" wie man css "slider" macht. die beispiele waren aber so aufgebaut, dass die inputs "innterhalb" sind. hier ein grober rohbau:
https://jsfiddle.net/rantanplan2000/jLsupc5q/

jetzt möchte ich aber, dass die thumbnails außerhalb sind, dass ich diese eben mit dem grid schön verschieben kann. bzw. dieseauch wo anders plaziert werden können. der aktuelle stand ist hier:
https://jsfiddle.net/rantanplan2000/w9w0rgjh/

da ich dazu leider kein tutorial finde und das buch leider wie meist immr nicht weiter in die matherie eingeht, komme ich nicht weiter und wollte um theoretischen und praktischen rat fragen.

jetzt grübel ich etwas, wie ich weiter machen muss. aktuell ist die idee, dass ich den nth selektor einsetze. wenn z.B. radio id1 checked ist, werden die bilder .gallerie-bilder nth(2) und nth(3) auf opacity: 0; gesetzt. Wenn radio id2 aktiv ist, eben nth(1) und nth(3).

Tja. jetzt ist die Frage ob ich:

1. Ob ich das zu kompliziert machen will? Wenn nein, wie genau muss ich denn den Code dazu schreiben?
2. Wie macht man es richtig?

Vielen Dank für Ratschläge, Verweise auf Tutorials oder Codebeispiele. ;)

 

[SpiceLab]

http://stackoverflow.com/questions/33470191/css-checkbox-hack-with-non-sibling-content

 

[rantanplan2000]

Danke Speci,

leider ist es wie beim Beispiel 1 (https://jsfiddle.net/rantanplan2000/jLsupc5q/)
Das Label und Bild müssen zusammen stehen, dass wollte ich jetzt mal anders umsetzen. Dass eben eine Verknüpfung egal wo sich Label und IMG beginden zustande kommt.

Also als Beispiel ist im Header das Label und soll dann im Footer ein Bild laden (nur als Beispiel).

 

[SpiceLab]

Danke Speci,

leider ist es wie beim Beispiel 1 (https://jsfiddle.net/rantanplan2000/jLsupc5q/)
Das Label und Bild müssen zusammen stehen, dass wollte ich jetzt mal anders umsetzen. Dass eben eine Verknüpfung egal wo sich Label und IMG beginden zustande kommt.

Sie müssen im Markup nicht unmittelbar/direkt aufeinander folgen; zwischen ihnen dürfen sich auch weitere Elemente befinden; Hauptsache, sie befinden sich auf derselben (Geschwister-)Ebene.

• https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Geschwisterselektor
  

  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

Also als Beispiel ist im Header das Label und soll dann im Footer ein Bild laden (nur als Beispiel).

In meinem Demo befindet sich <main> zwischen <header> und <footer>.

Die ID your-target aus dem stackoverflow-Demo wird an <header> übergeben:

<header id="your-target">
  ...
  <a id="on" href="#your-target">
    Toggle content
  </a>
  <a id="off" href="#">
    Toggle content
  </a>
</header>
<main>
  ...
 </main>
<footer>
  ...
  <div class="content">Content here</div>
</footer>

Und <footer> als sein Geschwisterelement im best. Selektor (Zeile #18) hinzugefügt:

/* zusätzliche CSS-Regeln - ohne Einfluss auf die Funktionalität */
* {margin:0;padding:0;}
header,main,footer {padding:.75em;}
header,footer {background:#abc;}
main {background:#cde;}

/* bestehendes CSS von stackoverflow */
a {
  color: #000000;
  text-decoration: none;
}
#off {
  display: none;
}
.content {
  display: none;
}
#your-target:target ~ footer .content { /* footer ist ein Geschwisterelement von header */
  display: block;
}
#your-target:target #on {
  display: none;
}
#your-target:target #off {
  display: block;
}

Fiddle-Demo: https://jsfiddle.net/SpiceLab/qeog3pfq/

 

[SpiceLab]

Und eben im Netz herausgefischt: https://hacks.mozilla.org/2012/02/a-simple-image-gallery-using-only-css-and-the-target-selector/

Das zugehörige Demo http://jsfiddle.net/codepo8/wsD9L/1/ lässt sich gleichermaßen nach Deinen Vorstellungen umbauen.

Lösung gibt's von mir (noch) keine, damit Du die Knobelaufgabe erstmal eigenständig angehst, und so mehr daraus lernen wirst, anstatt blos meinen Fiddle-Code in Deinen zu migrieren.

 

[rantanplan2000]

Vielen lieben Dank Speci! Werd das alles in Ruhe anschauen.

 

[SpiceLab]

Vielen lieben Dank Speci!

Wie immer, gern geschehen :)

Werd das alles in Ruhe anschauen.

Guter Plan

 

[rantanplan2000]

Okay, super! Jetzt hab ichs verstanden. ;-) Danke!

Wenn man das mit keyframes bzw css animate kombiniert, braucht man für solche sachen eigentlich kein java mehr, oder gibts da auch irgendwie vor/nachteile, bis auf den browsersupport?

 

[SpiceLab]

Wenn man das mit keyframes bzw css animate kombiniert, braucht man für solche sachen eigentlich kein java mehr, oder gibts da auch irgendwie vor/nachteile, bis auf den browsersupport?

Achtung: Java != JavaScript ;)

• https://de.wikipedia.org/wiki/Java_(Programmiersprache)
• https://de.wikipedia.org/wiki/JavaScript

Kann man so nicht pauschal sagen. Kommt auf den Kontext des Seitenkonzepts an, was opportun(er) ist. Eventuell ist jQuery schon mit an Bord, womit sich die Frage dann von selbst geklärt hat.

Persönlich ziehe ich hier jQuery vor, weil's im Projekt schon migriert ist, als mit schnöden CSS-Hacks (Checkbox-Hack) herumzuhantieren, deren Halbwertszeit extrem überschaubar ist.

 

[SpiceLab]

Man kann auch Slider mit CSS bauen.

Klar, kann man das auch: http://cssslider.com/de/

War jetzt aber auch nicht das Thema.

@rantanplan2000 's Frage zielte darauf ab, ob mit transition u. animation gänzlich auf JavaScript verzichtet werden kann.

Ja - theoretisch. Kommt halt auf den konkreten Anwendungsfall an, ob, und was ein Slider sonst noch so an Features bieten soll, für die JS / jQuery in Frage kommt.