I have a post type that has multiple images. I want to have a large image with thumbnails underneath it like this -> http://flexslider.woothemes.com/thumbnail-controlnav.html.
So I downloanded Flexslider and put it in my wordpress directory and linked it in <head> tags:
<link rel="stylesheet" href="/wp-content/themes/smartpathrealty1/JScript/flexslider/flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="/wp-content/themes/smartpathrealty1/JScript/flexslider/jquery.flexslider.js"></script>
Then I added the following javascript per the instructions;
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});
Then I created a view that was a slider view and added this code:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="flexslider">
<ul class="slides">
<wpv-loop>
<li data-thumb="[types field="photographs" size="thumbnail" url="true" resize="crop" separator=""][/types]">[types field="photographs" width="400" height="400" align="left" resize="proportional" separator="</li><li>"][/types]</li>
</wpv-loop>
</ul>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
Then I created a content template called listings that calls the view. I then assigned my custom-post-type to use this content template.
All that displays is a page full of the images (photographs)…
What am I doing wrong? Please help??