Kais Kiste | Sie sind hier: Kiste > IT & Web > seg lightbox demo

seg lightbox demo

Content will be loaded in here

x
Massive Satisfaction in the lightbox DAYUM

Lightbox HTML

<div id="seg-lb-bg"><div id="seg-lb-wrapper1"><div id="seg-lb-wrapper2">
  <div id="seg-lb-box"><div id="seg-lb"><p>Content will be loaded in here</p></div>
  <a class="seg-lb-b" href="javascript:void(0)" onclick="seg_lb_hide()">x</a></div>
</div></div></div>

Lightbox CSS

#seg-lb-bg{
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.95);
}
#seg-lb-wrapper1{
  display:table;
  text-align:center;
  margin:0 auto;
  min-height:100%;
}
#seg-lb-wrapper2{
  display:table-cell;
  vertical-align:middle;
  text-align:left;
  zoom:1;
}
#seg-lb-box{
  position:relative;
  background:#eee;
  border:3px solid #000;
}
#seg-lb img{
  max-width:800px;
  max-height:500px;
  display:block;
}
.seg-lb-b{
  position:absolute;
  top:0;
  right:0;
  background:rgba(0,0,0,0.8);
  height:2em;
  line-height:2em;
  width:2em;
  text-align:center;
}
.seg-lb-b:hover{
  background:rgba(0,0,0,0.3);
}

Javascript functions

function seg_lb_show(){document.getElementById("seg-lb-bg").style.display="block";}
function seg_lb_hide(){document.getElementById("seg-lb-bg").style.display="none";}
function seg_lb_fill(filling){document.getElementById("seg-lb").innerHTML=filling;}

Example: Link that opens an image in the lightbox

<a href="javascript:void(1)"
  onclick="seg_lb_fill('<img src=\'/kiste/public/images/massive_satisfaction.png\' />');
           seg_lb_show()">
  Massive Satisfaction in the lightbox DAYUM</a>