Beiträge von Sempervivum

Ich kann leider die Darstellung mit den Skateboards, wo der Text rechts ist, nicht finden. Beschreibe doch Mal, wie man dahin kommt oder poste einen direkten Link.

Dann müssen wir bei den Eventhandlern ansetzen, von denen oben die Rede war. Du hast ja in #2 das Wesentliche gepostet. Der Code ist gut kommentiert, so dass man nicht Zeile für Zeile analysieren muss.

1. // ### `preloaded` Event ######
2. // `Event`, since 1.1
3. //
4. // This event is fired by every preloaded image and adjusts the preloader indicator's
5. // target position. Once all images are preloaded, `"loaded"` Event is triggered.
6. //
7. preloaded: function(e){

D. h. Du musst das event "loaded" verwenden, denn das wird getriggert, wenn alle Bilder geladen sind. Also dein Ladebild über das Panorama- bzw. 3D-Bild legen und in der Funktion loaded unsichtbar machen:

<div id="peelwrapper">
    <img src=" ... " hier alles was Du für Peel benötigst >
    <img src="loadimg.gif" id="loadimg">
</div>

CSS:

#peelwrapper {
    position: relative;
}
#loadimg {
    position: absolute;
    left: 0;
    top: 0;
}

Und der Kern der Sache: In der Funktion loaded das Ladebild unsichtbar machen:

// `"loaded"` Event is the one announcing when the instance is "locked and loaded".
                  // At this time, all is prepared, preloaded and configured for user interaction
                  // or animation.
                  //
                  loaded: function(e){
                    document.getElementById("loadimg").style.display = "none";
                    get(_images_).length > 1 || t.css({ backgroundImage: url(reel.substitute(opt.path+get(_image_), get)) }).attr({ src: cdn(transparent) });

Wenn Du statt dessen die Opacity von 1 auf 0 änderst, kannst Du mit transition ein geschmeidiges Ausblenden des Bildes erreichen. Allerding musst Du es dann durch pointer-events: none; für die Mausaktionen durchlässig machen.

Du kannst ein Bild unsichtbar laden, so dass es im Cache ist, indem Du ein Image-Objekt anlegst:

var theimg = new Image();
theimg.src="dein-bild.jpg";

Du kannst dabei auch auf das Laden lauschen und daran eine Aktion anschließen:

var theimg = new Image();
theimg.onload = function() {
    // diese Funktion wird aufgerufen, wenn das Bild fertig geladen ist.
};
theimg.src="dein-bild.jpg";

Zitat

bereits ein Loading Gif erstellt und eingefügt. Auch bei mir wird es nur kurz dargestellt und sofort durch die anderen (Quell) Bilder aus den data-images ersetzt

Wenn die anderen Bilder aus data-images sofort, d. h. nach einem ganz kurzen Moment, angezeigt werden, heißt das doch, dass sie auch ganz schnell geladen werden - Anzeige erst, wenn Ladevorgang beendet?

Zitat

Habe das Plugin bereits erfolgreich eingerichtet und es funktioniert soweit.

Da bist Du besser als ich: Ich habe versucht, eine Testseite einzurichten und egal was ich mache, das gescrollte Bild ist immer riesengroß. ein background-image mit 6000px x 3000px.

Ich hatte jedoch den Eindruck, dass das Bild, was im src-Tag angegeben wird, sofort angezeigt wird und dann durch das Bild, das in data-image(s) angegeben wird, nach dem Laden ersetzt wird. Versuche doch mal, im src-Tag dein Ladebild anzugeben und im data-image(s) das richtige.

Bei Wikipedia ist es in einem Satz gut erklärt:

Zitat

Das namengebende Beispiel ist die Anordnung der Wörter in einem Lexikon: Sie werden zunächst nach ihren Anfangsbuchstaben sortiert, dann die Wörter mit gleichen Anfangsbuchstaben nach dem jeweils zweiten Buchstaben usw.

Zitat

In den Script ist eine if Abfrage die kontrollieren soll ob Zahl1 größer ist als Zahl2. Das Funktioniert größten Teils auch.

Gibt man aber oben zb 300 ein und unten zb 99 , sagt die if abfrage aber das 99 nicht kleiner als 300 ist.

Der Grund ist, dass beide Werte nicht numerisch sind, sondern Strings, da aus Eingabefeldern. Dann funktioniert der Vergleich etwas anders, nämlich lexikographisch, wie bei Wörtern in einem Lexikon:

https://stackoverflow.com/questions/1863…g-compare-logic

Wandle die String mit parseInt um und alles sollte gut sein.

Zitat

Aber wie ich es nach PHP bekomme, weiß ich trotzdem nicht.

Ist doch in dem Link in #5 genau beschrieben. Woran fehlt es denn?

Das Skript scheint das Sortable von jQuery-UI zu benutzen? Habe ich selber gerade erst eingesetzt.

Zitat

Wenn ich das nun nach PHP schicke

Ist mit Ajax kein Problem. Am besten kodierst Du das Array in JSON, dann kannst Du es leicht an das PHP-Skript schicken.

Edit: Ich sehe gerade, in deiner Demo benutzt Du toString(), das würde genauso gut gehen, um das Array zu übertragen.

Zitat

Hab immer wieder was von Ajax gelesen. Aber eine gute Einführung in Ajax habe ich bisher auch noch nicht gefunden.

Diese finde ich ganz gut:

http://blog.axxg.de/einfuehrung-ajax-quickstart/

Sollte kein Problem sein, ich hatte dich so verstanden:

        $test = 'Vielen Dank an @person1 und an @person22';
        $testmod = preg_replace('/(@[^0-9]+)(\d+)/', '<a href="/user/$2">$0</a>', $test);

Ganz so einfach ist es wohl doch nicht.

Informiere dich über die Funktion preg_replace():

http://php.net/manual/de/function.preg-replace.php

Beachte besonders dies:

Zitat

replacement darf Referenzen in der Form \\n oder $n enthalten, wobei Letztere vorzuziehen ist. Jede dieser Referenzen wird mit dem Text ersetzt, der vom n-ten eingeklammerten Suchmuster erfasst wurde.

Versuche dies:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
        body {
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        #wrapper {
            margin-top: auto;
            text-align: center;
            position: relative;
        }

        #outerimg {
            height: auto;
            width: 40%;
            max-width: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #centerimg {
            height: auto;
            width: 10%;
            max-width: 100px;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <img id="centerimg" src="images/klein.svg">
        <img id="outerimg" src="images/gross.svg">
    </div>
</body>

</html>

In horizontaler Richtung ändern sich die Kreise mit der Breite des Browserfensters.

Das Problem mit dem oben abgeschnittenen Kreis lässt sich leicht beheben, indem man overflow: hidden; nicht pauschal sondern nur für body setzt:

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

Ich schrieb ja oben:

Zitat

Auf Anhieb wüsste ich keine Lösung mit CSS, wo die Bilder sowohl auf Breiten- als auch auf Höhenänderung reagieren und gleichzeitig das Seitenverhältnis beibehalten.

Wäre es denn ausreichend, wenn sich die Größe nur in der horizontalen anpasst, so wie bei dem großen Kreis in deiner Datei?

Verstehe, dann lag ich ja mit meinem Ansatz ganz daneben. Jetzt verstehe ich es besser. Meinst Du, dass der obere Teil abgeschnitten ist?

PS: Mir fällt gerade ein, dass sich, wenn ich mich richtig erinnere, SVG-Grafiken bei der Skalierung anders verhalten als Bitmaps. Am besten postest Du mal diese Grafiken als Anhang.

Versuche dieses:

CSS:

        body {
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        #centerimg {
            height: 30%;
            width: auto;
            margin: auto;
        }

        #bottomimg {
            height: 15%;
            width: auto;
            margin: 0 auto;
        }

HTML:

<body>
    <img id="centerimg" src="images/dia0.jpg">
    <img id="bottomimg" src="images/dia1.jpg">
</body>

So passen sich die Bilder in der Größe an, wenn man die Höhe des Browserfensters ändert. Auf Anhieb wüsste ich keine Lösung mit CSS, wo die Bilder sowohl auf Breiten- als auch auf Höhenänderung reagieren und gleichzeitig das Seitenverhältnis beibehalten.

Außerdem ist noch offen, ob das mittlere Bild im verbleibenden vertikalen freien Raum zentriert werden soll - das tut das CSS oben, oder ohne Berücksichtigung des unteren Bildes - dann müsste man es leicht ändern.

Ist das möglicher Weise Safari auf Windows?

Offenbar benutzt Du Bootstrap, wahrscheinlich harmoniert das nicht mit dieser jQuery-Animation.