0
Я создаю отфильтрованную галерею, используя базовую структуру портфеля Bootstrap. Портфель фильтрует все, но он не изменяет элементы div для отображения inline, он просто удаляет элементы, которые не имеют одного и того же ретранслятора данных, вместо удаления и последующей перестановки, так что между элементами нет пустых пространств.Отфильтрованная галерея для портфолио, предназначенная для отображения встроенного?
Вот мой код:
$(function(){
var selectedClass = "";
$(".filter").click(function(){
selectedClass = $(this).attr("data-rel");
$(".work").fadeTo(100, 0.1);
$(".portfolio-item").not("."+selectedClass).fadeOut().removeClass('scale');
setTimeout(function(){
$("."+selectedClass).fadeIn().addClass('scale').sort();
$(".work").fadeTo(300, 1);
}, 300);
});
});
Я пытался добавить функцию .sort, но ничего не изменилось, поэтому я предполагаю, что он у меня в неправильном месте или там требуется больше кода?
HTML
<section class="no-padding" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Portfolio</h2>
<h3 class="section-subheading text-muted">A showcase of my work.</h3>
<div class="tabs">
<button class="btn filter" id="filt" href="" data-rel="all">ALL</button>
<button class="btn filter" id="filt" data-rel="web">Web Design</button>
<button class="btn filter" id="filt" data-rel="graphics">Graphic Design</button>
<button class="btn filter" id="filt" data-rel="branding">Branding</button>
<button class="btn filter" id="filt" data-rel="photography">Photography</button>
<button class="btn filter" id="filt" data-rel="motion">Motion Graphics</button>
</div>
<br>
</div>
<div class="work">
<div class="row">
<div class="col-md-4 portfolio-item web scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item graphics scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item branding scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="img/portfolio/fullsize/1.jpg">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item photography scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item graphics scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item web scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div> <!--WORK-->
<!-- /.row -->
<hr>
</div>
</div>
</section>
Вы также можете опубликовать свой HTML-код, чтобы можно было поиграть с ним. –
См. Мой edit^ – rubyred2