[英]Quicksand.js interfering with Bootstrap Modals
我一直在尝试使用Bootstrap Modal功能和流沙排序插件来制作灯箱产品。 我最初遵循了本教程 ,为了在Bootstrap 3.0.0(我正在使用的版本)中工作,我需要进行一些工作,但是它可以正常工作。 我决定需要对模式框进行更多控制,因此我拿出了bootbox插件,只使用了引导程序中包含的模式js。 现在,当我按缩略图时,模态框会很好地弹出,但是如果我按排序导航按钮之一,则该框会弹出,其中包含模态中的最后一张图像(不是正确的图像),或者第一件事您要做的是排序然后单击,弹出的模态框为空。 本教程提到了该问题和解决方法:
“从本质上讲,与任何类别进行交互时,流沙都会使Bootstrap的模式功能失效。也就是说,该模式在触发流沙之前有效,但在之后不起作用。但是,通过更早地定义Bootbox函数,我们很容易避免了这个问题。如上所示,然后我们将“ gallery”用作quicksand()函数中的属性,并设置$(document).ready(gallery);。现在,模式将在选择过滤器/类别之前和之后均按预期工作。
但它似乎不适用于普通的引导程序模式。 唯一的类似的问题,我能找到的就是这一个 ,答案是增加一个回调,因为由流沙排序的对象是没有影响的模式脚本实际上新的对象,但是当我加入回调它没”工作。
这是我的代码(我忽略了所有其他缩略图)
<div class="container well well-lg">
<ul class="filter nav nav-pills">
<li data-value="all"><a href="#"><h6>All</h6></a></li>
<li data-value="Historical"><a href="#"><h6>Historical</h6></a></li>
...
</ul>
<hr>
<ul class="thumbnails">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" data-id="id-1" data-type="Historical">
<a class="thumbnail" data-toggle="modal" data-target="#myModal" id="joan1" href="#" data-image-id="" data-title="Joan of Arc" data-caption="Digital, Junior Thesis subject Crime and Punishment, 2015" data-image="/images/joan1.png">
<img alt="" src="/images/thumb_joan1.png"></a>
</li>
...
</ul>
</div>
<!-- Modal -->
<div class="modal modal-wide fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" id="myModal-title"></h3>
</div>
<div class="modal-body">
<img id="myModal-image" class="img-responsive" src="">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-8 text-justify" id="myModal-caption">
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
这是我的javascript
<script src="/Scripts/jquery.quicksand.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
loadGallery(true, 'a.thumbnail');
$(".modal-wide").on("show.bs.modal", function () {
var height = $(window).height() - 200;
$(this).find(".modal-body").css("max-height", height);
});
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image').show();
if (counter_max == counter_current) {
$('#show-next-image').hide();
} else if (counter_current == 1) {
$('#show-previous-image').hide();
}
}
function loadGallery(setIDs, setClickAttr) {
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function () {
if ($(this).attr('id') == 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#myModal-caption').text($sel.data('caption'));
$('#myModal-title').text($sel.data('title'));
$('#myModal-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]').each(function () {
counter++;
$(this).attr('data-image-id', counter);
});
}
$(setClickAttr).on('click', function () {
updateGallery($(this));
});
};
function gallery() {
}
var $itemsHolder = $('ul.thumbnails');
var $itemsClone = $itemsHolder.clone();
var $filterClass = "";
$('ul.filter li').click(function (e) {
e.preventDefault();
$filterClass = $(this).attr('data-value');
if ($filterClass == 'all') { var $filters = $itemsClone.find('li'); }
else { var $filters = $itemsClone.find('li[data-type=' + $filterClass + ']'); }
$itemsHolder.quicksand(
$filters,
{ duration: 1000 },
loadGallery
);
});
});
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
}, gallery);
$(document).ready(gallery);
</script>
这是您可以看到问题的实时页面 。 我对此很陌生,所以希望我能弄乱一些基本且可修复的东西。 在此先感谢您的帮助!
嗨,您的缩略图点击事件在过滤后不会触发,过滤时您正在创建元素的克隆并将其添加回DOM,因此,您尝试将click事件绑定到页面上尚未存在的元素以进行修复绑定到始终在页面上的元素,然后将变量“ setClickAttr”用于选择器过滤器
即改变
$(setClickAttr).on('click', function () {
....
});
至
$(document).on('click', setClickAttr, function() {
....
});
jQuery中的将live()转换为on()讨论了更多有关绑定到必须首先存在的元素的信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.