I'm trying to install isotope on my site

Question

I'm trying to install isotope on my site

Navigation

#1 by (0 votes)

1

I'm installing Isotope, but for some reason making it work

<div class="container-fluid ">
  <div class="row pt-5">
    <div class="col-md-8 menu-prod mx-auto" id="filter-buttons" > 
      <a href="#" data-filter="*" class="pr-3">TODOS </a>
      <a href="#" data-filter=".bilhar" class="pr-3">BILHAR </a>
      <a href="#" data-filter=".pebolim">PEBOLIM </a>
      <a href="#" data-filter=".ping-pong" class="pr-3">PING-PONG</a>
      <a href="#" data-filter=".carteado-xadrez" class="pr-3">CARTEADO & XADREZ</a>
      <a href="#" data-filter=".tamancobol" class="pr-3">TAMANCOBOL</a>
      <a href="#" data-filter=".bocha" class="pr-3">BOCHA</a>
      <a href="#" data-filter=".bocha">AERO HOCKEY</a>
    </div>

  </div>

</div>
<!-- produtos -->
<div class="container-fluid">
  <div class="row " id="filter-container">


    <figure class="bilhar col-xs-12 col-md-4 ">
      <a href=""><img src="imgs/produtos/mesa/modelomesa.jpg"></a>
    </figure>

    <figure class="pebolim col-xs-12 col-md-4 ">
      <a href=""><img src="imgs/produtos/mesa/modelomesa.jpg"></a>
    </figure>


  </div>
</div>

in the js file

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

$container.imagesLoaded( function(){
    $container.isotope({
        itemSelector : 'figure',
        filter: '*',
        resizable: false,
        animationEngine: 'jquery'
    });
});

// filter buttons

$('#filter-buttons a').click(function(){

    // select current
    var $optionSet = $(this).parents('#filter-buttons');
    $optionSet.find('.selected').removeClass('selected');
    $(this).addClass('selected');

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

As I'm working with Bootstrap, these are the files that are linked:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<!-- isotope -->
<script src="js/isotope.pkgd.min.js"></script>

html

asked by anonymous 20.09.2018 / 22:13

1 answer

Migration does not recognize the Context Menu with anchor href, does not work when it is on the same page

score 0 · Accepted Answer

You are using a function that does not exist: .imagesLoaded . You probably got this code somewhere and did not load the library or function that uses .imagesLoaded . This results in an error and the rest of the code is not executed.

You need to load another plugin imagesLoaded :

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

See:

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

$container.imagesLoaded( function(){
    $container.isotope({
        itemSelector : 'figure',
        filter: '*',
        resizable: false,
        animationEngine: 'jquery'
    });
});

// filter buttons

$('#filter-buttons a').click(function(){

    // select current
    var $optionSet = $(this).parents('#filter-buttons');
    $optionSet.find('.selected').removeClass('selected');
    $(this).addClass('selected');

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script><scriptsrc="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

<div class="container-fluid ">
  <div class="row pt-5">
    <div class="col-md-8 menu-prod mx-auto" id="filter-buttons" > 
      <a href="#" data-filter="*" class="pr-3">TODOS </a>
      <a href="#" data-filter=".bilhar" class="pr-3">BILHAR </a>
      <a href="#" data-filter=".pebolim">PEBOLIM </a>
      <a href="#" data-filter=".ping-pong" class="pr-3">PING-PONG</a>
      <a href="#" data-filter=".carteado-xadrez" class="pr-3">CARTEADO & XADREZ</a>
      <a href="#" data-filter=".tamancobol" class="pr-3">TAMANCOBOL</a>
      <a href="#" data-filter=".bocha" class="pr-3">BOCHA</a>
      <a href="#" data-filter=".bocha">AERO HOCKEY</a>
    </div>

  </div>

</div>
<!-- produtos -->
<div class="container-fluid">
  <div class="row " id="filter-container">


    <figure class="bilhar col-xs-12 col-md-4 ">
      <a href=""><img src="https://lh3.googleusercontent.com/MlMdaB4-Kp0ZEHW2zjpiazAQCv2eCOb8SBivva8QJfoW1teFePHVdppLBeIffNDGy8L-=w100"></a></figure><figureclass="pebolim col-xs-12 col-md-4 ">
      <a href=""><img src="https://carlinbilhares.com.br/wp-content/uploads/2017/12/PEBOLIM-DE-MADEIRA-1-100x100.jpg"></a>
    </figure>


  </div>
</div>