Beiträge von Sempervivum

Sempervivum

Danke für das Sorbet! Ich lasse es Mal laufen, während ich dies schreibe.

So wie auf dem Screenshot ist es richtig. Mehr zum Einbinden von JS und CSS kannst Du hier nachlesen:

https://wiki.selfhtml.org/wiki/JavaScrip…bindung_in_HTML

https://wiki.selfhtml.org/wiki/CSS/Tutor…heets_einbinden

Zitat

Heißt das ich muss mich für eine der vielen Lightboxen entscheiden und diese dann in meinem javascript (js) Ordner einbinden, durch den eingesetzten <script> Code wird das vom Browser dann erkannt und es kann losgehen mit der Diashow?

Ja.

Sempervivum

Zitat

Diesen Quellcode

Code

<script src="ihr-js-verzeichnis/lightbox.js"></script>
habe ich in der letzten Zeile bevor der </body> tag schließt eingefügt. Wahrscheinlich falsch, siehe hier:

Offenbar hast Du das von hier:

https://wiki.selfhtml.org/wiki/HTML/Tuto…htbox_einbinden

I. allg. ist Selfhtml eine gute Quelle, aber in diesem Fall wird das Einbinden des js-Files nicht gut beschrieben. Du musst, genau wie beim CSS-File, die Datei lightbox.js in dein Verzeichnis für Javacripts kopieren, gängiger Name "js", und dann den Verzeichnisnamen im Skript-Tag angeben:

<script src="js/lightbox.js"></script>

<a href="images/bild-1.jpg" data-lightbox="bild-1" data-title="Bildunterschrift"> <img src="images/bild-1-vorschau.jpg" alt="alternative Erklärung"> </a>

Zitat

Nur wo soll ich den Quellcode einfügen?

Dieser Code zeigt das Vorschaubild an und enthält den Link auf das große Bild, das in der Lightbox angezeigt werden soll. Die Position ist beliebig, platziere diesen Code dort, wo das Vorschaubild angezeigt werden soll.

Lightboxes gibt es diverse, die Beschreibung bei Selfhtml bezieht sich auf die lhokeshdakar-Version. Ich empfehle statt dessen Fancybox 3, weil sie voll responsiv und Touch-geeignet ist. Wenn Du sie aus dem CDN lädst, wie im Quickstart angegeben, ist es ganz einfach.

https://www.fancyapps.com/fancybox/3/

Sempervivum

Zitat

Sollte nicht der <head> tag seperat an erster Stelle stehen und und wenn der </head> tag geschlossen ist, danach erst der <body> tag anfangen??

Das trifft zu. Aber <head> nicht mit <header> verwechseln, beides sind verschiedene Dinge.

Zitat

die Website wird allerdings richtig angezigt..

Das ist so, die Browser versuchen, auch aus fehlerhaftem Code eine vernünftige Anzeige zu machen.

Sempervivum

Zitat

Was ich eigentlich möchte ist diese Anordnung:

Kann mir jemand einen Tipp geben wie ich die obere Anordnung einstellen kann

Ja, die Antwort ist immer die selbe aber dadurch nicht weniger richtig: Informiere dich über Flexlayout und die Eigenschaft align-items, damit kannst Du solch eine Andordnung leicht erzeugen.

Sempervivum

Zitat

Wie kann ich alle Photos in der Bildergalerie so anordnen das jedes das gleiche Seitenverhältnis hat bzw in einen quadratischen Rahmen packen?

Wenn Du die Bilder in einen quadratischen Rahmen packen willst, musst Du akzeptieren, dass

entweder seitlich oder oben und unten ein Leerraum entsteht
oder seitlich oder oben und unten etwas abgeschnitten wird.

Realisieren kannst Du beides entweder mit Hintergrundbildern und der CSS-Eigenschaft background-size oder mit img-Tags und der CSS-Eigenschaft object-fit.

https://wiki.selfhtml.org/wiki/CSS/Eigen…background-size

https://wiki.selfhtml.org/wiki/CSS/Eigen…-fit#object-fit

Zitat

einfache Galerie mit vier quadratischen Formaten auf jeder Zeile

