JavaScript - Bilder bei Klick in Originalgröße öffnen

Bildunterschrift (Optional)

<style>

  
img[data-modal] {
    
bordersolid 3px steelblue;
    
transition0.8s;
    
width250px;

    &:
hover {
      
cursorzoom-in;
      
filterbrightness(112%);
    }
  }

  .
modal-content {
    
align-itemscenter;
    
backgroundrgba(0000.8);
    
displayflex;
    
height100vh;
    
justify-contentcenter;
    
left0;
    
opacity0;
    
positionfixed;
    
top0;
    
transitionall 1.8s;
    
width100vw;
    
z-index: -100;
  }

  .
modal-content img {
    
min-width50vw;
    
heightauto;
    
transition0.8s;

    &:
hover {
      
cursorzoom-out;
      
filterbrightness(112%);
    }
  }

  .
grid-container {
    
align-itemsstart;
    
displaygrid;
    
grid-gap5px 5px;
    
grid-template-columnsrepeat(auto-fillminmax(250px1fr));
    
justify-itemscenter;
  }

  
figure {
    
text-aligncenter;
  }

  
figure figcaption {
    
margin-top10px;
  }
</
style>

<
div class="grid-container">

  <
figure>
    <
img src="bild1.jpg" data-modal />
    <
figcaption>Bildunterschrift (Optional)</figcaption>
  </
figure>

  <
figure>
    <
img src="bild2.jpg" data-modal />
  </
figure>

  <
figure>
    <
img src="bild3.jpg" data-modal />
  </
figure>

  <
figure>
    <
img src="bild4.jpg" data-modal />
  </
figure>

</
div>

<
script>
  
document.querySelectorAll("img[data-modal]").forEach((img) => {
    
let content document.createElement("div");
    
content.className "modal-content";
    
content.appendChild(new Image()).src img.src;
    
img.insertAdjacentElement("afterend"content);

    
img.addEventListener("click", () => {
      
content.style.opacity "1";
      
content.style.zIndex "100";
      
document.documentElement.style.overflow "hidden";
    });

    
content.addEventListener("click", () => {
      
content.style.opacity "";
      
content.style.zIndex "";
      
document.documentElement.style.overflow "";
    });
  });
</
script>

Bei einer Änderung der Bildgröße, muss diese in der CSS-Anweisung an zwei stellen erfolgen (250px).

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<link> Logische Beziehung

CSS - Container mit Eselsohren

PHP - Array verbinden und lesbar ausgeben

JavaScript - Fortschrittsanzeige mit JavaScript verändern

MySQL - Spalten aktualisieren