Hey allemaal!
Ik ben vandaag bezig geweest met mijn Fancybox proberen te integreren in mijn portfolio voor school, maar ik krijg het gewoon niet voor elkaar. Gisteren heb ik er ook al een hele tijd voor gezeten..
Kan iemand me misschien hierbij helpen? Dit is de code die ik in mijn HTML bestand heb staan:
Nu is het zo dat het kleine plaatje er wel gewoon staat, maar dat wanneer ik erop klikt, de gewone foto zeg maar in een nieuw scherm komt.
Alvast heel erg bedankt!
Groetjes Eveline
Ik ben vandaag bezig geweest met mijn Fancybox proberen te integreren in mijn portfolio voor school, maar ik krijg het gewoon niet voor elkaar. Gisteren heb ik er ook al een hele tijd voor gezeten..
Kan iemand me misschien hierbij helpen? Dit is de code die ik in mijn HTML bestand heb staan:
Code:
<head>
<title></title>
<meta name="generator" content="CSE HTML Validator Professional (http://www.htmlvalidator.com/)" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.0.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.0.css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("a#example1").fancybox({
'titleShow' : false
});
$("a#example2").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example3").fancybox({
'titleShow' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example4").fancybox();
$("a#example5").fancybox({
'titlePosition' : 'inside'
});
$("a#example6").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 + '</span>';
}
});
</script>
</head>
<body>
<div id="navigatie">
<div id="homebutton">
<a href="index.html"
onmouseover="document.index.src='afbeeldingen/buttons/home_over.png'"
onmouseout="document.index.src='afbeeldingen/buttons/home.png'">
<img name="index" src="afbeeldingen/buttons/home.png" alt="ButtonIndex" />
</a>
</div>
<div id="overmijbutton">
<a href="overmij.html"
onmouseover="document.overmij.src='afbeeldingen/buttons/overmij_over.png'"
onmouseout="document.overmij.src='afbeeldingen/buttons/overmij.png'">
<img name="overmij" src="afbeeldingen/buttons/overmij.png" alt="OverMij" />
</a>
</div>
<div id="projectenbutton">
<a href="projecten.html"
onmouseover="document.projecten.src='afbeeldingen/buttons/projecten_over.png'"
onmouseout="document.projecten.src='afbeeldingen/buttons/projecten.png'">
<img name="projecten" src="afbeeldingen/buttons/projecten.png" alt="Projecten" />
</a>
</div>
<div id="contactbutton">
<a href="contact.html"
onmouseover="document.contact.src='afbeeldingen/buttons/contact_over.png'"
onmouseout="document.contact.src='afbeeldingen/buttons/contact.png'">
<img name="contact" src="afbeeldingen/buttons/contact.png" alt="Contact" />
</a>
</div>
</div>
<div id="header">
<p><img src="afbeeldingen/header.png" alt="header van de site" /></p>
</div>
<div id="container">
<div id="content">
<div id="links">
<ul id="projectennavigatie">
<li>Blok 1</li>
<li>Blok 2</li>
<li>Blok 3</li>
</ul>
</div>
<div id="rechts">
<a id="example1" href="afbeeldingen/projecten/catdog.jpg">
<img alt="example1" src="afbeeldingen/projecten/catdog_t.jpg" />
</a>
<a id="example2" href="2_b.jpg">
<img alt="example2" src="2_s.jpg" />
</a>
<a id="example3" href="3_b.jpg">
<img alt="example3" src="3_s.jpg" />
</a>
</div>
</div>
</div>
</body>
</html>Nu is het zo dat het kleine plaatje er wel gewoon staat, maar dat wanneer ik erop klikt, de gewone foto zeg maar in een nieuw scherm komt.
Alvast heel erg bedankt!
Groetjes Eveline
