将缩略图链接到幻灯片

时间：2013-08-30 18:09:10

标签： slider hyperlink thumbnails flexslider video-thumbnails

我目前正在开发一个新项目，该项目需要一个左右两侧带缩略图的滑块。我几乎得到了我需要它的布局（对于初学者）但是对于我的生活似乎无法链接缩略图以激活它的指定滑块。

例如，单击第一个拇指，滑块将前进到第一个视频，....单击第三个并滑动到第三个视频。 （只是为了澄清，案件的第一部分令人困惑）。

这是我的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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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>

0 个答案:

没有答案
相关问题
最新问题