[GELOEST] Bilder bei Klick in original Größe öffnen

MQTT · 20 Januar 2024

Hallo, ich habe verschiedene Möglichkeiten ausprobiert, angefangen mit:

Code:

<a href="2.jpg" target="_blank"><img width="600px" src="2.jpg" alt="Bild kann nicht geladen werden." /></a>

dann mit css und js.
Aber ich habe es nicht geschafft, dass das Bild bei klick in original Größe (ohne schwarze Balken) aufpopt.
Geht sowas nur mit Fancybox?

damit habe ich auch gespielt:

Code:

<head>
<script>
function FensterOeffnen (Adresse) {
  MeinFenster = window.open(Adresse, "Zweitfenster", "width=300,height=400,left=100,top=200");
  MeinFenster.focus();
}
</script>
</head>
<body>
<img onclick="FensterOeffnen(this.src); return false" height="200px" width="200px" src="bild1.jpg"/>

width=auto oder 100% klappt z.B. nicht.

Die Bilder haben z.B: 1800x1050, 1800x1120 - sind also nicht alle gleich. Ich hätte sie gern bei klick in orig. Größe geöffnet, falls zu groß auf max. Bildschirmgröße reduziert.

edit:
ich muss bei

Code:

 window.open(Adresse, "Zweitfenster", "width=1800,height=1035,left=0,top=100");

die genaue Auflösung eingeben, da alle Bilder aber unterschiedlich sind -> doof.
auch würde ich gern das Popup mittig geöffnet haben.

edit2:
das ist auch nicht schlecht:

How To Create Modal Images

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

sehr komplex und nur für 1 Bild kriege ich das hin.

msi · 20 Januar 2024

MQTT schrieb:
Geht sowas nur mit Fancybox?

Fanybox ist ja auch nichts anderes als CSS und JavaScript. Aber wenn ich soetwas bräuchte, würde ich Fanybox nehmen, denn warum mühselig selber machen, wenn es eine ausgereifte Lösung gibt?

MQTT · 20 Januar 2024

ich habe eine für mich perfekte Lösung bei stackoverflow gefunden:

Code:

<link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Titel</h3>
    <div class="grid-container">
        <figure>
            <img src="1.jpg" width="500" data-modal>
            <figcaption>Bild 1</figcaption>
        </figure>
        <figure>
            <img src="2.jpg" width="500" data-modal>
            <figcaption>Bild 2</figcaption>
        </figure>
        <figure>
            <img src="3.jpg" width="500" data-modal>
            <figcaption>Bild 3</figcaption>
        </figure>
        <figure>
            <img src="4.jpg" width="500" data-modal>
            <figcaption>Bild 4</figcaption>
        </figure>
    </div>
    <script>
        document.querySelectorAll("img[data-modal]").forEach((img) => {
            let content = document.createElement("div"); //background
            content.className = "modal-content";
            content.appendChild(new Image()).src = img.src; //modal image
            img.insertAdjacentElement("afterend", content); //insert invisible content after image
            img.addEventListener("click", () => { //show modal on click
                content.style.opacity = "1";
                content.style.zIndex = "100";
                document.documentElement.style.overflow = "hidden"; //prevent scrolling while modal is shown
            });
            content.addEventListener("click", () => { //hide modal
                content.style.opacity = "";
                content.style.zIndex = "";
                document.documentElement.style.overflow = "";
            });
        });
    </script>
</body>
</html>

CSS:

Code:

img[data-modal] {
    cursor: zoom-in;
  }
 
  .modal-content {
    z-index: -100; /* behind everything */
    opacity: 0; /* invisible */
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8); /* black, transparent */
    width: 100vw; /* 100% width */
    height: 100vh; /* 100% height */
    display: flex;
    justify-content: center; /* horizontal align */
    align-items: center; /* vertical align */
    transition: 0.9s; /* animate */
    cursor: zoom-out;
  }
 
  .modal-content img {
    min-width: 50vw; /* at least 50% of the viewport width */
    height: auto;
  }
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    justify-items: center;
    align-items: start;
    grid-gap: 5px 5px;
}
body {
    font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, Sans-Serif;
    color:darkslategrey;
    background-color: transparent;
    font-weight: bold;
}
figure {
    text-align: center;
}

(Fehler korrigiert)

Letzter Beitrag von user14550434 https://stackoverflow.com/questions/47798971/several-modal-images-on-page

edit:

Code:

.modal-content img {
  width: auto;
  height: 100%;
}

-> besser

[GELOEST] Bilder bei Klick in original Größe öffnen

MQTT

Mitglied

How To Create Modal Images

msi

Aktives Mitglied

MQTT

Mitglied

Neueste Beiträge