Eine einfache Lightbox mit Javascript

Lightboxen sind voll im Tend. Sie zeigen Bilder abgesetzt vom Hintergrund der Seite vor einer halb transparenten Folie.

Hier wirkt eine abgespeckte Form der Lightbox: 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.

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

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> 
	
<p><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" … />	
</p>

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;
   -moz-opacity: 0.8;
   opacity:.80;
   filter: alpha(opacity=80);
}

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

.LB_Simple { cursor: pointer; }

Das Lightbox-Script

Das Skript sammelt 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.nextSibling) wird die Sichtbarkeit des Bildes auf display: block gesetzt.

<script type="text/javascript">
<!--
var allimg = document.getElementsByTagName('img');
for (var i=0, img; img=allimg[i]; i++ ) {
   if (img.className.match(/LB_Simple/)) {
      img.onclick = function () {
         var limg = this.nextSibling;
         
         while (limg.nodeName != 'IMG' && limg.nextSibling) 
            limg = limg.nextSibling;

         if (limg.nodeName == 'IMG') {
            document.getElementById('LB_Shade').style.display = "block"; 
            
            var iWidth = window.innerWidth ||  // Breite und Höhe 
                                               // des Browserfensters
                (window.document.documentElement.clientWidth || 
                window.document.body.clientWidth);
            var iHeight = window.innerHeight || 
                (window.document.documentElement.clientHeight || 
                window.document.body.clientHeight);
      
            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>

In IE 6 wird position: fixed noch nicht unterstützt – mit einem conditional comment kann anstelle dessen position: absolute benutzt werden. Allerdings scrollt das große Bild, wenn der Benutzer das Browserfenster scrollt.