div/img mit Regler auf Bild scrollen

grattler · 8. April 2021

Guten Morgen Sempervivum, das hat wunderbar funktioniert =)

Jetzt habe ich leider noch ein kleines Problem für dich Da sämtliche Bildformate auf 30.000 px beschränkt sind, muss ich mein Bild teilen, und hab somit zwei Bilder, welche ich nahtlos nacheinander in den div packen muss. Bzw. in das SVG. Geht das überhaupt so einfach?

Sempervivum · 8. April 2021

Allzu schwer ist das auch nicht zu lösen, wir legen einfach die beiden Bilder in einen weiteren Container und beziehen die weiteren Operationen auf diesen:

Code

    <div id="pano-outer">
        <div id="pano-inner">
            <!-- Hier zunaechst keine src-Attribute angeben -->
            <img id="pano-img">
            <img id="pano-img-2" style="filter: grayscale(1);">
        </div>
    </div>

(filter nur testweise, damit ich die Bilder auseinander halten kann).

Und das CSS dafür:

Code

        #pano-inner {
            /* Der Container muss seine Groesse abhaengig vom Inhalt einstellen,
            daher verwenden wir inline-flex */
            display: inline-flex;
        }

Dann die weiteren Berechnungen auf den inneren Container beziehen:

Code

        const panoOuter = document.querySelector('#pano-outer'),
            panoInner = document.querySelector('#pano-inner'),
            panoImg = document.querySelector('#pano-img'),
            panoImg2 = document.querySelector('#pano-img-2');
            // Um sicher zu stellen, dass beide Bilder geladen sind,
            // verwenden wir jetzt das load-Event für "window":
        window.addEventListener('load', event => {
            // Die Breite des "Bildes" ergibt sich jetzt aus der des
            // inneren Containers:
            const wPanoImg = panoInner.getBoundingClientRect().width,
                // Die Positionen fest legen, bei denen im Bild
                // die Uebergaenge zwischen Kurven und Geraden liegen:
                pos1 = 0,
                pos2 = wPanoImg / 4,
                pos3 = wPanoImg / 4 * 2,
                pos4 = wPanoImg / 4 * 3,
                startPos = pos4,
                // Die Breite des sichtbaren Bereichs im Container des Bildes:
                wWin = panoOuter.getBoundingClientRect().width,
                maxScrollPos = wPanoImg - wWin;
            let scrollPos = 0;

            // Zeichnet einen Kreisbogen-Indikator:
            function drawArcIndi(start, end, translate) {

// usw. wie bisher

            // Eventhandler fuer das Scrollevent beim Container registrieren:
            panoOuter.addEventListener('scroll', event => {
                scrollPos = panoOuter.scrollLeft + startPos;
                // Frueher gezeichnete Indikatoren loeschen:
                svg.selectAll(".indi").remove();
                // Neuzeichnen der Indikatoren veranlassen:
                update();
            });
        }); // Ende Eventlistener fuer window
        // Jetzt muessen wir natuerlich beide Bilder laden:
        panoImg.src = "_HP-Subdomain/images/2016-06-05_Wolfenbüttel_Bankplatz_Panorama_3708x640.jpg";
        panoImg2.src = "_HP-Subdomain/images/2016-06-05_Wolfenbüttel_Bankplatz_Panorama_3708x640.jpg";
    </script>
</body>

Alles anzeigen

grattler · 9. April 2021

Ich habe mich bemüht alles so zu übernehmen wie du es geschrieben hast, allerdings funktioniert nun der Positionsanzeiger nicht mehr:

Spoiler anzeigen

Sempervivum · 9. April 2021

Mir scheint, es liegt am HTML und CSS. Nimm das div.frame aus dem div.stadion heraus und platziere es dahinter, so dass im div.stadion nur das div#bande liegt. Und dann ändere das CSS so:

Code

div.stadion {
    overflow-x: scroll;
}

#bande {
    /* width: 100%; */
    display: inline-flex;
    /* overflow-x: scroll; */
}

Dies habe ich nur mit dem HTML-Inspektor getestet, wenn es nicht funktioniert, werde ich mir eine neue Testseite mit deinen Namen bauen.

grattler · 9. April 2021

Es funktioniert einwandfrei! Herzlichen Dank für all deine Mühen!

Ich bin mir sicher, das ist nicht das letzte mal das du von mir liest. Zumindest, solange du noch Geduld hast

Spätestes nach meinem StaatsEx werd ich mich JS widmen, aber ich glaube vorher sollte ich mir HTML und CSS nochmal genauer anschauen...

Sempervivum · 9. April 2021

Immer wieder gern.

Dann viel Erfolg beim Staatsexamen. Das hört sich nach Jura an?

grattler · 10. April 2021

Zitat von Sempervivum

Immer wieder gern.
Dann viel Erfolg beim Staatsexamen. Das hört sich nach Jura an?

Ganz so schlimm ist es nicht Medizin

div/img mit Regler auf Bild scrollen

Jetzt mitmachen!

Teilen