134 lines
2.4 KiB
HTML
134 lines
2.4 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="da">
|
||
|
|
<head>
|
||
|
|
<title>Gallery</title>
|
||
|
|
<style type='text/css'>
|
||
|
|
* {
|
||
|
|
margin:0;
|
||
|
|
color:#000;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background:#fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#wrapper {
|
||
|
|
margin:10px auto 0 auto;
|
||
|
|
text-align:center;
|
||
|
|
width:800px;
|
||
|
|
height:600px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#nav {
|
||
|
|
height:20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#prev {
|
||
|
|
float:left;
|
||
|
|
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#next {
|
||
|
|
float:right;
|
||
|
|
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#picture {
|
||
|
|
max-width:100%;
|
||
|
|
max-height:100%;
|
||
|
|
border-color:#000;
|
||
|
|
border-style:solid;
|
||
|
|
border-width:1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#description {
|
||
|
|
margin:0 auto;
|
||
|
|
padding:3px;
|
||
|
|
text-align:left;
|
||
|
|
border-color:#000;
|
||
|
|
border-style:solid;
|
||
|
|
border-width:1px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type='text/javascript'>
|
||
|
|
no=1
|
||
|
|
pic1=new Image()
|
||
|
|
pic1.src="gallery/1.jpg"
|
||
|
|
pic2=new Image()
|
||
|
|
pic2.src="gallery/2.jpg"
|
||
|
|
pic3=new Image()
|
||
|
|
pic3.src="gallery/3.jpg"
|
||
|
|
pic4=new Image()
|
||
|
|
pic4.src="gallery/4.jpg"
|
||
|
|
pic5=new Image()
|
||
|
|
pic5.src="gallery/5.jpg"
|
||
|
|
pic6=new Image()
|
||
|
|
pic6.src="gallery/6.jpg"
|
||
|
|
pic7=new Image()
|
||
|
|
pic7.src="gallery/7.jpg"
|
||
|
|
pic8=new Image()
|
||
|
|
pic8.src="gallery/8.jpg"
|
||
|
|
|
||
|
|
function loadit() {
|
||
|
|
desc=document.getElementById("description")
|
||
|
|
wrapper=document.getElementById("wrapper")
|
||
|
|
pic=document.getElementById("picture")
|
||
|
|
|
||
|
|
pic.src="gallery/"+no+".jpg"
|
||
|
|
pic.onload=function(){
|
||
|
|
picstr=pic.scrollWidth+""
|
||
|
|
if (picstr.substr(2,1)!="1")
|
||
|
|
cif=8
|
||
|
|
else
|
||
|
|
cif=7
|
||
|
|
document.title=picstr
|
||
|
|
desc.style.width=pic.scrollWidth-cif+"px"
|
||
|
|
desc.innerHTML=no+".<br />"+pic.scrollWidth+" "+cif
|
||
|
|
//desc.style.width=picstr+"px"
|
||
|
|
//desc.innerHTML=no+".<br />"
|
||
|
|
|
||
|
|
if (no==1) {
|
||
|
|
document.getElementById("prev").style.display="none"
|
||
|
|
document.getElementById("next").style.display="block"
|
||
|
|
}
|
||
|
|
else if (no==8) {
|
||
|
|
document.getElementById("prev").style.display="block"
|
||
|
|
document.getElementById("next").style.display="none"
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
document.getElementById("prev").style.display="block"
|
||
|
|
document.getElementById("next").style.display="block"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload=loadit
|
||
|
|
|
||
|
|
function prev() {
|
||
|
|
no=no-1
|
||
|
|
loadit()
|
||
|
|
}
|
||
|
|
|
||
|
|
function next() {
|
||
|
|
no=no+1
|
||
|
|
loadit()
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id='wrapper'>
|
||
|
|
<div id='nav'>
|
||
|
|
<div id='prev' onclick='prev()'><··· Previous</div>
|
||
|
|
<div id='next' onclick='next()'>Next ···></div>
|
||
|
|
</div>
|
||
|
|
<img id='picture' src='' alt='' />
|
||
|
|
<div id='description'></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|