hicky
Legacy Member
Hallo,
ik probeer een jquery cycle slideshow in een horizontale Slider te steken, maar dit werkt niet. Moet ik het script ergens anders zetten? Afhankelijk van waar ik welk script zet werkt er één van de slideshows of helemaal niets.
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 5000,
timeout: 2000
});
});
</script>
</head>
<body>
<div id="header">
<hr>
</div>
<div id="menu">
<a href="#" onClick="Animate2id('#c1'); return false">home</a>
<a href="#" onClick="Animate2id('#c2','easeOutQuint'); return false" >creaties</a>
<a href="#" onClick="Animate2id('#c3','easeOutQuint'); return false" >boeket v/d week</a>
<a href="#" onClick="Animate2id('#c4','easeOutQuint'); return false" >bestellingen</a>
<a href="#" onClick="Animate2id('#c5','easeOutQuint'); return false" >contact</a>
</div>
<div id="container">
<div id="c1">
<div class="content">
<div id="myslides">
<img src="images/capitol.jpg" />
<img src="images/flowers.jpg" />
<img src="images/countryscene.jpg" />
</div>
</div>
</div>
<div id="c2">
<div class="content">Content 2</div>
</div>
<div id="c3">
<div class="content">Content 3</div>
</div>
<div id="c4">
<div class="content">Content 4</div>
</div>
<div id="c5">
<div class="content">
<p>
</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script>
function Animate2id(id,ease){ //the id to animate, the easing type
var animSpeed=2000; //set animation speed
var $container=$("#container"); //define the container to move
if(ease){ //check if ease variable is set
var easeType=ease;
} else {
var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, animSpeed, easeType);
}
</script>
</body>
</html>
ik probeer een jquery cycle slideshow in een horizontale Slider te steken, maar dit werkt niet. Moet ik het script ergens anders zetten? Afhankelijk van waar ik welk script zet werkt er één van de slideshows of helemaal niets.
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 5000,
timeout: 2000
});
});
</script>
</head>
<body>
<div id="header">
<hr>
</div>
<div id="menu">
<a href="#" onClick="Animate2id('#c1'); return false">home</a>
<a href="#" onClick="Animate2id('#c2','easeOutQuint'); return false" >creaties</a>
<a href="#" onClick="Animate2id('#c3','easeOutQuint'); return false" >boeket v/d week</a>
<a href="#" onClick="Animate2id('#c4','easeOutQuint'); return false" >bestellingen</a>
<a href="#" onClick="Animate2id('#c5','easeOutQuint'); return false" >contact</a>
</div>
<div id="container">
<div id="c1">
<div class="content">
<div id="myslides">
<img src="images/capitol.jpg" />
<img src="images/flowers.jpg" />
<img src="images/countryscene.jpg" />
</div>
</div>
</div>
<div id="c2">
<div class="content">Content 2</div>
</div>
<div id="c3">
<div class="content">Content 3</div>
</div>
<div id="c4">
<div class="content">Content 4</div>
</div>
<div id="c5">
<div class="content">
<p>
</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script>
function Animate2id(id,ease){ //the id to animate, the easing type
var animSpeed=2000; //set animation speed
var $container=$("#container"); //define the container to move
if(ease){ //check if ease variable is set
var easeType=ease;
} else {
var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, animSpeed, easeType);
}
</script>
</body>
</html>
