Cacher is the code snippet organizer for pro developers

http://flexslider.woothemes.com/thumbnail-slider.html

HEADER: 
<link rel="stylesheet" href="http://popbetaserver.com/projects/titan/wp-content/themes/multipurpose/styles/flexslider.css" type="text/css">


<?php 
// advanced custom field:  type 'gallery'
$images = get_field('galleryslider');
?>
	   
	<div id="slider" class="flexslider">

	  <ul class="slides">
	    <?php foreach( $images as $image ): ?>
	
	    <li>
	      <img src="<?php echo $image['url']; ?>" />
	    </li>
	    <?php endforeach; ?>
	
	    </ul>
	
	</div>
	
	
	<div id="productSliderThumbs" class="flexslider">
		<div class="flex-viewport">
	  <ul class="slides">
	    <?php foreach( $images as $image ): ?>
	
	    <li>
	      <img src="<?php echo $image['url']; ?>" />
	    </li>
	    <?php endforeach; ?>
	
	    </ul>
		</div>
	</div>




<!-- this might break some other WP jquery, in that case remove this line and use WP jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://popbetaserver.com/projects/titan/wp-content/themes/multipurpose/js/jquery.flexslider.js"></script>
	
<script type="text/javascript" charset="utf-8">

jQuery(window).load(function() {

  jQuery('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#productSliderThumbs",
        start: function(slider) {
	        jQuery('#productSliderThumbs .slides li img').click(function(event){
	            event.preventDefault();
	            slider.flexAnimate(slider.getTarget("next"));
	           //jQuery('#slider').flexslider(jQuery(this).data("slide-to"));
	           // var count = slider.currentSlide + 1;
	            //slider.flexAnimate(count);
	        });
        }
        
  });
  

  jQuery('#productSliderThumbs').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 200,
    itemMargin: 5,
    asNavFor: '#slider'
  });  	
  
});

</script>