Hallo!
Het is mijn eerste ervaring met javascript ooit, en ik heb hiervoor een tutorial gebruikt. Het gaat om een caroussel van thumbnails wat een menu word. Er zitten twee buttons, previous en next om het in beweging te zetten.. In het gedownloade document van de tutorial heb ik de aanpassingen gemaakt voor mijn eigen portfoliowebsite en dat werkte prima, maar eenmaal copy + paste in mijn eigen document bij de rest van de website doet het helmaal niks meer.. Ik heb er zelf te weinig kaas van gegeten om te zien wat ik fout doe.. Ziet iemand misschien wat ik niet zie en kan iemand me op weg helpen? Ik hoop het , want dan kan ik op zoek naar een stage
vr. gr. Janke
Hieronder mijn code, ik had de javascript in mijn htmlbestand.. In 3 kolommen hier maar in mijn document is het 1 bestand.
[JS]
<script type="text/javascript">
window.addEvent('domready', function(){
var totIncrement = 0;
var increment = 212;
var maxRightIncrement = increment*(-6);
var fx = new Fx.Style('myList', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
//-------------------------------------
// EVENTS for the button "previous"
$('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement+increment;
fx.stop()
fx.start(totIncrement);
}
}
});
//-------------------------------------
// EVENTS for the button "next"
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}
})
});
</script>
[/JS]
Het is mijn eerste ervaring met javascript ooit, en ik heb hiervoor een tutorial gebruikt. Het gaat om een caroussel van thumbnails wat een menu word. Er zitten twee buttons, previous en next om het in beweging te zetten.. In het gedownloade document van de tutorial heb ik de aanpassingen gemaakt voor mijn eigen portfoliowebsite en dat werkte prima, maar eenmaal copy + paste in mijn eigen document bij de rest van de website doet het helmaal niks meer.. Ik heb er zelf te weinig kaas van gegeten om te zien wat ik fout doe.. Ziet iemand misschien wat ik niet zie en kan iemand me op weg helpen? Ik hoop het , want dan kan ik op zoek naar een stage
vr. gr. Janke
Hieronder mijn code, ik had de javascript in mijn htmlbestand.. In 3 kolommen hier maar in mijn document is het 1 bestand.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Horizontal Carousel</title>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">
window.addEvent('domready', function(){
var totIncrement = 0;
var increment = 212;
var maxRightIncrement = increment*(-6);
var fx = new Fx.Style('myList', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
//-------------------------------------
// EVENTS for the button "previous"
$('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement+increment;
fx.stop()
fx.start(totIncrement);
}
}
});
//-------------------------------------
// EVENTS for the button "next"
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}
})
});
</script>
[/JS]
HTML:
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<!-- Header -->
<div id="header">
<!-- de grote titel -->
<img id="logo" src="images/logo_janke.png" alt="logo janke" />
<a href="#" class="work"> <span>RSS Feeds</span></a>
<a href="#" class="about"> <span>RSS Feeds</span></a>
<a href="#" class="contact"> <span>RSS Feeds</span></a>
</div>
<div class="slider-buttons">
<a href="#" id="previous"><img src="images/caroussel_previous.png" /></a>
</div>
<div id="stage">
<ul id="myList">
<li id="l1"><img src="images/thumbs/thumb1.png" /></li>
<li id="l2"><img src="images/thumbs/thumb2.png" /></li>
<li id="l3"><img src="images/thumbs/thumb3.png" /></li>
<li id="l4"><img src="images/thumbs/thumb4.png" /></li>
<li id="l5"><img src="images/thumbs/thumb5.png" /></li>
<li id="l6"><img src="images/thumbs/thumb6.png" /></li>
<li id="l7"><img src="images/thumbs/thumb7.png" /></li>
<li id="l8"><img src="images/thumbs/thumb8.png" /></li>
<li id="l9"><img src="images/thumbs/thumb9.png" /></li>
<li id="l10"><img src="images/thumbs/thumb10.png" /></li>
<li id="l11"><img src="images/thumbs/thumb11.png" /></li>
<li id="l12"><img src="images/thumbs/thumb12.png" /></li>
<li id="l13"><img src="images/thumbs/thumb13.png" /></li>
</ul>
</div>
<div class="slider-buttons">
<a href="#" id="next"><img src="images/caroussel_next.png" /></a>
</div>
<!-- middenstuk, de inhoud -->
<div id="content">
<!-- de linkerbalk in het middenstuk -->
<div id="left">
<p>Links</p>
</div>
<!-- de rechterbalk in het middenstuk -->
<div id="right">
<p>Rechts</p>
</div>
</div>
<!-- de onderbalk, footer -->
<div id="footer">
<img src="images/footer.png" alt="footer" />
</div>
</div>
</body>
</html>
