Append images into masonry grid

admin

Administrator
Staff member
My Js is very limited, so don't shoot me for any errors below.

I'm trying to append some locally stored images into a masonry grid.

Currently when i click on the append button it's adding only the last image in my array multiple times.

What I'm trying to do is add the next 7 images with each click of the button.

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override">
Code:
$(document).ready(function() {
  var $container = $('.templates');

  $container.imagesLoaded(function() {
    $container.masonry({
      itemSelector: '.grid-item',
      gutter: 12,
      isFitWidth: true
    });
  });


// Click Function

  $('#append-button').click(function() {
    var $items = getItems();

    // hide by default
    $items.hide();

    // append to container
    $container.append($items);
    $items.imagesLoaded().progress(function(imgLoad, image) {

      // get item
      // image is imagesLoaded class, not &lt;img&gt;
      // &lt;img&gt; is image.img
      var $item = $(image.img).parents('.grid-item');

      // un-hide item
      $item.show();
      // masonry does its thing

      $container.masonry('appended', $item);
    });
  });

});

// Images Array
function getItem() {
  var $images = ['appply.jpg', 'athena.jpg', 'biz-dev-theme-responsive.jpg', 'boutique-woocommecre-theme.jpg', 'box-grid-theme-responsive.jpg', 'buro.jpg', 'circles-theme-responsive.jpg', 'deliciousmagazine.jpg', 'eshop-woocommerce-theme.jpg', 'fashion-style-wordpress-theme.jpg', 'forthecause.jpg', 'freelancer-theme-responsive.jpg', 'full-slider-theme-responsive.jpg', 'illustration-responsive-theme.jpg', 'large-grid-woocommerce-theme.jpg', 'maximize.jpg', 'olya.jpg', 'panoramic-theme-responsive.jpg', 'peddlar.jpg', 'pixelpress.jpg', 'resort.jpg', 'right-folio-theme-wordpress.jpg', 'sell-woocommerce-wordpress.jpg', 'sentient.jpg', 'shelflife.jpg', 'side-folio-theme-responsive.jpg', 'slider-scroll-wordpress.jpg', 'sliding.jpg', 'startup-responsive-theme.jpg', 'stitched.jpg', 'superstore.jpg', 'theonepager.jpg', 'upstart.jpg', 'vector-theme-responsive.jpg', 'videographer-responsive-theme.jpg', 'function.jpg', 'hub.jpg', 'memorable.jpg'];

  for (var i = 0; i &lt; $images.length; i++) {
    var item = '&lt;div class="grid-item"&gt;' + '&lt;img src="/includes/images/wordpress/gallery/' + $images[i] + '" /&gt;&lt;/div&gt;';
  }
  return item;
}

function getItems() {
  var items = '';
  for (var i = 0; i &lt; 7; i++) {
    items += getItem();
  }
  // return jQuery object
  return $(items);
}
<pre class="snippet-code-css lang-css prettyprint-override">
Code:
.templates {
  position: relative;
  margin: 0 auto;
  width: 100%;
}
.templates img {
  width: 100%;
  display: block;
  height: auto;
}
.grid-item {
  width: 20%;
  padding: 12px;
  margin-bottom: 12px;
  border: solid 1px #666;
}
#append-button {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
<pre class="snippet-code-html lang-html prettyprint-override">
Code:
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"&gt;&lt;/script&gt;
&lt;div class="templates"&gt;
  &lt;div class="grid-item"&gt;
    &lt;img src="http://lorempixel.com/output/people-q-c-319-264-9.jpg" alt=""&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;
  &lt;button id="append-button"&gt;Append new items&lt;/button&gt;
&lt;/p&gt;
</div>
</div>