0

我已经浏览了这里的其他答案以及其他一些网站，但我无法获得任何解决方案。任何帮助将不胜感激！

我正在创建一个投资组合网站。我有一个“全部显示”部分和类别。如果我用“rels”对项目进行排序，那么“显示全部”会按类别而不是全部循环。如果我不这样做，反之亦然。

html:

<div id="wrapper">

  <aside class="sidebar clearfix">

<nav class="primary clearfix">
    <ul>
        <li><a href="#" class="selected" data-filter="*">Show All</a></li>
        <li><a href="#" data-filter=".logo">Logos</a></li>
        <li><a href="#" data-filter=".print">Print</a></li>
            <li><a href="#" data-filter=".web">Web</a></li>
    </ul>
</nav> 

   </aside>

<div class="page">

    <section class="main clearfix">

        <div class="portfolio">

            <figure class="entry print"> 
            <a class="fancybox" data-fancybox-group="gallery" a href="images/northstarflyer.jpg" title="<b>Description:</b> Sell Sheet for a Print & Promotions Company<BR /><b>Programs:</b> InDesign and Photoshop">
            <img src="images/northstarflyerthumb.jpg" alt=""> </a>
    </figure>

同位素：

$(window).load(function(){

var $container = $('.portfolio');
$container.isotope({
    filter: '*',
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false,
    }
});

$('nav.primary ul a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });
  return false;
});

var $optionSets = $('nav.primary ul'),
       $optionLinks = $optionSets.find('a');

       $optionLinks.click(function(){
          var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
          return false;
      }
   var $optionSet = $this.parents('nav.primary ul');
   $optionSet.find('.selected').removeClass('selected');
   $this.addClass('selected'); 
});

});

脚本：

<script type="text/javascript">
$(document).ready(function() {

// Puts Title inside frame
$(".fancybox").fancybox({
  helpers: {
          title : {
              type : 'inside'
}
}
});

// Corrects sorting order????
$('#filters a').on("click", function(){
    var selector = $(this).attr('data-filter'); 
    $('#container').isotope({ filter: selector }, function(){
    if(selector == "*"){
    $(".fancybox").attr("data-fancybox-group", "gallery");
 }  else{ 
    $(selector).find(".fancybox").attr("data-fancybox-group", selector);
 }
 });
    return false;
 });
 });
 </script>
4

0 回答 0