SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Desperately need help linking thumbnails to slides (Flexslider)

    Let me start by saying that I've been banging my head against the wall for at least a week with this problem. I can't seem to find anyone with the knowledge or willing to assist.

    I am a newbie and am learning as I go.

    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.

    http://www.saintleo.edu/VirtualTour/video.html

    Thank you in advance for your time and assistance. I GREATLY appreciate it.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi kinney0201 . Welcome to the forums.

    Did you just grab the basic version of Flexslider? What you should do is get the closest example to what you want, which looks like this one:

    http://flexslider.woothemes.com/thum...ontrolnav.html

    That way, the functionality is already there. Just shift the thumbnails to where you want them via CSS.

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ralph.

    The problem is that I spent most of my time figuring out how to get the page where and how I needed it to be before picking a slider.

    I have my thumbnails exactly where I want them, so now I'm stuck.

    No way around starting over, huh?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by kinney0201 View Post
    No way around starting over, huh?
    This is actually quite easy to fix.
    Just add a data-slide attribute to each of the thumbnails, like so (giving the aside a class of "thumbs):

    Code:
    <aside class="thumbs">
      <p data-slide="0"><img alt="Overview" src="http://www.saintleo.edu/VirtualTour/Images/Overview-thumb.jpg">
      Overview</p>
      
      <p data-slide="1"><img alt="St. Leo Abbey" src="http://www.saintleo.edu/VirtualTour/Images/St.LeoAbbey-thumb.jpg">
      St. Leo Abbey</p>
      
      <p data-slide="2"><img alt="Athletics" src="http://www.saintleo.edu/VirtualTour/Images/Athletics-thumb.jpg">
      Athletics</p>
      
      <p data-slide="3"><img alt="Student Community Center" src="http://www.saintleo.edu/VirtualTour/Images/StudentCommunityCenter-thumb.jpg">
      Student Community Center</p>
      
      <p data-slide="4"><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>
    and

    Code:
    <aside class="thumbs">
      <p data-slide="5"><img alt="Freshman Residence Halls" src="http://www.saintleo.edu/VirtualTour/Images/FreshmanResidenceHalls-thumb.jpg">
      Freshman Residence Halls</p>
      
      <p data-slide="6"><img alt="School of Arts & Sciences" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfArts&Sciences-thumb.jpg">
      School of Arts & Sciences</p>
      
      <p data-slide="7"><img alt="Residence Apartments" src="http://www.saintleo.edu/VirtualTour/Images/ResidenceApartments-thumb.jpg">
      Residence Apartments</p>
      
      <p data-slide="8"><img alt="Student Activities Building" src="http://www.saintleo.edu/VirtualTour/Images/StudentActivitiesBuilding-thumb.jpg">
      Student Activities Building</p>
      
      <p data-slide="9"><img alt="School of Business" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfBusiness-thumb.jpg">
      School of Business</p>
    </aside>
    Then before the closing </body> tag add this:

    Code:
    <script>
      $('aside.thumbs > p').on("click", function(){
        $('.flexslider').flexslider($(this).data("slide"));
      });
    </script>
    Here's a demo of it working.

    Also, you’re using a semi-colon to separate values in your viewport meta tag. AFAIK, this is wrong! Use a comma instead.

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    Hope that helps.

  5. #5
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo,

    I don't know how to thank you.

    I've spent over a week trying to figure this out on multiple forums and with your help, it literally took me five minutes to get it working.

    You are fantastic!!! Thank you so very much!!

    Kind regards,
    JK

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    You're welcome
    Thanks for taking the time to report back and let us know it worked.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •