<!DOCTYPE html>
<html>
<head>
<title>Lightbox selbstgemacht</title>
<style>
/* Galerie */
div#Galerie a img {
position: relative;
top: 0;
left: 0;
float: left;
margin: 50px;
width: 250px;
height: 200px;
border: 2px;
}
/* Galerie Ende*/
/* Lightbox */
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
padding: 0px;
}
.white_content {
display: none;
position: fixed;
top: 25%;
left: 22%;
height: 370px;
z-index:1002;
overflow: auto;
}
div#light img {
width: 790px;
height: 340px;
}
div#previous a{
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: white;
position: absolute;
}
div#next a{
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: white;
align: right;
position: absolute;
right: 20px;
}
div#exit a{
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: black;
align: right;
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body onkeydown="keydown(event);">
<script>
var num=0;
function slideshow(slide_num) {
document.getElementById('imggallery').src=imgArray[slide_num];
}
function Bildwechsel(idx) {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
num = idx;
slideshow(num);
}
function slideshowUp() {
num++;
num = num % imgArray.length;
slideshow(num);
}
function slideshowBack() {
num--;
if (num < 0) {num=imgArray.length-1;}
num = num % imgArray.length;
slideshow(num);
}
function keydown(ev) {
if ( ev.keyCode === 27 ) {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
else if ( ev.keyCode === 37 ) {
slideshowBack();
}
else if ( ev.keyCode === 39 ) {
slideshowUp();
}
};
var imgArray = <?php echo json_encode(glob("bilder/[0-9]*.jpg")); ?>;
</script>
<div id="Content">
<h1>Bildergalerie</h1>
<div id="Galerie">
<?php
$images = glob("bilder/[0-9]*.jpg");
for ($i = 0; $i < count($images); $i++) {
echo '<img src="' . $images[$i] . '" onclick="Bildwechsel(' . $i . ')">';
}
?>
<a id="Galeria"><img id="Galerie"></a>
<div id="light" class="white_content"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett.jpg" id="imggallery" name="gallery" border="0">
<div id="previous"><a href="#" onclick="slideshowBack(); return false;">« Previous</a></div>
<div id="next">
<a href="#" onclick="slideshowUp(); return false;"> Next »</a></div>
<div id="exit"><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">X</a></div>
</div>
<div id="fade" class="black_overlay"></div>
</div>
</div>
</body>
</html>
