Aug 2009

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.