Beiträge von Sempervivum

Sempervivum

Schau mal, ob dir $.parseHTML hilft, damit kannst Du das Dokument parsen und dann ganz normal auf das DOM zugreifen.

Sempervivum

Da habe ich eine Weile gebraucht, um durchzusteigen, aber ich hoffe, dass ich jetzt eine Lösung habe, indem ich das Verfahren mit der Sortierung überarbeitet habe: Die Listenelemente bekommen einen Index als ID. Entsprechend wird dann aus dem Array der tmp-Dateien die richtige ausgewählt und verschoben. Ich habe es nicht sehr intensiv getestet, aber ich hoffe, dass es funktioniert:

Code

    <script>
        function dateiauswahl(evt) {
            var dateien = evt.target.files; // FileList object
            var imgs = [], names = []; counter = 0, nrimgs = dateien.length, binchar = 97;
            // Auslesen der gespeicherten Dateien durch Schleife
            for (let i = 0; i < dateien.length; i++) {
                let f = dateien[i];
                names[i] = f.name;
                // nur Bild-Dateien
                if (!f.type.match('image.*')) {
                    nrimgs--;
                    continue;
                }
                let reader = new FileReader();
                reader.onload = function (e) {
                    console.log("loaded " + i)
                    imgs[i] = e.target.result;
                    counter++;
                    if (counter == nrimgs) {
                        // erzeuge Thumbnails.
                        for (var j = 0; j < imgs.length; j++) {
                            var img = document.createElement('img');
                            img.className = 'bild';

                            img.src = imgs[j];
                            img.title = names[j];

                            var li = document.createElement('li');
                            li.appendChild(img);

                            // das Listenelement bekommt einen fortlaufenden Index als ID
                            li.id = j;

                            var sortable = document.getElementById("sortable");
                            sortable.appendChild(li);
                        }
                        $(function () {
                            $('#sortable').sortable({
                                update: function (event, ui) {
                                    var productOrder = $(this).sortable('toArray').toString();
                                    console.log(productOrder);
                                    $('input[name="newsort"]').val(productOrder);
                                }
                            });
                        });
                    }
                };
                // Bilder als Data URL auslesen.
                reader.readAsDataURL(f);
            };
        }
        // Auf neue Auswahl reagieren und gegebenenfalls Funktion dateiauswahl neu ausführen.
        document.getElementById('files').addEventListener('change', dateiauswahl, false);
    </script>

Alles anzeigen

