CSS, HTML und Javascript mit {stil}

Eine einfache Lightbox mit Javascript

Einfache Lightbox – Vanilla Javascript

Lightboxen zeigen Bilder abgesetzt vom Hintergrund der Seite vor einer halb transparenten Folie.

Hier wirkt eine stark abgespeckte Form einer Lightbox ohne jQuery: Das Skript zeigt immer nur ein Bild in der Lightbox. Dafür sind sowohl der HTML-Code als auch das Skript besonders simpel und der größte Teil des Lightbox-Effekts wird durch CSS-Eigenschaften eingebracht.

jQuery bietet unzählige Variationen von Lightshows und Lightboxen. Aber nicht jede Seite muss für eine größere Version eines Bildes gleich mit jQuery angereichert werden.

Lightbox in Vanilla Javascript:

glanzbild-1.jpg glanzbild-1.jpg glanzbild-2.jpg glanzbild-2.jpg

HTML und CSS für die Lightbox

Hinter jedem Vorschaubild steht die größere Version des Bildes. Die größere Version wird durch die CSS-Eigenschaft display: none ausgeblendet.

HTML-Code
<div id="LB_Shade"></div> 
	
<div>
   <img class="LB_Simple" src="thumbs/bild1.jpg" … />
   <img class="LB_Full" src="bild1.jpg" … />
   <img class="LB_Simple" src="thumbs/bild2.jpg" … />
   <img class="LB_Full" src="bild2.jpg" … />	
</div>

LB_Shade ist der »Vorhang« – der semitransparente Hintergrund, der über die Seite gelegt wird, wenn das Vorschaubild geklickt wird. Das div-Element wird durch eine CSS-Eigenschaft display: none zunächst ausgeblendet.

CSS-Eigenschaften für LB-Shade und Bilder
#LB_Shade { 
   display: none; 
   position: fixed; z-index: 1000;
   top: 0%; left: 0%;
   width: 100%; height: 100%;
   background-color: black;
   opacity: .8;
}

.LB_Full {
   display: none; position: fixed; z-index: 2000;
   border: 2px solid black; background: black;
   padding: 10px; background-color: white; 
   width: 400px; height: 370px;
}

.LB_Simple { cursor: pointer; width: 120px; height: 111px; }

Das Lightbox-Script

Das Skript sammelt mit document.querySelectorAll alle img-Tags mit class="LB_Simple" und legt einen onclick-Event-Handler auf die Tags. Bei einem Klick auf ein Vorschaubild setzt

document.getElementById('LB_Shade').style.display = "block";

den schwarzen Vorhand auf sichtbar. Auch für die größere Bildversion – var limg = this.nextElementSibling – wird die Sichtbarkeit des Bildes auf display: block gesetzt.

<script>
var allimg = document.querySelectorAll('.LB_Simple');
for (var i=0, img; img=allimg[i]; i++ ) {

   img.onclick = function () {
      var limg = this.nextElementSibling;

      if (limg.nodeName == 'IMG') {
         document.getElementById('LB_Shade').style.display = "block"; 
         // Breite und Höhe des Browserfensters
         var iWidth = window.innerWidth;
         var iHeight = window.innerHeight;
  
         limg.style.display = "block";
         limg.style.top = parseInt(iHeight/2 - limg.getAttribute('height')/2) + "px";
         limg.style.left = parseInt(iWidth/2 - limg.getAttribute('width')/2) + "px";

         limg.onclick = function() {
            this.style.display = "none";
            document.getElementById('LB_Shade').style.display = "none";
         };
      } 

      document.getElementById('LB_Shade').onclick = function() {
         if (limg && limg.nodeName == 'IMG') limg.style.display = "none";
         this.style.display = "none";
      }
   }
}
</script>

Das Script ist ausgesprochen einfach gehalten – es ist nur ein Einstieg. Die simple Lightbox ist nicht responsive, sie geht davon aus, dass der HTML-Code für Vorschaubilder und die größere Fassung korrekt geschrieben ist und bietet auch keinen Button, um die größere Version des Bildes wieder zu schließen.