无法获取同位素在网站上工作

Question

我尝试让我的网站上运行同位素jquery。 我尝试了几件事，但没有。

也许有人可以看到问题。 也许一些Javascript问题？

site

$(document).ready(function(){ 

    var $container = $('#items-container'); 

    $container.isotope({ 
     // options... 
     resizable: false, // disable normal resizing 
     layoutMode : 'fitRows', 
     itemSelector : '.item', 
     animationEngine : 'best-available', 

     // set columnWidth to a percentage of container width 
     masonry: { columnWidth: $container.width()/3 } 
    }); 

    $(window).smartresize(function(){ 
     $container.isotope({ 
     // update columnWidth to a percentage of container width 
     masonry: { columnWidth: $container.width()/3 } 
     }); 
    }); 
    $container.imagesLoaded(function(){ 

      $container.isotope({ 
     // options... 
      }); 
    }); 

    $('#filteritem a').click(function(){ 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ filter: selector }); 
     return false; 
    }); 
}); 

过滤器看起来像这样：

<!-- Start items Filter --><div><ul><li><a href="#filter" class="orangebutton smallrectange current" title="" data-filter="*">wis</a></li><li><a href="#filter" class="orangebutton smallrectange" title="" data-filter=".lift">Airconditioning</a></li><li><a href="#filter" class="orangebutton smallrectange" title="" data-filter=".roltrap">Beveiliging</a></li><li><a href="#filter" class="orangebutton smallrectange" title="" data-filter=".lift">Brandbeveiliging</a></li><li><a href="#filter" class="orangebutton smallrectange" title="" data-filter=".lift">Gebouw automatisering</a></li><li><a href="#filter" class="orangebutton smallrectange" title="" data-filter=".lift">Koelsystemen</a></li><li><a href="#filter" class="orangebutton smallrectange" title="" data-filter=".roltrap">Lift</a></li><li><a href="#filter" class="orangebutton smallrectange" title="" data-filter=".roltrap">Roltrap</a></li><li><a href="#filter" class="orangebutton smallrectange" title="" data-filter=".roltrap">Ventilatie</a></li><li><a href="#filter" class="orangebutton smallrectange" title="" data-filter=".roltrap">Verwarming</a></li></ul></div></div></div></div></div></div><div id="items-container" class="row isotope"><div class="moduletablefilter"><div class="customfilter" ><div class="item roltrap isotope-item"><div class="col-md-4 col-sm-6"><div class="logo-item"><div class="logo-image effect"><a href="/subdirectory/page-logo-item.html"><img src="/subdirectory/images/logo/logo.jpg" alt="logo" /></a></div><div class="logo-info"><ul><li class="logo-project-name">bla bla <br /><br /><br /></li><li class="desc">bla bla</li></ul></div></div></div></div></div></div><div class="moduletablefilter"><div class="customfilter" ><div class="item lift isotope-item"><div class="col-md-4 col-sm-6"><div class="logo-item"><div class="logo-image effect"><a href="/subdirectory/page-logo-item.html"><img src="/subdirectory/images/logo/logo.jpg" alt="logo" /></a></div><div class="logo-info"><ul><li class="logo-project-name">bla bla <br /><br /><br /></li><li class="desc">bla bla</li></ul></div></div></div></div></div></div><div class="moduletablefilter"><div class="customfilter" ><div class="item lift isotope-item"><div class="col-md-4 col-sm-6"><div class="logo-item"><div class="logo-image effect"><a href="/subdirectory/page-logo-item.html"><img src="/subdirectory/images/logo/logo.jpg" alt="logo" /></a></div><div class="logo-info"><ul><li class="logo-project-name">bla bla <br /><br /><br /></li><li class="desc">bla bla</li></ul></div></div></div></div></div> 

Answer 1

默认情况下是，Joomla进口的jQuery在noConflict模式，因此而不是使用：

$(document).ready(function(){ 

使用：

jQuery(document).ready(function($){ 

查看您的浏览器控制台报告的错误，因为这可能会泄露大量信息。