单击 owl 轮播中的图像后，如何在 bootstrap 模态中打开精确图像？

Question

我在 Bootstrap 项目中使用 Owl 轮播。我希望当我点击旋转木马的图像时，正在打开的模式必须向我显示我之前点击过的确切图像（更大），而不是旋转木马的第一个图像。

有人可以帮我吗？

我做了一个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 中的所有内容。然后，当用户点击 div 中的链接时，您必须附加一个事件，其中 class 是 item。

你把所有的东西都准备好放进文档里了。

初始化主轮播

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>"
    ],
});

当用户点击项目图片时添加一个事件

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

获取用户点击的当前项目并将其插入 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);

由于模态会学习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);
});

在模式中调用新轮播

// 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>"
    ],
});

然后，允许在轮播关闭或单击 close button 时删除模态。

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

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

决赛JSFIDDLE

单击 owl 轮播中的图像后，如何在 bootstrap 模态中打开精确图像？

How to open exact image in bootstrap modal after clicking on image in owl carousel?

css

jquery

twitter-bootstrap

owl-carousel