I’m trying to install the Isotope on my website

Asked

Viewed 71 times

1

I’m installing the Isotope, but for some reason make 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 am 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

  • "but for some reason make it work" that phrase didn’t make sense

  • I wrote wrong sorry, for some reason I can’t make the Isotope work

  • It manages to elaborate a [mcve]?

  • Apparently the problem seems to be in $container.imagesLoaded, where are you calling the js of this plugin imagesLoaded?

  • Thank you Leandrade was really the problem

1 answer

0


You’re using a function that doesn’t exist: .imagesLoaded. You probably took this code somewhere and didn’t load the library or function that uses the .imagesLoaded. This results in 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>

Behold:

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>
<script src="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>

    <figure class="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>

  • Thank you so much I really took the code of an old project of mine, as it was a long time ago not working in the area, I did not remember how I had done and I was not able to run Isotope even taking the site of the developer. Thank you all

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.