Beiträge von Sempervivum

    Zitat

    Das ganze habe ich mit multer realisiert.

    Da muss ich jetzt passen, weil ich keine Kenntnisse habe, was node.js und multer betrifft. In jedem Fall brauchst Du die URL des Bildes, um es in dem Container anzeigen zu können. Da diese wahrscheinlich dynamisch ist, d. h. sich von Bild zu Bild ändert, muss es einen Weg geben, sie vom Server-Skript zurück zu bekommen.

    Sicher findet sich jemand, der dich bei multer unterstützen kann.

    PS: Da habe ich u. U. etwas zu kurz gedacht: Du hast ja ein Formular mit einem Submit und willst das Bild auch nach dem Abschicken des Formulars anzeigen. In dem Fall musst Du auf das Bild zurück greifen, das dann auf dem Server gespeichert wurde. Aber u. U. bist Du noch gar nicht so weit, denn Du schreibst:

    Zitat

    Momentan habe ich auch einen Webserver aufgebaut. Brauche ich den Server um die Bilder hochzuladen?

    Ja, Du brauchst den Webserver und ein PHP-Skript um das hochgeladene Bild auf dem Server zu speichern.

    Dann dürfte es sehr einfach sein:

    Ungetestet, aber eigentlich kann da nicht viel schief gehen.

    Zitat

    Momentan kann ich nämlich das Bild, welches ich auswähle im Server speichern und das Bild als preview anzeigen lassen.

    Wenn Du das Bild als Preview anzeigst, hast Du ja sicher eine Quelle und zeigst es in einem img-Tag an. Mit derselben Quelle und einem weiteren img-Tag kannst Du es dann auch in dem div-Container anzeigen. Etwa so:

    Code
    1. document.getElementById('id-des-div').innerHTML = '<img src="' + deineBildquelle + '">';

    Wenn Du damit nicht zum Ziel kommst, dann poste deinen Code oder besser die URL der Seite, wenn Du sie online hast.

    Zitat

    es scheint als könnte man es nur in Verbindung mit einer echten Tabellenstruktur verwenden?

    Das trifft zu. Ich habe jsGrid schon mehrmals eingesetzt und wollte es dir auf den ersten Blick empfehlen, aber dann hatte ich gesehen, dass deine Struktur nicht tabellenförmig ist.

    Edit: Genau genommen weniger die Struktur der Daten, die ist sicher tabellenförmig, sondern die Darstellung.

    Das sollte kein Problem sein, wenn Du zunächst das Ergebnis der Datenbankabfrage komplett erzeugst, etwa bei PDO mit fetchAll und dann die Indizes vertauschst:

    So getestet.

    Interessante Idee und man findet einige Anleitungen, wie man das machen kann. Ich fürchte nur, dass man dabei Zugriff auf den Inhalte des iFrame braucht, womit wir wieder dort wären, wo wir mit anderen Ansätzen auch waren: Dies wird durch die SOP blockiert.


    Ich habe jedoch noch eine andere Idee: Du hattest da ja zwei HTML-Seiten, wo man die SPS visualisieren oder konfigurieren konnte. Wenn man davon den Quelltext analysiert, könnte man u. U. den Code herausziehen, um den Status direkt von der SPS auszulesen. Poste doch mal den HTML- und Javascript-Code der Visualisierungs-Seite. U. U. besser als PN weil man nicht weiß, ob der Hersteller damit einverstanden ist, wenn man dies öffentlich macht.

    Zitat

    Was generell noch fehlt:


    - Das ganze Bild soll ein Hyperlink sind

    - Das Bild soll sich ähnlich wie der Text skalieren

    Zitat

    ich habe das jetzt nochmal versucht und es kommt echt nichts gewolltes bei raus. Das ist echt schade, weil ich bei google auch nichts konkretes finde

    Wenn Du nichts von dem umsetzt, was ich dir bisher geschrieben habe, kann es auch nicht funktionieren. :-(

    Ich habe jetzt dieses CSS hinzu gefügt:

    um den Text auf das Bild zu legen. Sieht jetzt bei mir so aus:

    grid-centered-figcaption.png

    Das blaue ist das figure-Element. Wie Du siehst, ist die Box mit dem Text darin zentriert. Nur das Bild füllt das figure nicht aus.

    Zitat

    das Bild füllt mehr als den vorgegebenen Bereich aus.

    So passt sich das Bild an den verfügbaren Platz an:

    Ach so, an den Link hatte ich gar nicht mehr gedacht: Statt des div ein a-href-Tag verwenden:

    Code
    1. <div id="grid-container">
    2. <figure id="grid-item-team">
    3. <figcaption id="dasTeam"> Fertige Projekte</figcaption>
    4. <a href="das-linkziel.html">
    5. <img id="dasTeamBild" src="images/catimage13.png" alt="alternativer_text">
    6. </a>
    7. </figure>
    8. </div>

    Und das CSS natürlich auch anpassen:

    Ich danke auch. Mir ist noch nicht ganz klar, wie Du dir das vorstellst: Text und Bild sollen in einer Zelle des Grid stehen? Ich würde eher empfehlen, sie in verschiedenen Zellen anzuordnen, dann würde das ganze übersichtlicher. Oder alternativ die Zelle als figure-Tag und darin den Text als figcaption und das Bild in einem extra Container, damit das overflow: hidden; wirksam werden kann. Etwa so:

    Code
    1. <div id="grid-container">
    2. <figure id="grid-item-team">
    3. <figcaption id="dasTeam"> Fertige Projekte</figcaption>
    4. <div>
    5. <img id="dasTeamBild" src="images/catimage13.png" alt="alternativer_text">
    6. </div>
    7. </figure>
    8. </div>