我正在使用 Bootstrap Image Gallery 插件以及 MixItUp 过滤。 图像库包含超过150个图像，如果单击所选过滤器的缩略图仅循环选定过滤器的图像而不是图库中的所有图像，我想要图像库。 我试图为每个过滤器创建一个div，但它不起作用。 可能每个过滤器包含在一个div和一些javascript可以工作，但我不知道如何。 在这里HTML＆amp;一个精简样本的JS和 LINK 在线查看：
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: {
}
});
});
非常感谢任何帮助，