PHP

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
var_dump($_FILES);
var_dump($_POST);
if (!empty($_FILES)) {
    $upload = "./upload/";
    $counter = count($_FILES['files']['tmp_name']);
    $sourcePath[] = $_FILES['files']['tmp_name']; // Storing source path of the file in a variable
    $targetPath[] = $_FILES['files']['name']; // Target path where file is to be stored
    $name = $_POST['name'];
    $sortArray = explode(",", $_POST['newsort'] ?? "");

    mkdir("./upload/" . $name, 0700);
    mkdir("./upload/" . $name . "/tmp/", 0700);

    $bilder_verzeichnis = $upload . $name . "/";
    $tmp_verzeichnis = $upload . $name . "/tmp/";
    // Größe der ausgegebenen Bilder
    $XL_groesse = 600;
    $L_groesse = 175;
    $M_groesse = 45;

    // Bilder werden in tmp-Ordner geladen
    for ($a = 0; $a < $counter; $a++) {

        $up_name = $name . chr($a + 97) . ".jpg";
        if (!empty($sortArray)) {
            $idx = $sortArray[$a];
        } else {
            $idx = $a;
        }
        $tmpFile = $_FILES['files']['tmp_name'][$idx];

        if ($tmpFile != "") {

            $newFilePath = $upload . $name . "/tmp/";

            //Upload der Datei in den Ordner
            if (move_uploaded_file($tmpFile, $newFilePath . $up_name)) {
            }
        }
    }

    // Bilder aus tmp-Verzeichnis lesen
    if (is_dir($bilder_verzeichnis)) { // existiert das Verzeichnis?
        $files = scandir($tmp_verzeichnis); // Dateinamen in Array einfügen
        $files = array_splice($files, 2); // Entfernt die ersten beiden Einträge . und ..
        $files_count = count($files);
    }

    // tmp-Verzeichnis auslesen
    if (is_dir($bilder_verzeichnis)) { // existiert das Verzeichnis?
        $org_files = scandir($tmp_verzeichnis); // Dateinamen in Array einfügen
        $org_files = array_splice($org_files, 2); // Entfernt die ersten beiden Einträge . und ..
    }
    // Bildgröße erstellen
    foreach ($org_files as $tmp_files) {

        $XL_name = 'XL_' . str_replace("tmp_", "", $tmp_files);
        $L_name = 'L_' . str_replace("tmp_", "", $tmp_files);
        $M_name = 'M_' . str_replace("tmp_", "", $tmp_files);
        $XL_size = GetImageSize($tmp_verzeichnis . $tmp_files);
        if ($XL_size[1] > 500) {

            $breite = $XL_size[0];
            $hoehe = $XL_size[1];
            if ($XL_size[2] == 2) {

                // Erstellen XL_Bilder
                $neueBreite = intval($breite * $XL_groesse / $hoehe);
                $altesBild = ImageCreateFromJPEG($newFilePath . $tmp_files);
                $neuesBild = imagecreatetruecolor($neueBreite, $XL_groesse);
                ImageCopyResized($neuesBild, $altesBild, 0, 0, 0, 0, $neueBreite, $XL_groesse, $breite, $hoehe);
                ImageJPEG($neuesBild, $bilder_verzeichnis . $XL_name);
                ImageDestroy($neuesBild);
                ImageDestroy($altesBild);

                // Erstellen L_Bilder
                $neueBreite = intval($breite * $L_groesse / $hoehe);
                $altesBild = ImageCreateFromJPEG($newFilePath . $tmp_files);
                $neuesBild = imagecreatetruecolor($neueBreite, $L_groesse);
                ImageCopyResized($neuesBild, $altesBild, 0, 0, 0, 0, $neueBreite, $L_groesse, $breite, $hoehe);
                ImageJPEG($neuesBild, $bilder_verzeichnis . $L_name);
                ImageDestroy($neuesBild);
                ImageDestroy($altesBild);

                // Erstellen M_Bilder
                $neueBreite = intval($breite * $M_groesse / $hoehe);
                $altesBild = ImageCreateFromJPEG($newFilePath . $tmp_files);
                $neuesBild = imagecreatetruecolor($neueBreite, $M_groesse);
                ImageCopyResized($neuesBild, $altesBild, 0, 0, 0, 0, $neueBreite, $M_groesse, $breite, $hoehe);
                ImageJPEG($neuesBild, $bilder_verzeichnis . $M_name);
                ImageDestroy($neuesBild);
                ImageDestroy($altesBild);
            }
        }
        unlink($tmp_verzeichnis . $tmp_files);
    }
    rmdir($tmp_verzeichnis);

}

Alles anzeigen

Sempervivum

Gute Wahl, das scheint das gleiche wie Tooltipster zu sein. Wäre nicht sehr sinnvoll gewesen, hier das Rad neu zu erfinden.

Sempervivum

Zitat

Nee einfache Lösung wäre das man opacity in z-index ändert.

Wenn ich das richtig sehe, ist z-index nicht animierbar.

Sempervivum

Das ist ja blöd, dass das jetzt nicht mehr funktioniert. Ich vermute, dass es mit der Vergabe der IDs zusammen hängt. Werde es mir mal ansehen. Welches Sortable ist das, das von jQuery-UI?

Sempervivum

Ja, es wird immer der Link des letzten Bildes geöffnet. Das liegt daran, dass sie übereinander liegen und das letzte Bild oben. Auch wenn es durchsichtig ist, wirkt trotzdem der Klick darauf.

Sempervivum

basti1012 Klick mal auf das erste Bild ...

Sempervivum

Du wirst hier mit einer Eigenschaft solcher Slideshows in reinem CSS konfrontiert, dass sie sich relativ schwer ändern und erweitern lassen.

Als nächstes erwarte ich die Frage "Wie kann ich mehr Bilder zu dieser Slideshow hinzu fügen?"

Siehe auch hier:

bildergalerie in CSS

Meine Antwort auf die Frage, wie es am einfachsten geht, lautet daher: Verwende ein ausgereiftes Javascript wie Cycle2, damit ist es eine Kleinigkeit:

