Question

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

有人可以帮助我吗？

我做了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为哪个类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

如何在点击猫头鹰旋转木马中的图像后打开引导模式中的精确图像？

1 个答案: