Beiträge von Sempervivum

    Habe zwar keine Ahnung von Angular, aber ich schlage vor, den Index als Hash zu übergeben und im Javascript auszuwerten. Dies funktioniert bei mir:

    Beim Aufruf der Seite dann ein #0 oder #1 usw. an die URL anhängen.

    Auch das sollte mit classList.toggle gut zu machen sein. Mit Javascript die Klasse hinzufügen/löschen und mit CSS die Sichtbarkeit des zusätzlichen Divs steuern.

    Es gibt auch eine sehr gute Bibliothek namens Tooltipster, die man vorteilhaft einsetzen kann. Vorteil dabei: Die Position des Tooltip wird intelligent fest gelegt, d. h. ist das Element am oberen Rand des Fensters, wird der Tooltipp darunter angezeigt, am unteren Rand anders herum, links und rechts analog.

    Zitat

    Es soll quasi jedem Bild in der Liste automatisch ein Hyperlink zugefügt werden.

    Ich verstehe das so, dass Du über die URL steuern willst, welches Bild angezeigt werden soll? Dann geht man i. allg. so vor, dass man den Parameter in einem Hash übergibt, etwas so:

    http://beispiel.de/panoramen/panorama.html#bild1.jpg

    Das kannst Du dann etwa so auswerten:

    Code
    var dasbild = location.hash.replace("#","");

    Diese Variable kannst Du dann bei der Initialisierung von pannellum verwenden:

    Code
    "panorama": dasbild,

    Allerdings ist mir nicht richtig klar, was Du damit dann anfangen willst? Möglicher Weise kann man dein Vorhaben auch anders lösen.

    Du darfst als Panorama nur die URL des Bildes angeben, nicht ein img-Tag. Außerdem ist da eine schließende eckige Klammer zuviel. So wäre es richtig:

    Code
    pannellum.viewer('panorama', {
        "type": "equirectangular",
        "panorama": "V0040005.jpg",
        "autoLoad": true,
        "autoRotate": -2,
        "compass": true,
        "northOffset": 247.5
    });
    Zitat
    Was ich mir denken kann ist, dass es mit dem Javascript zusammenhängt. Aber eigentlich sollte es doch nicht sein ?

    Deinen Code habe ich nicht analysiert, aber generell ist es so, dass CSS-Eigenschaften, die Du mit Javascript setzt, eine höhere Priorität haben als solche, die Du in einer CSS-Datei setzt. Vermutlich ist das die Erklärung für dein Problem.

    Zitat
    Zitat

    binde diese in meinen HTML Code ein und kann dann mit einem AJAX Script alle Datensätze einlesen.

    In den HTML-Code brauchst Du sie nicht einzubinden, sondern in einer getrennte Datei ablegen. Wenn Du dich auch über Ajax informierst, wirst Du sehen, dass Du damit eine Datei auf dem Server, u. a. auch im JSON-Format, einlesen kannst.

    Zitat

    Ist es dann noch möglich den mit AJAX importieren Datensatz zu formatieren?

    Nein, das leistet Ajax nicht. Du bekommst eine JS-Struktur mit Arrays bzw. Objekten und musst diese in ein Struktur im DOM umwandeln. Das Formatieren geschieht dann mit CSS.

    Zitat

    ist es mit AJAX auch möglich mir nur einen Datensatz anzeigen zu lassen und mit einem "next" u. "previous" Button zwischen allen vorhandenen Datensätzen durchzuklicken?

    Leider nein, auch dieses geht über das hinaus, was Du mit Ajax machen kannst. Solch eine Funktion musst Du mit Javascript realisieren.

    Zitat

    Macht es an der Stelle überhaupt sinn so etwas in eine Tabelle zu packen?

    Die Frage ist berechtigt und es gibt gute Gründe, sie mit nein zu beantworten, denn eigentlich sind nur die beiden Strukturen mit M1, M2, ... sowie O1, O2, ... im semantischen Sinn jede für sich eine Tabelle.

    Zitat

    Mein Gedanke war es die Daten bequem in einer Datei zu hinterlegen und die Tabelle greift dann darauf zu und stellt diese grafisch dar.

    Das ist sicher eine gute Idee, vor allem wenn sich die Daten häufig ändern. Dann brauchst Du nicht jedes Mal das ganze HTML umzuschreiben, sondern nur diese Datei zu ändern. Für das Format sehe ich zwei Möglichkeien:

    • CSV - einfach, aber wenig geeignet, um komplexere Strukturen abzubilden
    • JSON - kann beliebige Strukturen abbilden, aber die Syntax kann ungeübte Benutzer vor Probleme stellen

    Die Datei kannst Du dann mit Ajax einlesen.

    Du bist hier mit den Segnungen des undurchsichtigen float konfrontiert worden. Ich empfehle, ebenso wie Du es bei der Nav schon getan hast, das fortschrittliche Flexlayout zu verwenden. Mit justify-content:space-between kannst Du die beiden Element so anordnen wie Du es möchtest.

    Dies wollte ich, einschl. Hinweis auf die HTML-Fehler, schon vor zwei Stunden posten, aber vergaß, auf "Absenden" zu drücken :(

    Googlesuche nach "tooltip on click" führt z. B. zu dieser Anleitung:

    https://www.w3schools.com/howto/howto_js_popup.asp

    Versuche, dieses auf deinen Anwendungsfall mit dem maussensitiven Bereich umzuändern.

    Ein Problem sehe ich jedoch bei deinem Vorhaben: Du hast schon ein href-Attribut in dem area-Tag, das beim Klick auf eine neue Seite führt. Das widerspricht deiner Absicht, beim Klick den kleinen Kasten zu öffnen. Es geht ja nur eines von beiden.