Her er det jeg har fået lavet alt i alt.
Nu mangles der bare, at formindske billederne, så de passer bedre, og at få dem til at fremvises på selve siden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Billeder</title>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/
$("a#example1").fancybox();
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("a#example5").fancybox();
$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
$("a#example7").fancybox({
'titlePosition' : 'inside'
});
$("a#example8").fancybox({
'titlePosition' : 'over'
});
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
/*
* Examples - various
*/
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("#various2").fancybox();
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
<style type="text/css">
div, img { behavior: url(iepngfix.htc) }
#down {
position: fixed;
bottom:5px;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="forside.htm"><img src="images/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="andet.htm"><img src="images/portfolio.png" alt="Things" /><span>Things</span></a>
<a class="dock-item" href="film.htm"><img src="images/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="kontakt.htm"><img src="images/history.png" alt="Contact" /><span>Contact</span></a>
<a class="dock-item" href="billeder.htm"><img src="images/calendar.png" alt="photos" /><span>Photos</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 120,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
<img id="down" src="images/down.png">
<p>
Der her er mit lille billedegalleri<br />
<a rel="example_group" href="spacebillede1.jpg" title="Dette billede er fra..."><img alt="" src="spacebillede1.jpg" /></a>
<a rel="example_group" href="spacebillede2.jpg" title="Dette billede er fra...."><img alt="" src="spacebillede2.jpg" /></a>
<a rel="example_group" href="spacebillede3.jpg" title="Dette billede er fra...."><img alt="" src="spacebillede3.jpg" /></a>
<a rel="example_group" href="spacebillede4.jpg" title="Dette billede er fra...."><img class="last" alt="" src="spacebillede4.jpg" /></a>
</p>
<div style="display: none;">
<div id="inline1" style="width:400px;height:100px;overflow:auto;">
</div>
</div>
<p>
</p>
</div>
</body>
</html>
Tak hvis du gider rette den.
Ny bruger
Nybegynder
Opret
Preview
