How to create dynamic slider in modal window?

Question

JavaScript

What do I want to do. There are a lot of small pictures on the page. When you click on one of them, a modal window opens with a slider inside. The slider contains all the pictures that exist on the page, and the first slide will be the picture that was clicked on. But I got stuck at a very early stage. I'm sure something similar has already been done, I couldn't find it. I would be grateful if you poke your nose.

I posted such an example. If there is no example, then I would appreciate an explanation why console.log does not output a value? See comment

<div class="row" id="thumnail">
  <div class="col-md-2 gallery">
    <a href="#" data-toggle="modal" data-target="#myModal" class="modalTarget"><img class="attachment-thumbnail img-responsive" alt="Primex 0074" src="http://jsconf.com/images/jsconf_eu.png"></a>
  </div>
  <div class="col-md-2 gallery">
    <a href="#" data-toggle="modal" data-target="#myModal" class="modalTarget"><img class="attachment-thumbnail img-responsive" alt="Primex 0075" src="http://alexdev.ru/wp-content/uploads/2015/06/JS-logo.png"></a>
  </div>
  <div class="col-md-2 gallery">
    <a href="#" data-toggle="modal" data-target="#myModal" class="modalTarget"> <img class="attachment-thumbnail img-responsive" alt="Primex 0076" src="http://sub1.kevinchisholm.com/blog/images/require-js-logo.jpg"></a>
  </div>
</div>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body text-center">
        <div id="carousel-generic" class="carousel slide" data-ride="carousel">
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
          </div>
          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

JS

$('.modalTarget').click(function() {
          $imgList = $("#thumnail .attachment-thumbnail");
          $parent = $("#carousel-generic .carousel-inner");
          $item = "<div class='item'><img src='' alt=''></div>";
          $length = $imgList.length;
          $active = $(this).find("img").attr('src');
          for ($i = 0; $i < $length; $i++) {
            $parent.append($item);
            console.log($imgList[$i].attr('src')); //Почему не работает?
            console.log($active); 
          }
        });

https://jsfiddle.net/mnu2zL3k/

Answer 1

what about ready-made solutions, such as Funsibox

Answer 2

I would try to do something like this:

var imgs = [img1, img2, img3];
$('a').click(function() {
  // найти урл нажатой картинки
  // найти его в массиве (indexOf)
 // удалить из массива и вставить в начало
});

// перебрать все элементы массива и вставить их в слайдер в модальном окне