我正在尝试将 img 模态框链接到我单击的 img，但它不起作用

Question

我设法制作了一个 bootstrap3 模态框作为缩略图的 img 滑块。 我唯一剩下的问题是，如果我点击一个img，它的滑块总是从某个地方开始......而不是我点击的img。 请帮我！！！ 这是我的代码：

<div class="container"data-toggle="modal" data-target="#myModal"> <div class="row"> <h1>Zeichnungen</h1> <div class="row"> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/1.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/2.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/3.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/4.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/5.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/6.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 7" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/7.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/8.jpg"></a></div> </div> </div> </div>

`

    <!-- Modal-->       
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="display: none;" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
            <div class="modal-body">
                <div id="modalCarousel" class="carousel">
                    <div class="carousel-inner">
                        <div class="item" title="Image 1">
                            <h3 class="modal-title">Image 1</h3>
                            <a href="#" title="Image 1"><img class="thumbnail img-responsive" src="Zeichnungen/1.jpg"></a>
                        </div>
                        <div class="item " title="Image 2">
                            <h3 class="modal-title">Image 2</h3>
                            <a href="#" title="Image 2">
                                <img class="thumbnail img-responsive" src="Zeichnungen/2.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 3"><h3 class="modal-title">Image 3</h3>
                            <a href="#" title="Image 3">
                                <img class="thumbnail img-responsive" src="Zeichnungen/3.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 4"><h3 class="modal-title">Image 4</h3>
                            <a href="#" title="Image 4">
                                <img class="thumbnail img-responsive" src="Zeichnungen/4.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 5"<h3 class="modal-title">Image 5</h3>
                            <a href="#" title="Image 5">
                                <img class="thumbnail img-responsive" src="Zeichnungen/5.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 6"<h3 class="modal-title">Image 6</h3>
                            <a href="#" title="Image 6">
                                <img class="thumbnail img-responsive" src="Zeichnungen/6.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 7"<h3 class="modal-title">Image 7</h3>
                            <a href="#" title="Image 7">
                                <img class="thumbnail img-responsive" src="Zeichnungen/7.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 8"<h3 class="modal-title">Image 8</h3>
                            <a href="#" title="Image 8">
                                <img class="thumbnail img-responsive" src="Zeichnungen/8.jpg">
                            </a>
                        </div>

                    </div>
                    <a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                    <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Modal end-->`

Answer 1

要将缩略图链接到幻灯片中的图像，您必须将这些缩略图与模态目标的数据属性和它应该引用的幻灯片链接起来。此处的文档：http://getbootstrap.com/javascript/#carousel

例子：

<div class="col-lg-3 col-sm-4 col-xs-6">
  <a title="Image 3" href="#" data-target="#myModal" data-slide-to="2">
    <img class="thumbnail img-responsive" src="Zeichnungen/3.jpg">
  </a>
</div>