BootStrap Modal and Flexslider - Thumbnail linked to specific Slide

JavaScript
1

I have integrated a flexslider inside a modal of bootstrap3 , which opens up when a thumbnail is clicked . I want to link my thumbnails to open a specific slide . I am new to javascript and have tried several solutions ,Any help is much appreciated . Thanks
My markup is as follows -

<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" >
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="img/portfolio/roundicons.png" class="img-responsive" alt=""  >
                </a>

Code for Modal window with slider -

<div id="lightbox" class="modal fade " role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true">
    <!--dialog-->
    <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>
                                    <h2>Slide 1</h2>
                                    <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                                    <img class="img-responsive" src="http://placehold.it/900x600/red" alt="">

My javascript -

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

Wouldn’t it just be a matter of changing …data-slide-to=“0”?

3

I have tried putting it up in the img tag , but was no good .
I even tried the solution posted here,
Desperately need help linking thumbnails to slides (Flexslider)
it shoots up the modal but flexslider is not visible.

4

Pullos your man…there’s even a demo of it working posted. Just follow what was said and you should be fine?

5

The problem I am having is a little different than the one posted on that link , I have a flexslider inside a modal . Though I have tried the solution, its not working for me …

BTW , Thanks for your time .

6

Can you post a link to a page where we can see this not working?

7

I have it on my local server , I can share the private repo created on bitbucket , If that can help

8

Just recreate the part you are having trouble with on JSFiddle or CodePen.

9

Alright , doin so … Thanks

10

Flexslider Inside Modal

11

Ok. Well, you’ve got a bunch of errors (mostly 404s) in the console.
Could you fix them?

12

I ll try , right away …

13

I have added bootstrap js and css which where missing before .

14

Check the console - you still have an error that is preventing the JavaScript from running.

15

I have tried my best to remove those errors but they are due to jsfiddle I gues , coz I am using jquery 1.11 in my code

16

It’s being caused by the final

});

This needs to be removed.

Having done that, when I click on one of the images I get:

{“error”: “Please use POST request”}

Which would indicate that the carousel isn’t being initialised.

17

Dnt know why , May be I am not been able to create jsfiddle properly , I ll create a demo webpage for your to see

18

Here is a working modal with flexslider

Modal and Flexslider

19

@Pullo can you plz check above link and provide a way to link thumbnails to a specific slide .

21

Tried adding this code ,but still not working -

           /* when clicking a thumbnail */
          $('.row .portfolio-link').click(function(){ $('#lightbox').modal('show'); // show the modal
                           $('#slider').flexslider($(this).data("slide")); // slide carousel to selected
      
     });