http://jquery.malsup.com/cycle2/demo/non-image.php

Code

    <div class="cycle-slideshow" data-cycle-slides="> a">
        <a href="link1.html"><img src="images/a.jpg"></a>
        <a href="link2.html"><img src="images/b.jpg"></a>
        <a href="link3.html"><img src="images/c.jpg"></a>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.cycle2.js"></script>

Edit: Basti: "Ick bin all hier" ...

Sempervivum

Lege das gesamte Arrangement mit den Bildern und Texten in einen zusätzlichen Container. Dann kannst Du diesen und den neuen rechten mit

body {display:flex;} nebeneinander anordnen.

Zitat

der dann in der Höhe über die anderen container geht

Das funktioniert dann automatisch weil align-items: stretch; Default ist.

Sempervivum

Ein befreundeter Webmaster verwendet dafür Tooltipster, dieses Plugin legt abhängig von der Mausposition die Lage des Tooltip intelligent fest, so dass es immer sichtbar ist.

http://iamceege.github.io/tooltipster/

Sempervivum

Der Grund für das Verhalten ist, dass der Filereader für die Erzeugung der Vorschaubilder asynchron arbeitet, dadurch kann die Reihenfolge verfälscht werden. Dieses sollte das Problem lösen:

Code

    <input type="file" id="files" multiple>Choose files
    <div id="sortable"></div>
    <script>
        function dateiauswahl(evt) {
            var dateien = evt.target.files; // FileList object
            var imgs = [], names = []; counter = 0, nrimgs = dateien.length, binchar = 97;
            // Auslesen der gespeicherten Dateien durch Schleife
            for (let i = 0; i < dateien.length; i++) {
                let f = dateien[i];
                names[i] = f.name;
                // nur Bild-Dateien
                if (!f.type.match('image.*')) {
                    nrimgs--;
                    continue;
                }
                let reader = new FileReader();
                reader.onload = function (e) {
                    console.log("loaded " + i)
                    imgs[i] = e.target.result;
                    counter++;
                    if (counter == nrimgs) {
                        // erzeuge Thumbnails.
                        for (var j = 0; j < imgs.length; j++) {
                            var img = document.createElement('img');
                            img.className = 'bild';

                            img.src = imgs[j];
                            img.title = names[j];

                            var li = document.createElement('li');
                            li.appendChild(img);
                            li.id = String.fromCharCode(97 + j);
                            counter++;
                            var sortable = document.getElementById("sortable");
                            sortable.appendChild(li);
                            binchar++;
                        }
                    }
                };
                // Bilder als Data URL auslesen.
                reader.readAsDataURL(f);
            };
        }
        // Auf neue Auswahl reagieren und gegebenenfalls Funktion dateiauswahl neu ausführen.
        document.getElementById('files').addEventListener('change', dateiauswahl, false);
    </script>

Alles anzeigen

Sempervivum

Der Footer ist doch unten in Bastis Beispiel?

Den Header würde ich so gestalten, dann sind die Socialitems rechts:

https://jsfiddle.net/Sempervivum/tfy4hga6/18/

Sempervivum

Versuche, ob dies das ist, was Du dir vorstellst:

Code

    <select id="dynselect" size="1">
        <option>Zeile1</option>
        <option>Zeile2</option>
        <option>Zeile3</option>
        <option>Zeile4</option>
        <option>Zeile5</option>
        <option>Zeile6</option>
        <option>Zeile7</option>
        <option>Zeile8</option>
        <option>Zeile9</option>
        <option>Zeile10</option>
        <option>Zeile11</option>
        <option>Zeile13</option>
        <option>Zeile14</option>
        <option>Zeile15</option>
        <option>Zeile16</option>
        <option>Zeile17</option>
        <option>Zeile18</option>
        <option>Zeile19</option>
        <option>Zeile20</option>
        <option>Zeile21</option>
        <option>Zeile22</option>
        <option>Zeile23</option>
        <option>Zeile24</option>
        <option>Zeile25</option>
        <option>Zeile26</option>
    </select>
    <script>
        document.getElementById("dynselect").addEventListener("mousedown", function () {
            this.size = "10";
        });
        var opts = document.querySelectorAll("#dynselect option");
        for (var i = 0; i < opts.length; i++) {
            opts[i].addEventListener("mousedown", function () {
                document.getElementById("dynselect").size = "1";
                event.stopPropagation();
            });
        }
    </script>

