I've been trying to teach myself Jquery. I am trying to use an add-on roundabout that should take images and load them into a carousel. but I'm having a problem that I can't figure out, and I was hoping to get some help. below is the small html with the jquery code. The first part of the code works, and will load the div with all the images. When I call flipit which uses the roundoubut add on nothing happens.
When I first typed it in i used a lower case s in the childselector, and the images appeared in the div, but nothing happened. When I fixed it childSelector the images dissapeared.
Can anyone see what I've done wrong?
<!doctype html>
<html>
<head charset="utf-8">
<title>flip</title>
<LINK REL=StyleSheet HREF="includes/flip.css" TYPE="text/css" MEDIA=screen />
<script type="text/javascript" src="includes/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="includes/roundabout/jquery.roundabout.min.js"></script>
<script type="text/javascript" src="includes/flip.js"></script>
</head>
<body>
<div class="my_container">
<div class="flip_container">
<div id="container"></div>
</div>
</div>
<div class="container_data">
<div class="flip_item">
<div class="image">
<img src="images/Webpage.png" />
</div>
<div class="image">
<img src="images/Webpage.png" />
</div>
<div class="image">
<img src="images/Webpage.png" />
</div>
<div class="image">
<img src="images/Webpage.png" />
</div>
<div class="image">
<img src="images/Webpage.png" />
</div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
$('.container_data .flip_item').each(function(){
$('#container').append($(this).find('.image').html());
});
flipit();
});
function flipit (){
$('div#container').roundabout({
childSelector: 'img',
tilt: -4.5,
minOpacity: 1,
minScale:.45,
duration: 1200
});
}
1 Correct answer
1
Reply
AdChoices