BootStrap Modal and Flexslider - Thumbnail linked to specific Slide

JavaScript
22

Hi,

Sorry for the delay.
Here is your code working as desired. Have a look at what I have done and let me know if you have any questions.

DEMO

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="http://designpencil.com/" />
    <meta charset="utf-8">
    <title>Flexslider in Modal</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/full-slider.css" rel="stylesheet">
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
  </head>

  <body>
    <section id="portfolio" class="bg-light-gray">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a href="#" class="portfolio-link" data-toggle="modal" data-target="#lightbox" data-slide-to="0">
            <img src="http://placehold.it/400x200/red" class="img-responsive" alt="">
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a href="#" class="portfolio-link" data-toggle="modal" data-target="#lightbox" data-slide-to="1" >
            <img src="http://placehold.it/400x200/red" class="img-responsive" alt="" >
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a href="#" class="portfolio-link" data-toggle="modal" data-target="#lightbox" data-slide-to="2">
            <img src="http://placehold.it/400x200/777" class="img-responsive" alt="">
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a href="#" class="portfolio-link" data-toggle="modal" data-target="#lightbox" data-slide-to="3">
            <img src="http://placehold.it/400x200/999" class="img-responsive" alt="">
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a href="#" class="portfolio-link" data-toggle="modal" data-target="#lightbox" data-slide-to="4">
            <img src="http://placehold.it/400x200/blue" class="img-responsive" alt="">
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a href="#" class="portfolio-link" data-toggle="modal" data-target="#lightbox" data-slide-to="5">
            <img src="http://placehold.it/400x200/yellow" class="img-responsive" alt="">
            </a>
          </div>
        </div>
      </div>
    </section>

    <div id="lightbox" class="portfolio-modal modal fade " role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true">
      <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
              <div class="modal-body">
                <div id="slider" class="flexslider">
                  <ul class="slides">
                    <li data-slide="3">
                      <h2>Slide 1</h2>
                      <img class="img-responsive" src="http://placehold.it/900x600/red" alt="">
                    </li>
                    <li>
                      <h2>Slide 2</h2>
                      <img class="img-responsive" src="http://placehold.it/900x600/red" alt="">
                    </li>
                    <li>
                      <h2>Slide 3</h2>
                      <img class="img-responsive img-centered" src="http://placehold.it/900x600/green" alt="">
                    </li>
                    <li>
                      <h2>Slide 4</h2>
                      <img class="img-responsive img-centered" src="http://placehold.it/900x600/pink" alt="">
                    </li>
                    <li>
                      <h2>Slide 5</h2>
                      <img class="img-responsive img-centered" src="http://placehold.it/900x600/pink" alt="">
                    </li>
                    <li>
                      <h2>Slide 6</h2>
                      <img class="img-responsive img-centered" src="http://placehold.it/900x600/pink" alt="">
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
    <script type="text/javascript">
      $(".portfolio-link").on("click", function(e){
        $('#slider').flexslider({
        animation: "fade",
        directionNav: true,
        startAt: $(this).data("slide-to")
        });
      });
    </script>
  </body>
</html>
23

Friend, Its not working . The demo you have posted itself is not working .

24

It’s working for me in Chrome.
What exactly is not working?

25

I am checking it in firefox , it doesnt start from the slide I click . Like if I click slide3 - should display slide 3 isnt it ? Not working in forefox … checked thrice .

26

Also it only seems to work the FIRST time @James_Hibbard . If I open that page, click slide 6, exit, then click slide 3…it still registers as me being on slide6. I’m on Chrome.

27

Wow, it’s working for me in Firefox. That’s weird.

Correct. If you click thumbnail three, then the slider should open at slide 3

28

Ah ok. I’ll have a look at it in a bit.

29

The problem is that when the slider has been hidden (and just the thumbnails are showing), you cannot interact with it.

I did find a way round this:

$('#slider').flexslider({
  animation: "fade",
  directionNav: true
});

$(".portfolio-link").on("click", function(e){
  var index = Number($(this).data("slide-to"));

  setTimeout(function(){
    $('.flex-control-nav li:eq('+(index)+') a').trigger('click')
  }, 250);
});

DEMO

Does that work for you?

30

Yeah the demo is working … Man! Thanksssssssssss a ton. I will test on my site and update ya here .

31

whats this about?

32

:eq() reduces the set of matched elements to the one at the specified index
https://api.jquery.com/eq/

33

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.