'isotope.js and jquery for a grid gallery are not sorting based on image tags

You can see my site here: http://heather-dannyelle.com/macarons.html under 'Gallery'. The images should both be snugly stacked instead of with gaps and they should sort when you click on the tabs at the top. Here's the theme page I bought it from to see the difference: https://www.midmich.edu/connections-website/pages/page-portfolio.html

Other than updating the html with my own images and pages, I have not changed the original code. I haven't changed the js script.

I installed it with the instructions found here using npm:

npm install jquery

npm install isotope-layout

Here's some of my code:

              <div class="menu mb-2">
                <div class="item active" data-filter="*">all</div>
                <div class="item" data-filter=".collection">collection</div>
                <div class="item" data-filter=".videos">videos</div>
                <div class="item" data-filter=".towers">towers &amp; cakes</div>
                <div class="item" data-filter=".seasonal">seasonal</div>
              </div>
              <div class="row no-gutters sortable-container sortable-container-gutter-fix" data-zanim-timeline="{}" data-zanim-trigger="scroll">
                <div class="col-6 col-md-3 sortable-item p-2 seasonal">
                  <div class="hoverbox rounded overflow-hidden" data-zanim-xs='{"animation":"zoom-in"}'>
                    <img class="w-100" src="assets/img/lost.macarons/select/gallery/seasonal/orange_trees2.JPG" alt="" />
                    <div class="hoverbox-content bg-dark d-flex align-items-center justify-content-center text-center">
                      <div class="px-4">
                        <h5 class="text-white">cranberry marmalade with orange french buttercream</h5>
                        <!-- <a class="btn btn-outline-light btn-xs mt-3" href="page-casestudy.html">learn more</a> -->
                      </div>
                    </div>
                  </div>
                </div>

here's the gulpfile (unchanged from download):

DEPENDENCIES: {
    jquery: {
      FROM: 'node_modules/jquery/dist/jquery.min.js',
      TO: JS,
    },

...

      FROM: 'node_modules/isotope-layout/dist/isotope.pkgd.min.js',
      TO: lib,
    },

I've checked these directory locations and they seem still correct in my file system. I followed the directions here multiple times and still nothing changes. I really can't see where the problem is.

Any help would be so appreciated! I've been trying troubleshoot this on my own for over a month and nothing doing!

node.jsnpmjquery-isotope


Solution 1:[1]

Verify that this is the correct package before you install it but based on the name and what it does I think this is the correct name for the package you want.

npm install isotope-layout

which I got from here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sam Dean

Related Questions