javascript - 在 Bootstrap 中以模态加载轮播中的特定幻灯片

Question

我在 Bootstrap 3 页面上有一个缩略图列表。单击它们时，我想打开一个模式，其中包含每个缩略图的附加信息轮播。

我希望当我点击缩略图时，模式打开时轮播中的特定幻灯片打开。

我正在尝试以下操作，但是模式的“data-toggle”和轮播的“data-slide-to”属性都使用“data-target”来设置目标，但在这种情况下目标是两个不同的 ID (分别为“#myModal”和“#gallery”)。我不能在同一个 HTML 标签上有两个“数据目标”。有没有办法轻松解决这个问题？抱歉，我不是开发者。

这是缩略图列表:

<div class="container">
  <div class="row">
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal" data-slide-to="0"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item2" data-toggle="modal" data-target="#myModal" data-slide-to="1"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item3" data-toggle="modal" data-target="#myModal" data-slide-to="2"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item4" data-toggle="modal" data-target="#myModal" data-slide-to="3"></div>
   </div>
</div>

这是模态代码:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></div>
            <div class="modal-body">

                <div id="gallery" class="carousel slide" data-interval="false">
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="http://placehold.it/600x400&text=item1" alt="item1">
                            <div class="carousel-caption">
                                <h4>heading 1</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/600x400&text=item2" alt="item2">
                            <div class="carousel-caption">
                                <h4>heading 2</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/600x400&text=item3" alt="item3">
                            <div class="carousel-caption">
                                <h4>heading 3</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/600x400&text=item4" alt="item4">
                            <div class="carousel-caption">
                                <h4>heading 4</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#gallery" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                    <a class="right carousel-control" href="#gallery" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>

            </div>
        </div>
    </div>
</div>

Answer 1

您可以像这样将图像包裹在以轮播为目标的 anchor 中:

<a href="#gallery" data-slide-to="0">
  <img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal">
</a>

演示:http://jsfiddle.net/NJWqw/