Alles anzeigen

Sempervivum

Da hast Du dir dummerweise wieder eine CSS-Lösung ausgesucht, die umständlich zu erweitern ist. Wenn es nicht anders ginge, würde ich es dir ja umändern aber prüfe zunächst, ob Du dich mit einer Javascript-Lösung anfreunden kannst.

Sempervivum

Was heißt denn "es geht nicht"? Wird nur ein Bild angezeigt oder werden alle auf einmal angezeigt oder gar keins?

Ich hatte es mit dem HTML aus deinem ersten Posting getestet; dieses <div id="gallery"> darf nicht verändert werden. Am besten wäre es, wenn Du es online hättest, damit man es sich ansehen kann. Ist sicher nur eine Kleinigkeit.

Ach so, das alte CSS musst Du löschen, jedenfalls soweit es die Slideshow betrifft, vor allem das position:absolute; bewirkt, dass alle Bilder übereinander liegen und nur das oberste sichtbar ist.

Sempervivum

Es gibt dafür zahlreiche fertige Skripte, die ich normaler Weise gern empfehle, aber wenn Du keine Übergangseffekte willst, dann versuche dies:

Code

    <script>
        var idx = 0;
        var slides = document.querySelectorAll("#gallery figure");
        function slideIt() {
            for (var i = 0; i < slides.length; i++) {
                if (idx == i) slides[i].style.display = "inline-block";
                else slides[i].style.display = "none";
            }
            if (idx < slides.length - 2) idx++;
            else idx = 0;
        }
        slideIt();
        setInterval(slideIt, 3000);
    </script>

Alles anzeigen

Hinter dem HTML einfügen, am besten vor dem schließenden </body>

Sempervivum

Auch ganz ohne jQuery hätte es etwas gegeben, das dir die Arbeit abnehmen kann:

https://developer.mozilla.org/en-US/docs/Web…ormData_Objects

Sempervivum

Das ist nun Mal der große Nachteil bei solch einer reinen CSS-Lösung: Sie ist extrem schwer zu erweitern.

Sempervivum

input22.json kommt mir fragwürdig vor: Ich verstehe das so, dass die Fahrzeit immer von der aktuellen Station (die in id steht) bis zur nächsten gerechnet wird. Dann würde man in der Endstation keine brauchen, wohl aber in der Startstation. In input22.json ist es jedoch genau umgekehrt.

Außerdem sehe ich noch ein anderes Problem, das durchdacht werden müsste: Normaler Weise können die Züge in beiden Richtung fahren, d. h. die Stationen sowohl in aufsteigender als auch in absteigender Reihenfolge durchfahren. Allerdings für die aktuelle Aufgabenstellung wohl nicht relevant, den die ID der Startstation ist jeweils kleiner als die der Zielstation.

Sempervivum

Wenn Du jQuery und den Einsatz von fertigen Skripts nicht ablehnst, dann sieh dir das jQuery-Form-Plugin an. Das ist genau dafür entwickelt worden, ein Formular statt mit Submit über Ajax an den Server zu senden und nimmt dir die ganze Arbeit ab.

http://jquery.malsup.com/form/

Beiträge von Sempervivum

jeden Eintrag in einem div abgreifen

Bilderupload - Script zu langsam?

[Gelöst] DIV Container in Abhängigkeit der Cursorposition ausrichten

Slideshow einzelne Bilder verlinken

Bilderupload - Script zu langsam?

Slideshow einzelne Bilder verlinken

Slideshow einzelne Bilder verlinken

Slideshow einzelne Bilder verlinken

Flexcontainer rechts anordnen

[Gelöst] DIV Container in Abhängigkeit der Cursorposition ausrichten

Bilderupload - Script zu langsam?

HTML/CSS Frage zu meinem Blog-Design

select tag weniger option anzeigen

bildergalerie in CSS

bildergalerie in CSS

bildergalerie in CSS

Erstellen des URL-String für Get-Request

bildergalerie in CSS

Rechnen mit vorgegeben Werten aus Json Datei

Erstellen des URL-String für Get-Request