jquery - 单击 Owl Carousel 中的图像后，如何在 Bootstrap 模式中打开确切的图像？

Question

我在 Bootstrap 元素中使用 Owl Carousel。我希望当我单击轮播的图像时，打开的模式必须向我显示我之前单击过的确切图像(更大)，而不是轮播的第一个图像。

有人可以帮我吗？

我做了一个FIDDLE

HTML

<div class="container GListFullWidth">
    <div class="row">
        <div class="col-md-12">

        <!-- owl-carousel -->
        <div id="owl-onpage">
            <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/800/500/sports/6/" class="img-responsive" /></a></div>
            <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/600/400/sports/7/" class="img-responsive" /></a></div>
            <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/700/550/sports/8/" class="img-responsive" /></a></div>
            <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/300/600/sports/9/" class="img-responsive" /></a></div>
            <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/800/500/sports/6/" class="img-responsive" /></a></div>
            <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/600/400/sports/7/" class="img-responsive" /></a></div>
            <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/700/550/sports/8/" class="img-responsive" /></a></div>
            <div class="item"><a data-toggle="modal" data-target="#GListModalGallery"><img src="http://lorempixel.com/300/600/sports/9/" class="img-responsive" /></a></div>
        </div>
        <!-- /owl-carousel -->

        <span class="caption text-muted">A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators.</span>

        <!-- modalGallery -->
        <div class="modal" id="GListModalGallery" tabindex="-1" role="dialog" aria-labelledby="GListModalGalleryLabel" 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="owl-modal">
                            <div class="item"><img src="http://lorempixel.com/800/500/sports/6/" /></div>
                            <div class="item"><img src="http://lorempixel.com/600/400/sports/7/" /></div>
                            <div class="item"><img src="http://lorempixel.com/700/550/sports/8/" /></div>
                            <div class="item"><img src="http://lorempixel.com/300/600/sports/9/" /></div>
                            <div class="item"><img src="http://lorempixel.com/800/500/sports/6/" /></div>
                            <div class="item"><img src="http://lorempixel.com/600/400/sports/7/" /></div>
                            <div class="item"><img src="http://lorempixel.com/700/550/sports/8/" /></div>
                            <div class="item"><img src="http://lorempixel.com/300/600/sports/9/" /></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /modalGallery -->

    </div><!-- /col-md-12 -->
</div><!-- /row -->

Answer 1

您必须清理 HTML 并删除 ID 为 owl-modal 的 div 内的所有内容。然后，当用户点击类为 item 的 div 的链接时，您必须附加一个事件。

您已将文档中的所有内容准备就绪。

1. 初始化主轮播

   var owl = $("#owl-onpage");
   owl.owlCarousel({
       itemsCustom : [
           [0, 2],
           [979, 4]
       ],
       navigation : true,
       pagination: false,
       itemsScaleUp: true,
       addClassActive: true,
       navigationText: [
           "<i class='fa fa-chevron-left'></i>",
           "<i class='fa fa-chevron-right'></i>"
       ],
   });
   

2. 添加用户点击商品图片时的事件

   $('#owl-onpage .item a').on('click', function() {});
   

3. 获取用户点击的当前元素并将其插入modal-body div

   var theSrc = $(this).find('img').attr('src');
   var owlModal = $('#owl-modal');
   owlModal.empty();
   var item = $('<div>', {'class' : 'item'}).appendTo(owlModal);
   $('<img>', {'src' : theSrc}).appendTo(item);
   

4. 由于模态将学习 HTML 元素，因此您每次都必须清空它。我们还必须告诉它添加其他图像(即除用户单击的图像之外的所有图像)

   // Add others images
   $('#owl-onpage .item a').each(function (i,e) {
       var otherSrc = $(e).find('img').attr('src');
       var item = $('<div>', {'class' : 'item'}).appendTo(owlModal);
       $('<img>', {'src' : otherSrc}).appendTo(item);
   });
   

5. 在模态中调用新的轮播

   // Call the carousel after clicked on 'a'
   owlModal.owlCarousel({
       singleItem:true,
       navigation : true,
       pagination: false,
       navigationText: [
           "<i class='fa fa-chevron-left'></i>",
           "<i class='fa fa-chevron-right'></i>"
       ],
   });
   

6. 然后，允许在轮播关闭或单击关闭按钮时删除模态框。

   $('#GListModalGallery').unbind().on('hidden.bs.modal', function () {
       owlModal.data('owlCarousel').destroy();
   });
   

请注意，我添加了 unbind() 来删除附加到模态的事件。

最终JSFIDDLE