如何隐藏我想要的图像,但在同位素需要时不被隐藏

时间:2014-08-13 20:11:52

标签: jquery html css

所以我在我的网站上有一个用同位素编码的不同图像库,问题是如何隐藏我想要的图像但是在需要时不被隐藏,我已经成功地在“显示所有”列表中添加了“not(.new, .black)“代码等等但是在用户点击显示之前所有图片都显示没有任何过滤我的代码:

   <div class="container">
           <section>
               <ul class="portfolio_filters"></a>
                     <li><a href="#" data-filter=":not(.new,.black,industrial,.mix).all">Show all</a></li>
                     <li><a href="#" data-filter=".new">New Logos</a></li>                                  <!--lightbox2-->
                     <li><a href="#" data-filter=".black ">Black & White</a></li>                            <!--lightbox3-->
                     <li><a href="#" data-filter=".industrial">Industrial</a></li>                            <!--lightbox3-->
                     <li><a href="#" data-filter=".mix">Mix</a></li>                                           <!--lightbox4-->
                </ul>
           </section>

图片链接

            <section class="portfolio_masonry"  >

                <div class="row isotope_portfolio_container">

                   <div class="new col-sm-4 col-md-4">
                          <div class="portfolio_item"> <a href="images/portfolio/lenses.jpg" class="lightbox"  >  <img src="images/portfolio/lenses.jpg"  alt="Community & Non-Profit" >
                               <div class="overlay">
                                    <div class="desc">
                                         <h4>Lenses to Their World</h4>
                                         <span class="cross"></span> </div></a>
                               </div>
                               </a> </div>
                     </div>

这里是我的同位素代码

//------ISOTOPE-------------------------------------    

// cache container
var container = jQuery('.isotope_portfolio_container');
// initialize isotope
 container.isotope({
});
jQuery('.portfolio_filters a[data-filter="*"]').addClass('active');
// filter items when filter link is clicked
jQuery('.portfolio_filters a').click(function(){
  jQuery('.portfolio_filters a').removeClass('active');
  jQuery(this).addClass('active');
  var selector = jQuery(this).attr('data-filter');
  container.isotope({ filter: selector });
  return false;
});

如何在开始页面中隐藏一些图像而不点击其中一个列表,并且可以在我想要的列表上查看这些图像,提前感谢

2 个答案:

答案 0 :(得分:0)

如果我理解正确,你想在加载页面时最初隐藏一些图像,并在开始过滤或通过过滤器导航显示所有图像时显示它们吗?

尝试将.invis类添加到包含图像和信息的元素

离。

<div class="new col-sm-4 col-md-4 invis">

答案 1 :(得分:0)

看看过滤(http://isotope.metafizzy.co/filtering.html)。添加过滤器只会显示带有&#34; .new&#34;的项目。例如,在启动时上课。

$container.isotope({ filter: '.new' });