我将Bootstrap Image Gallery插件与MixItUp过滤一起使用。图像库包含 150 多个图像，如果单击所选过滤器的缩略图以仅循环浏览该所选过滤器的图像而不是画廊中的所有图像，我想要。我试图为每个过滤器创建一个 div，但它不起作用。可能每个包含在 div 中的过滤器和一些 javascript 都可以工作，但我不知道如何。这里是一个精简示例的 HTML 和 JS 以及在线查看它的链接：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Gallery Sample</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- Gallery Section -->
<section id="gallery" class="bg-light-gray">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Gallery</h2>
<h3 class="section-subheading text-muted"></h3>
</div>
</div>
<div class="controls">
<ul class="portfolio-filter">
<li class="btn btn-primary active margin-5 filter" data-filter="all">All</li>
<li class="btn btn-primary margin-5 filter" data-filter=".nangphaya">Nang Phaya</li>
<li class="btn btn-primary margin-5 filter" data-filter=".phrarod">Phra Rod</li>
</ul>
</div>
<div class="container-fluid galleries">
<!-- Gallery Nang Phaya -->
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya001.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya001.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya002.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya002.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya003.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya003.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya004.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya004.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya005.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya005.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya006.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya006.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya007.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya007.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya008.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya008.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya009.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya009.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya010.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya010.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya011.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya011.jpg" alt=""></a> </div>
<div class="mix nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya012.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya012.jpg" alt=""></a> </div>
<!-- Gallery Phra Rod -->
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod001.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod001.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod002.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod002.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod003.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod003.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod004.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod004.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod005.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod005.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod006.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod006.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod007.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod007.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod008.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod008.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod009.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod009.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod010.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod010.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod011.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod011.jpg" alt=""></a> </div>
<div class="mix phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod012.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod012.jpg" alt=""></a> </div>
</div>
</div>
<div id="blueimp-gallery" class="blueimp-gallery" data-use-bootstrap-modal="false">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a>
<ol class="indicator">
</ol>
<!-- The modal dialog, which will be used to wrap the lightbox content -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev"> <i class="glyphicon glyphicon-chevron-left"></i> Previous </button>
<button type="button" class="btn btn-primary next"> Next <i class="glyphicon glyphicon-chevron-right"></i> </button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
<!-- Gallery JavaScript -->
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>
<script src="js/bootstrap-image-gallery.min.js"></script>
<!-- Scrollbar JavaScript -->
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/nicescroll.js"></script>
</body>
</html>
JS
// MixItUp
$(function(){
$('.galleries').mixItUp({
load: {
}
});
});
任何帮助将不胜感激，