Ich empfehle, dich nicht auf eine feste Anzahl pro Zeile festzulegen, sondern diese variabel zu halten, denn es gibt vom Smartphone bis zum Desktop-PC sehr viele verschiedene Bildschirmabmessungen.

Zitat

Sollte ich die Bilder für die Vorschau in der Bildergalerie (...) mit Thumbnails bestücken das die ladezeit kürzer wird und erst die originalgröße der Photos beim klick auf das Vorschaubild in einer neuen Seite laden oder ist das egal?

Egal ist es nicht, denn die Ladezeit ist ein wichtiger Faktor für deine Besucher. Sind es relativ viele Bilder, ist auf jeden Fall zu empfehlen, Thumbnails zu verwenden.

Zitat

Ist es überhaupt die richtige Herangehensweise die Photos über CSS Code in ein Raster zu packen und dann in einer neuen Seite zu verlinken in der das Photo dann mit der Originalgröße angezeigt wird?

Ein Raster schon, aber auf eine neue Seite verlinken weniger, weil es für den Besucher umständlich ist, von der neuen Seite immer wieder zurück in die Übersicht zu müssen. Ein gängiges Verfahren für eine Bildergalerie ist, eine Lightbox zu verwenden, ich empfehle Fancybox 3:

https://www.fancyapps.com/fancybox/3/

Probiere es aus und mach dir ein Bild.

Sempervivum

Zitat

Wozu ist "PicAmount" ?

Das ist mir auch unklar.

Ich bin der Meinung, dass dein Code mit der Schleife funktionieren sollte. Um Missverständnisse zu vermeiden, würde ich nur das "1" bei den Variablennamen weg lassen:

Code

                var btn_i;
                for (btn_i = 1; btn_i < PicAmount; btn_i++){
                        var modal = document.getElementById("myModal"+btn_i);
                        var btn = document.getElementById("Pic"+btn_i);
                        btn.onclick = function() {modal.style.display = "block";}
                }

denn diese Variablen enthalten ja bei jedem Schleifendurchlauf einen anderen Button/Modal.

Sempervivum

Hier müsste deine Frage beantwortet werden:

https://stackoverflow.com/questions/2753…with-javascript

Sempervivum

Zitat

Das Diagramm werd ich wahrscheinlich über php machen

Das ist eine Möglichkeit und immer dann angebracht, wenn Du nichts an Animationen oder Interaktivität brauchst. Ich habe vor ein paar Wochen mit jpgraph einige Diagramme angefertigt und das hat ganz gut funktioniert:

https://jpgraph.net

Sempervivum

Hast Du genau in den Einstellungen des Drucken-Dialoges nachgesehen?

Wenn es nicht geht, können wir immer noch ein img-Tag mit object-fit verwenden.

Code

                    <tr height="25">
                        <td align="center" class="anfahrt" rowspan="12">
                            <div class="anfahrtsbild">
                                <img src="routenmap.png">
                            </div>
                        </td>
                    </tr>

Code

            div.anfahrtsbild {
                width: 470px;
                height: 650px;
                overflow: hidden;
                /* background-image: url(images/routenmap.png);
                background-size: cover;
                background-position: center center; */
            }

            div.anfahrtsbild img {
                height: 650px;
                width: 470px;
                object-fit: cover;
                object-position: center center;
            }

Alles anzeigen

Sempervivum

Fertiger Code kommt immer gut an. Forenregeln und Eigeninitiative - egal. Womit wir, BTW, einen der "üblichen Verdächtigen" von hier:

Intervalle nehmen keinen gemeinsamen Einfluss vanilla JS

identifiziert hätten.

Sempervivum

Wenn ich mir den String ansehe, kommt mir der Verdacht, dass es JSON-kodierte Daten sind. Wo kommt der String denn her? Du ersetzt Anführungszeichen, die in deinem Beispiel nicht zu sehen sind. Kann es sein, dass dein String so aussieht:

Code

{"Peter": 0.998, "Uwe": 0.872541254, "Beate": 0.72, "Maria Dana": 0.854745}

Sempervivum

