Beiträge von Sempervivum

PS: Doch noch eine Idee ohne Debuggen: Die Werte sind ja alle vom Typ String, das kann zu unerwarteten Ergebnissen beim Vergleich führen. Versuche, sie explizit nach float zu konvertieren:

https://www.php.net/manual/de/function.floatval.php

Nicht Rätsel raten sondern debuggen: Wie schon geschrieben, die betr. Variablen ausgeben lassen, das gibt bestimmt Hinweise, warum es nicht funktioniert. Und die Fehleranzeigen einschalten:

<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);

am Anfang des Skripts.

Du schreibst:

Zitat

Sagen wir mal die Temperatur ist "28,9 °C" Dieser Wert soll nun in einer ".txt" Datei gespeichert werden.

Ich nehme mal an, der Wert, der vom Sensor kommt, ist nicht buchstabengetreu "28,9 °C" sondern der reine Zahlenwert und mit Punkt als Dezimaltrenner? Wenn nicht, könnte das erklären, warum es nicht funktioniert.

Davon abgesehen gibt es, denke ich, auf dem Raspberry Pi irgendwelche Logausgaben. Also, um da klarer zu sehen, die betreffenden Werte, was vom Sensor kommt, ausgeben lassen.

Edit: Ich hätte zuvor den Code genauer lesen sollen: Wenn Du mit dem Wert rechnen kannst, Division und round, muss es ja der nackte Zahlenwert sein.

Zitat

Offenbar kennt er sie nicht.

Das scheint zuzutreffen, anscheinend ist der CSS-Validator vom W3C da nicht auf der Höhe der Zeit:

https://stackoverflow.com/questions/5766…or-on-variables

Dies: file:/// lässt vermuten, dass Du die Datei nicht über den lokalen Webserver geladen hast. Ich meine die HTML-/PHP-Datei die das fetch aufruft, nicht die listen_aus_db_laden.php. Prüfe, was in der Adresszeile deines Browsers steht.

Negatives Margin geht auf jeden Fall, wie Du hier sehen kannst, kann man damit das Logo links am Rest ausrichten:

html-seminar.de/woltlab/attachment/3112/

(Ich habe das Bild als Vorschau eingefügt, darauf klicken um es in voller Größe anzusehen).

Auch der Rest wäre eigentlich ein Kleinigkeit wenn wir auf der grünen Wiese wären, aber wie ich sehe, ist das Wordpress und Bootstrap.

Zitat

ich dachte an sowas. : ui.item.attr().setattribute("id", 1)

setAttribute ist kein jQuery und in diesem Zusammenhang überflüssig. So sollte es funktionieren:

ui.item.attr('id', 'die-neue-id');

Aber warum willst Du die denn überhaupt ändern, was ist der Hintergrund bei der Sache?

Anscheinend hast Du den Link in dem Beitrag von tk1234 gar nicht gelesen:

Zitat

We (Apple) like the current behavior and do not want programmatic focus to bring up the keyboard when you do not have a hardware keyboard attached and the programmatic focus was not invoked in response to a user gesture. Why you may ask...because auto bringing up the software keyboard can be seen as annoying and a distraction to a user

D. h. auch das programmgesteuert Fokussieren eines Elementes wird durch Apple unterbunden.

Zitat

Ich möchte den Bildern einen Rahmen und einen Schatten verpassen.

Das scheint mir die leichtere Aufgabe zu sein. Den Container findest Du unter .fancybox-content:

.fancybox-content {
    border: 2px solid lightgrey;
    box-shadow: -10px -10px 10px #ccc inset, 10px 10px #aaa;
}

Zitat

Der Hintergrund für die Pfeile soll rund werden und die Pfeile selbst würde ich auch gern durch andere ersetzen.

Daran haben die Entwickler der Fancybox schon gedacht: Für alle Buttons gibt es Templates, die man durch Konfiguration ändern kann.

Suche in der Doku nach btnTpl:

https://fancyapps.com/fancybox/3/docs/#options

Ich habe das mal beispielhaft für den Nextbutton durchgezogen:

   <script>
        // Durch Klick auf das Startbild öffnen wir die Fancybox:
        $('#startimg').on('click', () => {
            $.fancybox.open(
                // Die Liste der Bilder, die in der Galerie
                // angezeigt werden sollen
                [
// gekuerzt
                ], {
                loop: true,
                // Als Template fuer den Nexbutton sehen wir ein Div mit einem Pfeil darin vor.
                // Damit Fancybox diesen erkennt, müssen wir das entspr. data-Attribut
                // und die Klassen zuweisen.
                btnTpl: {
                    arrowRight:
                        '<div data-fancybox-prev class="fancybox-button fancybox-button--arrow_right">&gt;</div>'
                }
            });
        });
    </script>

