我在 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">×</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 -->
最佳答案
您必须清理 HTML 并删除 ID 为 owl-modal 的 div 内的所有内容。然后,当用户点击类为 item
的 div 的链接时,您必须附加一个事件。
您已将文档中的所有内容准备就绪。
初始化主轮播
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
divvar 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>" ], });
然后,允许在轮播关闭或单击
关闭按钮
时删除模态框。$('#GListModalGallery').unbind().on('hidden.bs.modal', function () { owlModal.data('owlCarousel').destroy(); });
请注意,我添加了 unbind()
来删除附加到模态的事件。
最终JSFIDDLE
关于jquery - 单击 Owl Carousel 中的图像后,如何在 Bootstrap 模式中打开确切的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32400064/