Ein altes Script zum Funktionieren bringen?

[Webhufi]

Hallo,

ich habe auf meiner Nostalgie-Page aus dem Jahr 2002 eine nette Bildershow, die aber in den neuen Browsern nicht funktioniert. Meint ihr, dass ihr die Präs zum Laufen bringen könnt? Das wäre mir ein besonderes Anliegen...

Schaut bitte hier.

Viele Grüße

Norbert

 

[Webhufi]

;-) Du kannst nicht an alles denken...

Jetzt sehe ich was, und das sieht klasse aus!

Ich werde noch ein wenig testen und überlegen, inwieweit ich dich noch weiter 'beschäftigen' kann...

Z.B. alles aus dem .js rausschmeißen, was für diese Seite nicht relevant ist! Da steht echt unnützes Zeug drin.

 

[Sempervivum]

Freut mich, dass es dir gefällt.

 

[Webhufi]

Das ist einfach spitzenklasse, was du da gebastelt hast!

Ich habe den iFrame noch etwas vergrößert: jetzt sieht es auch auf einem größeren Moni klasse aus, auch wenn man etwas scrollen muss. Und es scheint so, dass auch die kleinen Dinger gut damit zurecht kommen.

Du bist eine echte Wucht! Ganz herzlichen und lieben Dank für deine Arbeit! Du glaubst gar nicht, wie sehr ich mich drüber freue...

 

[Webhufi]

Ich finde nur noch zwei Pixel, die ich sehe und sonst vielleicht niemand: Innerhalb des Lightbox-Rahmens ist oben und links ein zusätzlicher, schwarzer Pixelrahmen zu sehen, rechts und unten aber nicht. Ist das Absicht? Ich finde es etwas störend...

Ich bin nicht sicher, was besser wäre: kein Innenrahmen oder überall gleich? Wo im Code kann ich das ausprobieren?

Nur sehr ungern spreche ich übrigens jemanden ohne echten Namen an. Deshalb nenne ich dich einfach mal Tom!

Viele Grüße
Norbert

 

[Sempervivum]

Gut beobachtet! Dieser Rahmen ist ein einfacher 3D-Rahmen, genau wie der um das Notizbuch herum. Er sieht deshalb so unsauber aus, weil die Außenseite rechts und unten gleich der dunkelgrauen Farbe des Overlays ist, so dass sie verschwindet. Ich habe diese mit den Entwicklerwerkzeugen mal auf hellgrau eingestellt, dann sieht der Rahmen so aus, wie er sollte:

Ich kommentiere mal das CSS ein wenig, dann kannst Du die Farben so einstellen, wie Du möchtest:

    <style>
        /* Lightbox */
        #lightbox {
            /* display: none; */
            position: absolute;
            // Der Rahmen der Lightbox: Breite Form Farbe
            // ridge bedeutet: Erhabener 3D-Rahmen
            border: 6px ridge darkgrey;
            background-image: url(parchment.jpg);
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(0);
            transition: 0.5s;
        }

        #lightbox-ovl {
            display: block;
            position: absolute;
            /* Die Farbe des Overlay: rot, gruen, blau, Deckkraft */
            background-color: rgba(0, 0, 0, 0.7);
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transform: scale(0);
            transition: 0.5s;
        }
    </style>

Alles zum Rahmen kannst Du bei Selfhtml nachlesen:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/RahmenBeste Grüße - Ulrich

 

[Webhufi]

Gerade habe ich festgestellt, dass beim Start der Seite das graue Overlay leer im Vordergrund steht.
Habe ich da etwas verhunzt?

 

[Sempervivum]

Da ist im CSS transform: scale(0); für das Overlay auskommentiert, daher ist es nach dem Laden der Seite sichtbar.

 

[Webhufi]

Aha! Ich dachte, weil du es im Screenshot durchgestrichen hast, muss ich es deaktivieren.

 

[Sempervivum]

Das habe ich nicht von Hand durchgestrichen, sondern das hat das Javascript überschrieben mit transform: scale(1);, man sieht es im Screenshot weiter oben. Der Browser zeigt es dann durchgestrichen an. Während des Screenshots war das Overlay ja eingeblendet.

 

[Webhufi]

Aha! Danke!
Was mir jetzt noch bleibt, lieber Ulrich, ist ein finaler Dank: Mir hat es Spaß gemacht, durch deine Entwicklung zu lernen, und das Ergebnis lässt sich allemal sehen... Und da es dir offensichtlich auch Spaß gemacht hat, haben wir beide etwas davon!
Beste Grüße
Norbert