PS: Ich hatte übersehen, dass Du das CSS nach screen und print getrennt hast. Du musst die selbe Änderung auch in dem Abschnitt für @media print { machen.

Sempervivum

Ich kenne das von meinem Browser, dass man das Drucken der Hintergrundbilder ausschalten kann um Tinte/Toner zu sparen. Sieh mal nach, ob Du das in deinem Browser auch findest. Wenn nicht, müssen wir statt des Hintergrundbildes ein img-Tag nehmen und object-fit.

Sempervivum

Das wäre möglich aber zunächst kannst Du es einfach in dem CSS ändern, das Du jetzt hast, d. h. dieses:

Code

div.anfahrtsbild {width: 470px; height: 650px; overflow: hidden;}

durch das ersetzen, das ich vorhin gepostet habe.

Sempervivum

CSS:

Code

            div.anfahrtsbild {
                width: 470px;
                height: 650px;
                overflow: hidden;
                background-image: url(routenmap.png);
                background-size: cover;
                background-position: center center;
            }

Im HTML kannst Du dann das Bild weg lassen:

Code

                     <tr height="25">
                        <td align="center" class="anfahrt" rowspan="12">
                            <div class="anfahrtsbild"></div>
                        </td>
                    </tr>

Es fällt auf, dass Du eine feste Größe für das Div angegeben hast und dass es deshalb nicht responsiv ist. Aber ich nehme an, dass Du es für deinen Monitor so eingerichtet hast.

Sempervivum

Dann versuche eine der beiden Möglichkeiten aus Posting #4.

Sempervivum

Kein Problem, Du brauchst den Elementen nur eine Klasse zu geben, dann kannst Du sie individuell gestalten:

Code

<figure class="figure1">
    <img src="img1.jpg">
</figure>
<figure class="figure2">
    <img src="img2.jpg">
</figure>

Code

.figure1 {
    width: 200px;
    height: 200px;
}
.figure2 {
    width: 100px;
    height: 100px;
}

Die selbe Klasse kannst Du natürlich mehreren Elementen geben.

Sempervivum

Selbstverständlich gibt es auch Scrollbalken im figure-Tag, Du brauchst ihm nur ein overflow: auto; zu geben, dann blendet der Browser bei Bedarf die Scrollbalken ein.

Sempervivum

Hallo marja und willkommen im Forum!

Zunächst nur eine Kleinigkeit:

Zitat

das Bild in einem Rahmen (nehme ich div dazu?)

Es wird mit einem div funktionieren, aber als Container für Bilder und die Informationen dazu gibt es in HTML5 das figure-Tag.

Für Drehen, Verkleinern und Vergrößern informiere dich über CSS-transform, z. B. hier:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/Transformationen

Sempervivum

Wenn ich das richtig verstehe, möchtest Du, dass das Bild mittig ist und die Tabellenzelle ganz ausfüllt. Und bist bereit zu akzeptieren, dass dann etwas abgeschnitten wird. Dann wäre es am einfachsten, wenn Du das Bild als Hintergrund anlegen würdest. Informiere dich hier und konzentriere dich auf background-size: cover;:

https://wiki.selfhtml.org/wiki/CSS/Eigen…background-size

Würde aber auch mit object-fit gehen, siehe hier:

https://wiki.selfhtml.org/wiki/CSS/Eigen…-fit#object-fit

Beiträge von Sempervivum

Fragen zum Aufbau einer einfachen Bildergalerie

Fragen zum Aufbau einer einfachen Bildergalerie

Fragen zum Aufbau einer einfachen Bildergalerie

Fragen zum Aufbau einer einfachen Bildergalerie

Fragen zum Aufbau einer einfachen Bildergalerie

Dynamische Variable erstellen

Externe SVG Datei animieren

Ein Anfänger mit Fragen zum Layout einer Webseite

Bild in Tabelle mittig vergrößern

Ersetzen und Löschen von Zeichen im String

Ersetzen und Löschen von Zeichen im String

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern

Bild in Tabelle mittig vergrößern

Picture in HTML anpassen, drehen und zoomen

Picture in HTML anpassen, drehen und zoomen

Picture in HTML anpassen, drehen und zoomen

Bild in Tabelle mittig vergrößern