jquery Flexslider manual controls is not working
I am trying to implement manual controls for the "flexslider" plugin.

Here's my code:  

    <body>
    <div class="container">
		<div class="columns row">
			<div class="flexslider"><ul class="slides">
				<li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="1.jpg"></li>
				<li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="2.jpg"></li>
				<li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="3.jpg"></li>
				<li style="width: 100%; float: left; margin-right: -100%; display: list-item;"><img src="4.jpg"></li>								
			</ul><ol class="flex-control-nav"><li><a class="">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li><li><a class="active">4</a></li></ol><ul class="flex-direction-nav"><li><a href="#" class="prev">Previous</a></li><li><a href="#" class="next">Next</a></li></ul></div>
		</div>
		
			
		<div class="columns row"><h2><strong>Bla bla bla</strong> Lorum lorum</h2></div>
		
		<div class="columns row">
		<div id="thumbnail">
			<img width="100" border="0" style="margin: 0 16px 0 0" src="1.jpg">
			<img width="100" border="0" style="margin: 0 16px 0 0" src="2.jpg">
			<img width="100" border="0" style="margin: 0 16px 0 0" src="3.jpg">
			<img width="100" border="0" style="margin: 0 16px 0 0" src="4.jpg">
		</div>
		</div>
    </div>
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	
	<script src="../../javascripts/jquery.flexslider-min.js"></script>
	
	<!-- Hook up the FlexSlider -->
	<script type="text/javascript">
		$(window).load(function() {
			$('.flexslider').flexslider({
				controlNav: true,
				manualControls: "#thumbnail img"
			});
		});
	</script>

</body>  

I want to have thumbnail pictures as slider control. What am I doing wrong?
jquery Flexslider manual controls is not working
===

I am trying to implement manual controls for the "flexslider" plugin.

Here's my code:  

    <body>
    <div class="container">
		<div class="columns row">
			<div class="flexslider"><ul class="slides">
				<li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="1.jpg"></li>
				<li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="2.jpg"></li>
				<li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="3.jpg"></li>
				<li style="width: 100%; float: left; margin-right: -100%; display: list-item;"><img src="4.jpg"></li>								
			</ul><ol class="flex-control-nav"><li><a class="">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li><li><a class="active">4</a></li></ol><ul class="flex-direction-nav"><li><a href="#" class="prev">Previous</a></li><li><a href="#" class="next">Next</a></li></ul></div>
		</div>
		
			
		<div class="columns row"><h2><strong>Bla bla bla</strong> Lorum lorum</h2></div>
		
		<div class="columns row">
		<div id="thumbnail">
			<img width="100" border="0" style="margin: 0 16px 0 0" src="1.jpg">
			<img width="100" border="0" style="margin: 0 16px 0 0" src="2.jpg">
			<img width="100" border="0" style="margin: 0 16px 0 0" src="3.jpg">
			<img width="100" border="0" style="margin: 0 16px 0 0" src="4.jpg">
		</div>
		</div>
    </div>
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	
	<script src="../../javascripts/jquery.flexslider-min.js"></script>
	
	<!-- Hook up the FlexSlider -->
	<script type="text/javascript">
		$(window).load(function() {
			$('.flexslider').flexslider({
				controlNav: true,
				manualControls: "#thumbnail img"
			});
		});
	</script>

</body>  

I want to have thumbnail pictures as slider control. What am I doing wrong?