javascript - Adding a masonry layout to shopify portfolio page

I've been putting together a portfolio page on a shopify theme I have been developing and I wanted to style the page to have a masonry style grid layout. So far the ways I've been working at it was to use a snippet that holds the jquery portion of code and calling that snippet from my page.portfolio.liquid page. But for some reason I don't see any of the effects of the jQuery and I'm not sure why (i am also new to jQuery)

The liquid code is below:

<div id="container" >
{% unless settings.portfolio_collection == blank or collections[settings.portfolio_collection].empty? %}
{% assign collection = collections[settings.portfolio_collection] %}

<ul class="grid clearfix">
  {% for product in collection.products %}
    <li class="masonryImage three-per-row centered">
      <img style="border:1px solid white;" src="{{ product | img_url: 'grande' }}"/>
    </li>
  {% endfor %}
  {% include 'portfolio-layout.js' %}
</ul>
{%endunless%}
</div>
Copy code

and the snippet code is (based on some other posts i saw on stack overflow):

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>

<script type="text/javascript" charset="utf-8">
if (typeof jQuery === 'undefined') {
    document.write({{ "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js" | script_tag | json }});
    document.write({{ "https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js" | script_tag | json }});
    document.write('<script type="text/javascript">jQuery.noConflict();<\/script>');
}
</script>

<script>
  $(function(){
    var $container = $('#container');  
    $container.imagesLoaded( function(){
      $container.masonry({
      itemSelector : '.masonryImage'
    });
  }); 
});
Copy code

Does anyone know what I am doing wrong, or can anyone point me in the right direction? Thanks in advance!

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.