Как создать динамический слайдер в модальном окне?

Question

[Ler Den]

Что я хочу сделать. На странице очень много мелких картинок. При клике на одну из них, открывается модальное окно со слайдером внутри. В слайдере представлены все картинки существующие на странице, при чем первым слайдом будет та картинка, по которой кликнули. Но я завис на очень раннем этапе. Я уверен, что-то похожее уже делали, я не смог найти. Буду благодарен, если ткнете носом.

Накидал такой пример. Если нету примера, то буду признателен за объяснение, почему console.log не выводит значение? См. коммент

<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

[devstudent]

а как насчет готовых решений, например Фансибокс

Answer 2

[edu30151]

Наверное это подойдет
dimsemenov.com/plugins/magnific-popup

смотрите Lightbox gallery

Answer 3

[Дмитрий]

Я бы попытался сделать что-то подобное:

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

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