I'm in the process of integrating the .js plugin, Isotope, into my Wordpress installation. It should be positioned at the bottom of this page:
To achieve this, I am referring to an example on codepen: https://codepen.io/desandro/pen/mEinp
The script is enqueued from a CDN using the following code:
wp_enqueue_script( 'isotope', 'https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js');
If necessary, I can provide the entire enqueue file?
Below is the template HTML that I am working with (I have temporarily placed the initialization script at the end but plan to move it to its own .js file):
<h1>Isotope - masonry layout mode</h1>
<div class="grid">
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<script type="text/javascript">
// external js: isotope.pkgd.js
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100
}
});
</script>
And here's the CSS code snippet:
* { box-sizing: border-box; }
/* ---- grid ---- */
.grid {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 100px;
height: 100px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }
The CSS and HTML sections appear to be correctly implemented. However, I am uncertain if the script is being enqueued properly or if the initialization .js is accurate since it seems functional but not arranging as expected when compared to the codepen example.