Und dann können wir den Button mit CSS selbst gestalten:

    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fancybox.min.js"></script>
    <style>
        div.fancybox-button.fancybox-button--arrow_right {
            padding: 0;
            background-clip: initial;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: black;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>

Funktioniert dann in meiner Testseite.

Zitat

In der geöffneten Fancybox wollte ich auch ein paar Änderungen vornehmen, die er aber auch nicht annimmt.

.fancybox.open {
    background-color: rgba(0, 0, 0, 0.5);
    background-color: red; 
    font-size: 20px;
    color: #40E0FD;
}

Ich vermute beinahe, dass Du das aus dem Javascript abgeleitet hast:
$.fancybox.open(

denn im CSS der Fancybox finde ich keine Klasse "open".

Wenn Du in den Elementen der Fancybox etwas ändern willst, suchst Du die Elemente am besten im HTML-Inspektor deines Browsers heraus und liest jeweils die Klasse(n) ab. Damit kannst Du dann das Styling der betr. Elemente ändern. Das CSS dafür nach dem Einbinden des CSS der Fancybox notieren oder einbinden, denn was zuletzt definiert wurde, setzt sich durch. Das kann noch etwas komplizierter werden, siehe hier:
https://wiki.selfhtml.org/wiki/CSS/Tutor…instieg/Kaskade

Zitat

Dort hab ich leider keinen Überblick. Hab da nicht mal die ID "" starting gefunden.

Das ist die ID des Startbildes "startimg" und die Fancybox "weiß" nichts von diesem Bild, weil wir es nur verwenden, um sie zu starten.

Zunächst zu dem Schatten: Die Erklärung, warum es nicht funktioniert und eine Lösung findest Du z. B. hier:

http://www.corelangs.com/css/box/image-shadow.html

Zitat

Since all HTML block elements are considered as boxes, you can apply a shadow to any block-level element.

Ein img ist jedoch kein Blockelement, daher kann das mit dem Schatten nicht funktionieren. Lösung, wie dort angegeben, indem Du einen Container darum herum legst.

Zu dem Hover:

• Du verwendest dort die ID "starting" statt "startimg".
• Eine Hintergrundfarbe kann nicht funktionieren, da das Bild ja das Element vollständig ausfüllt. Du kannst jedoch z. B. die opacity verändern oder einen Rahmen. Oder mit filter andere Effekte verwenden. Wobei das filter noch nicht stabil etabliert ist, siehe hier:
  https://developer.mozilla.org/de/docs/Web/CSS/filter

In dem Code sehe ich gar nichts von dem sortable? Mit der API ist das, was Du vor hast, kein Problem:

        $(function () {
            $("#sortable").sortable({
                stop: (event, ui) => {
                    console.log(ui.item.attr('id'));
                    console.log(ui.item.next().attr('id'));
                }
            });
            $("#sortable").disableSelection();
        });

Ich vermute, Du benutzt das sortable von jQuery-UI? Und Du möchtest die ID des verschobenen Elementes bekommen und die ID des Elementes dahinter nach dem Verschieben?

Poste doch mal deinen Code.

Meine Testdatei sieht genau so aus wie deine, nur dass ich meine eigenen Bildpfade habe und sie funktioniert einwandfrei. Wirf einen Blick in die Console, ob Du dort Hinweise findest. Und, wenn möglich, stelle es online und poste die URL.

Und das Einbinden kannst Du im head lassen, das Script mit dem $('#startimg').on('click', () => { am Ende des Body.

Die URL

https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js

vom CDN direkt über die Adresszeile des Browsers aufrufen und mit Seite - "Speichern unter" o. ä., je nach Browser, speichern.

       <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
       <link rel="stylesheet" type="text/css" href="js/jquery.fancybox.min.js">

Die erste Zeile ist OK, die Syntax für die zweite gilt jedoch nur für ein Stylesheet, für ein Javascript muss es so aussehen:

<script src="js/jquery.fancybox.min.js"></script>

Außerdem musst Du auch jQuery einbinden, und zwar vor dem Fancybox-Skript, so:

<script src="js/jquery.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>

Zitat

Ist es nicht besser Fancybox herunter zu laden und die Dateien auszulagern? Genügt dann die min.css und die min.js?

Das hätte den Vorteil, dass Du mit der Galerie unabhängig vom CDN bist und dass sie auch ohne Verbindung zum Internet funktionieren würde.

Zitat

Hihi, das wird bei 100 Bildern aber ne lange Liste. Abkürzen kann man das wohl nicht?

Das kann man abkürzen, indem man die Liste mit einem kleinen PHP-Skript generiert. Einschränkung dabei: Es entsteht nur die Liste mit den Dateinamen, die Beschreibungen müsstest Du immer noch manuell eingeben.

Das ist nicht besonders kompliziert. Hier eine Demo mit Kommentaren, versuche, es zu verstehen und prüfe, ob es deinen Vorstellungen entspricht:

<!DOCTYPE HTML>
<html>

<head>
    <title>Fancybox</title>
    <!-- 1. Add latest jQuery and fancybox files -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
</head>

<body>
    <!-- Dies ist das Bild für den Start der Galerie, das zunächst sichtbar ist: -->
    <img id="startimg" src="images/01_th.jpg">
    <script>
        // Durch Klick auf das Startbild öffnen wir die Fancybox:
        $('#startimg').on('click', () => {
            $.fancybox.open(
                // Die Liste der Bilder, die in der Galerie
                // angezeigt werden sollen
                [
                    {
                        // Das erste Bild:
                        src: 'images/dia0.jpg',
                        opts: {
                            // Beschreibung fuer das erste Bild
                            caption: 'Beschreibung 1',
                            // Thumbnails braucht Du wahrscheinlich nur,
                            // wenn Du sie in einer Liste in der Galerie
                            // anzeigen willst
                            // thumb: '1_s.jpg'
                        }
                    },
                    {
                        // Das zweite Bild:
                        src: 'images/dia1.jpg',
                        opts: {
                            // Beschreibung fuer das zweite Bild
                            caption: 'Beschreibung 2',
                            // thumb: '1_s.jpg'
                        }
                    },
                    // usw, weitere Bilder
                    {
                        // Das letzte Bild:
                        src: 'images/dia5.jpg',
                        opts: {
                            caption: 'Beschreibung n',
                            // thumb: '2_s.jpg'
                        }
                    }
                ], {
                loop: true
            });
        });
    </script>
</body>

</html>