I am currently working on a new project which required a slider featuring videos with thumbnails on the left and right. I've pretty much got the layout where I need it (for starters) but can't for the life of me seem how to link the thumbnails to activate it's designated slider.
For example, click on first thumb and slider will advance to first video,....click on third and slides to third video. (Just to clarify, case the first part was confusing).
Here's my test page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>FlexSlider 2</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
background-color: #275d39;
color: #FFF;
}
#wrapper {
width: 1000px;
margin: 0 auto;
overflow: hidden; /**float containment**/
}
/**middle**/
section {
width: 56%;
float: left;
}
/**left and right**/
aside {
width: 22%;
float: left;
font-size: 13px;
}
aside img {
margin-right: 12px; /**adjust value as needed**/
vertical-align: middle;
border: 5px groove #FFF;
float: left;
}
aside p {
padding: 6px;
font-weight: bold;
min-height: 75px;
border: 2px solid #CCC;
border-bottom: none;
}
/**add bottom border to last p only**/
aside p:last-child { border-bottom: 2px solid #CCC}
/**on mouseover**/
aside p:hover {
cursor: pointer;
background: #e2ae0e;
color: #275d39;
}
footer {
clear: both;
padding-top: 45px;
padding-left: 45px;
}
</style>
<!-- Demo CSS -->
<link rel="stylesheet" href="http://www.saintleo.edu/VirtualTour/FlexSlider2/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.saintleo.edu/VirtualTour/FlexSlider2/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="http://www.saintleo.edu/VirtualTour/FlexSlider2/modernizr.js"></script>
</head>
<body class="loading">
<div id="wrapper">
<!--left column-->
<aside>
<p><img alt="Overview" src="http://www.saintleo.edu/VirtualTour/Images/Overview-thumb.jpg">
Overview</p>
<p><img alt="St. Leo Abbey" src="http://www.saintleo.edu/VirtualTour/Images/St.LeoAbbey-thumb.jpg">
St. Leo Abbey</p>
<p><img alt="Athletics" src="http://www.saintleo.edu/VirtualTour/Images/Athletics-thumb.jpg">
Athletics</p>
<p><img alt="Student Community Center" src="http://www.saintleo.edu/VirtualTour/Images/StudentCommunityCenter-thumb.jpg">
Student Community Center</p>
<p><img alt="School of Education & Social Services" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfEducation&SocialServices-thumb.jpeg">
School of Education & Social Services</p>
</aside>
<section>
<div id="container" class="cf">
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65403004?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65402645?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65402828?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65402826?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65402829?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65402827?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65403002?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65403005?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65403006?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65403007?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
</ul>
</div>
</section>
</div>
</div>
</section>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="http://www.saintleo.edu/VirtualTour/FlexSlider2/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
// Vimeo API nonsense
var player = document.getElementById('player_1');
$f(player).addEvent('ready', ready);
function addEvent(element, eventName, callback) {
(element.addEventListener) ? element.addEventListener(eventName, callback, false) : element.attachEvent(eventName, callback, false);
}
function ready(player_id) {
var froogaloop = $f(player_id);
froogaloop.addEvent('play', function(data) {
$('.flexslider').flexslider("pause");
});
froogaloop.addEvent('pause', function(data) {
$('.flexslider').flexslider("play");
});
}
// Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
$(".flexslider")
.fitVids()
.flexslider({
animation: "slide",
useCSS: false,
animationLoop: false,
smoothHeight: true,
start: function(slider){
$('body').removeClass('loading');
},
before: function(slider){
$f(player).api('pause');
}
});
});
</script>
<!-- Syntax Highlighter -->
<script type="text/javascript" src="http://www.saintleo.edu/VirtualTour/FlexSlider2/shCore.js"></script>
<script type="text/javascript" src="http://www.saintleo.edu/VirtualTour/FlexSlider2/shBrushXml.js"></script>
<script type="text/javascript" src="http://www.saintleo.edu/VirtualTour/FlexSlider2/shBrushJScript.js"></script>
<!-- Optional FlexSlider Additions -->
<script src="http://www.saintleo.edu/VirtualTour/FlexSlider2/froogaloop.js"></script>
<script src="http://www.saintleo.edu/VirtualTour/FlexSlider2/jquery.fitvid.js"></script>
<script src="http://www.saintleo.edu/VirtualTour/FlexSlider2/demo.js"></script>
<!--right column-->
<aside>
<p><img alt="Freshman Residence Halls" src="http://www.saintleo.edu/VirtualTour/Images/FreshmanResidenceHalls-thumb.jpg">
Freshman Residence Halls</p>
<p><img alt="School of Arts & Sciences" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfArts&Sciences-thumb.jpg">
School of Arts & Sciences</p>
<p><img alt="Residence Apartments" src="http://www.saintleo.edu/VirtualTour/Images/ResidenceApartments-thumb.jpg">
Residence Apartments</p>
<p><img alt="Student Activities Building" src="http://www.saintleo.edu/VirtualTour/Images/StudentActivitiesBuilding-thumb.jpg">
Student Activities Building</p>
<p><img alt="School of Business" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfBusiness-thumb.jpg">
School of Business</p>
</aside>
<!--begin footer-->
<footer> Your footer goes here... </footer>
<!--end wrapper-->
</div>
</body>
</html>