ZitatDie Frage ist eigentlich nur wie und ob man mit Css den Inhalt eines Containers auslesen kann,so das
...
Ich schaffes bis jetzt ja auch nicht
Ich glaube, das würde ich auch nicht schaffen und ich bezweifle, dass es möglich ist.
ZitatDie Frage ist eigentlich nur wie und ob man mit Css den Inhalt eines Containers auslesen kann,so das
...
Ich schaffes bis jetzt ja auch nicht
Ich glaube, das würde ich auch nicht schaffen und ich bezweifle, dass es möglich ist.
Die Methode 1 funktioniert deshalb nicht, weil Du dich zwei Mal auf das load-Event beziehst. Wenn Du mit body.addEventListener('load', function(){den Listener registriert, hat dieses Event schon gefeuert und feuert nicht wieder.
Also entweder so:
https://jsfiddle.net/Sempervivum/7xzavaLw/1/
oder so:
https://jsfiddle.net/Sempervivum/8p1g6kx9/5/
Gleiches Problem im Fiddle: Lässt man Loadtype auf onLoad funktioniert es ebenfalls nicht.
Wenn man die Seite ohne Webserver lädt, funktioniert der Einzug nicht, wenn man das Protokoll weg lässt.
Versuche dies:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<script>
$("figure img").each(function (idx, item) {
var url = $(this).attr("src");
var caption = $(this).next("figcaption").text();
$(this).wrap('<a></a>');
var atag = $(this).parent();
var caption = atag.next("figcaption").text();
atag.attr({ href: url, "data-fancybox": "gallery", "data-caption": caption });
})
</script>
Alles anzeigen
1. Das Javascript aus Posting #17 ist auf das HTML aus Posting #15 zugeschnitten.
2. Da die JS- und CSS-Datei von einem CDN geladen wird, benötigt man eine Internetverbindung. Ist das nicht gewünscht, muss man sie herunter laden und selber hosten.
Beide Varianten haben bei mir funktioniert. Wenn sie es bei dir nicht tun, dass poste mal den Code oder die URL der Seite.
Scrollbar ist bei mir auch nicht. Die Seite ist responsiv und passt sich an die Fensterbreite an. Und die Seite frisst wirklich sehr viel Rechenzeit: CPU-Auslastung wenn sie offen ist über 60%, ohne um 5%.
Animationen brauchen im allg. viel Rechenzeit und die Uhr bewegt sich ja ständig. Deaktiviere doch die Ani. mal probeweise, dann siehst Du, ob es daran liegt.
Bei mir das gleiche.
ZitatWie reagiert die Bibiliothek wenn man nicht wie hier 9 Bilder sondern zb 150 Bilder hat?
Da erwarte ich keine Probleme. Die Elemente der Lightbox sind ja nur einmal vorhanden und werden nicht für jedes Bild extra angelegt.
Habe aber selber keine Erfahrung mit Fancybox weil ich selber iLightbox benutze.
ZitatSchade das die Fancybox kein weiter button hat um die Bilder zu Blättern ,damit man nicht immer auf und zu machen muß um alle Bilder zu sehen.
Das geht selbstverständlich auch, indem man für data-fancybox einen Namen definiert:
$("figure img").each(function(idx, item) {
var url = $(this).attr("src");
var caption = $(this).next("figcaption").text();
$(this).wrap('<a></a>');
var atag = $(this).parent();
var caption = atag.next("figcaption").text();
atag.attr({href: url, "data-fancybox": "gallery", "data-caption": caption});
})
Versuch mal mit der Maus horizontal zu wischen oder auf dem Handy mit dem Finger ...
PS: Bastis Galerie ist vom HTML her ja schon sehr gut. Ich habe mal das CSS auf Flex umgestellt, damit sie responsiv wird und Fancybox3 hinzu gefügt:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<style>
#wrapper {
max-width: 600px;
width: 100%;
display: flex;
flex-wrap: wrap;
margin: auto;
}
figure {
margin: 0.5em;
flex-basis: calc(33% - 1em);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
figure img {
width: 100%;
height: auto;
min-height: 1px;
}
figure a {
min-height: 1px;
}
figure figcaption {
text-align: center;
}
</style>
<div id="wrapper">
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (1).jpg" alt="bild2" />
<figcaption>
Text Bild 1
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (2).jpg" alt="bild2" />
<figcaption>
Text Bild 2
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (3).jpg" alt="bild1" />
<figcaption>
Text Bild 3
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (4).jpg" alt="bild1" />
<figcaption>
Text Bild 4
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (5).jpg" alt="bild1" />
<figcaption>
Text Bild 5
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (7).jpg" alt="bild1" />
<figcaption>
Text Bild 6
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (8).jpg" alt="bild1" />
<figcaption>
Text Bild 7
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (9).jpg" alt="bild1" />
<figcaption>
Text Bild 8
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (10).jpg" alt="bild1" />
<figcaption>
Text Bild 9
</figcaption>
</figure>
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<script>
$("figure img").each(function(idx, item) {
var url = $(this).attr("src");
var caption = $(this).next("figcaption").text();
$(this).wrap('<a></a>');
var atag = $(this).parent();
var caption = atag.next("figcaption").text();
atag.attr({href: url, "data-fancybox": "", "data-caption": caption});
})
</script>
</body>
</html>
Alles anzeigen
Zitat"transform-origin": "0 0" das sagt doch den Left ,Top Punkt fest oder? links oben in Ecke.?
So verstehe ich es auch. Bin aber noch nicht allzu tief in dieses Thema eingestiegen.
ZitatIst damit eine Bildbox, wie von basti1012 realisiert, machbar? 3 Thumbnails in Reihe, n Reihen . Bei Klick großes Foto?
Wovon ich spreche, ist eine Lightbox. Davon gibt es diverse, ich empfehle Fancybox. Diese erledigt das Aufpoppen des Fensters mit dem großen Bild. Der Aufbau der Galerie mit Zeilen und Spalten ist nicht Bestandteil davon, diese kannst Du lassen, wie sie jetzt sind.
Ich habe vor längerer Zeit mal so etwas gemacht und da war es ziemlich einfach:
https://jsfiddle.net/Sempervivum/nqn7402b/2/
Wie Du siehst, habe ich "transform-origin": "0 0", dann musste ich gar nichts verschieben.
1. Wenn ich es richtig sehe, sind lengthMenu und pageLength keine Elemente des language-Objektes sondern direkte Optionen von datatables.
2. Damit man url nutzen kann, muss man die Datei auf dem eigenen Server bereit stellen. Einfacher als das ist es wahrscheinlich, das language-Objekt direkt in den Optionen anzugeben, es sind ja nicht so viele Elemente. Hat man viele Tabellen mit datatables kann es jedoch angebracht sein, sie zentral einer Datei zu halten und mit URL zu laden.
Dies funktioniert bei mir:
table = $('table#example').DataTable({
//"paging": false,
"language": {
"sEmptyTable": "Keine Daten in der Tabelle vorhanden",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sLoadingRecords": "Wird geladen...",
"sProcessing": "Bitte warten...",
"sSearch": "Suchen",
"sZeroRecords": "Keine Einträge vorhanden.",
"oPaginate": {
"sFirst": "Erste",
"sPrevious": "Zurück",
"sNext": "Nächste",
"sLast": "Letzte"
},
"oAria": {
"sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
"sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
},
select: {
rows: {
_: '%d Zeilen ausgewählt',
0: 'Zum Auswählen auf eine Zeile klicken',
1: '1 Zeile ausgewählt'
},
},
"lengthMenu": [25, 50, 100, 200],
"pageLength": 25,
"ordering": false,
"info": false
},
"lengthMenu": [25, 50, 100, 200],
"pageLength": 25,
"ordering": false,
"info": false
});
Alles anzeigen
Zitatnach den verkleinern passt die position nicht
Die Position kannst Du mit transform-origin steuern. Am besten forschst Du in dieser Richtung mal nach.
ZitatOder meinst du den wo die Uhr drine ist <div id="haupt">
Genau, den meinte ich. Nicht main sondern haupt.
Da gibt es doch fertige Plugins wie Fancybox, die so etwas wie Bildbeschreibung von Haus aus unterstützen. Mir unbegreiflich, dass man davon keinen Gebrauch macht, sondern immer wieder von neuem das Rad neu erfindet.
Es gibt einen Weg, wenn er auch nicht besonders schön ist: Mit Javascript und transform:scale() die Größe von #main an die Breite des Browserfensters anpassen. Den Skalierungsfaktor musst Du berechnen.
Zitathast du eine Empfehlung für einen Editor für mich
Selbst bin ich gerade auf Visual Studio Code umgestiegen und sehr zufrieden. Um richtige PHP-Unterstützung zu bekommen, musste ich etwas frickeln und ein paar Plugins installieren. Aber sonst gut und nicht so ein Monster wie Visual Studio Community.
Eine Idee habe ich auch: Eine Sessionvariable führen mit dem Status. Dieser kann zwei Zustände haben:
1. Vokabel anbieten
2. Eingabe des Benutzers prüfen
Zufallswert ermitteln machst Du dann nur bei 1, damit ist das ursprünglich Problem gelöst, dass bei der Prüfung der Zufallswert erneut ermittelt wird.
Man müsste sich mal das generierte HTML ansehen. Wenn die Seite online ist, dann poste doch mal die URL und beschreibe, wo man diese Testarea findet.
Einfach ganz am Anfang. Ich habe es mit dem HTML-Inspektor getestet und hatte sofort drei Spalten ohne noch etwas anpassen zu müssen.
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.