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

so i have a library of different images on my site coded with isotope, the question is this how to hide images i want but be unhidden when needed, i have succeeded in "show all" list with "not(.new, .black)"code and so but before the user click on the show all there are all images showed without any filtering my code:

所以我在我的网站上有一个用同位素编码的不同图像库,问题是这是如何隐藏我想要的图像但是在需要时被取消隐藏,我已经成功地在“显示所有”列表中添加了“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>

Image link

            <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>

here my isotopes code

这里是我的同位素代码

//------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;
});

how to make some images hidden in the start page without clicking on one of the lists and those images to be viewable on the lists i want , thanks in advance

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

2 个解决方案

#1

If I understood right, you want to initially hide some images when page is loaded, and show them when start filtering or showing all by filter navigation?

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

Try to add .invis class to your element containing your image and information

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

ex.

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

#2

Have a look at Filtering (http://isotope.metafizzy.co/filtering.html). Adding a filter will only show items with the ".new" class on startup, for example.

看看Filtering(http://isotope.metafizzy.co/filtering.html)。例如,添加过滤器将仅显示启动时带有“.new”类的项目。

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

#1