在同一页面上同时使用同位素过滤和统一图库会发生冲突吗?

时间:2019-03-24 02:49:58

标签: jquery image jquery-plugins gallery image-gallery

我正在尝试同时在图库上同时使用Unite Image Gallery和同位素过滤。我的同位素本身可以正常工作,而Unite Image Gallery本身可以工作。当我将它们放在一起时,由于Unite Galley使用Display:无,因此无法过滤图像。这些都可以在同一个画廊中共存吗?

他们自己工作,但不一起工作。这是叉子,但我不确定我做得是否正确。 https://codepen.io/soundtec24/pen/zbedQE

````````
<section id="picture-gallery" class="container-XL pad-100-bottom" style="padding-top:128px;">

            <header class="container section-header">
          <h1>Pictures</h1>
        </header>
    <div class="container text-center pad-50-bottom">
    <i class="fas fa-hand-pointer"></i>
    <p>Click on any image below to launch a full screen slide show of the individual pictures.</p></div>

     <section id="galleryfilter"  class="section">
        <div class="row">
          <div class="col-lg-12">
            <ul id="gallery-flters">
              <li data-filter="*" class="filter-active">All</li>
              <li data-filter=".1">Scenery</li>
              <li data-filter=".2">Costumes</li>
              <li data-filter=".3">Props</li>
                <li data-filter=".4">Projections</li>
            </ul>
          </div>
        </div>

    <div id="galler" class="gallery-container" style="display:non"> 


        <a href="http://unitegallery.net" class="1 2 3 gallery-item">
        <img alt="Lemon Slice!!!!!!!!!!!!!!!!!!"
             src="img/gallery/sets/thumb/1.jpg"
             data-image="img/gallery/sets/1.jpg"
             data-description="This is a Lemon Slice"
            style="display:non">
        </a>
    </div>
    </section>
    </section>
``````````

'''''''''
Javascript

  var otherrentalsIsotope = $('.other-rentals-container').isotope({
    itemSelector: '.rental-item',
    layoutMode: 'fitRows'
  });

  $('#rental-flters li').on( 'click', function() {
    $("#rental-flters li").removeClass('filter-active');
    $(this).addClass('filter-active');

    otherrentalsIsotope.isotope({ filter: $(this).data('filter') });
  });



  var galleryfilterIsotope = $('.gallery-container').isotope({
    itemSelector: '.gallery-item',
    layoutMode: 'fitRows'
  });

  $('#gallery-flters li').on( 'click', function() {
    $("#gallery-flters li").removeClass('filter-active');
    $(this).addClass('filter-active');

    galleryfilterIsotope.isotope({ filter: $(this).data('filter') });
  });
````````

我希望能够同时使用Unite Gallery和同位素过滤器过滤图像

0 个答案:

没有答案