Blickfang -- orgy -- Bild"

Ich platzieren gern ein Bild zu einem Artikel, egal ob es einen Bezug zum Inhalt gibt oder es einfach nur ein Blickfang für ein insteressantes Motiv ist, wie hier die Schirmpilze. Ein Klick auf die Vorschau soll auch noch eine vergrößerte Version präsentieren. Und so funktioniert es:

Im Artikel

Das Bild platzieren ...

#+begin_export html

<figure style="float:right; width:220px; margin:20px;">
  <img src="../kenya_on_the_globe.png"
       class="thumbnail"
       onclick="openOverlay()">
  <figcaption>Kenia auf der Weltkarte</figcaption>
</figure>
<!-- Overlay -->
<div id="overlay" onclick="closeOverlay()">
  <img src="../kenya_on_the_globe.png">
</div>

#+end_export
  

JavaScript einbinden

function openOverlay() {
    document.getElementById("overlay").style.display = "flex";
}

function closeOverlay() {
    document.getElementById("overlay").style.display = "none";
}

  

CSS zum Bild

.thumbnail {
    width: 200px;
    cursor: pointer;
}

#overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);

    /* Bild zentrieren */
    justify-content: center;
    align-items: center;

    z-index: 9999;
}

#overlay img {
    max-width: 90%;
    max-height: 90%;
    cursor: pointer;
    box-shadow: 0 0 20px black;
}