Multiple bricklayers on one page

[Ernedar]

I just tried your work. It works like magic, but only for one gallery on a page. I tried to use more generated galleries, where in every gallery i use bricklayer class. But it takes only first appearance and not the others. Can I ask you for help. Javascript amateur here, sorry.

Do not really know if this is an issue of it or not.

[f]

Can you please send us the code fragment you create multiple bricklayers?

You have to apply new Bricklayer(container) to every container. Otherwise it won't work.

[Ernedar]

<div>
  <div id="gallery">
    <div class="bricklayer">
      <dl class="gallery-item">
        <dt>
          <a href="#">
            <img src="#">
          </a>              
        </dt>
      </dl>
      <dl class="gallery-item">
        <dt>
          <a href="#">
            <img src="#">
          </a>              
        </dt>
      </dl>
    </div>
  </div>
</div>
<div>
  <div id="gallery">
    <div class="bricklayer">
      <dl class="gallery-item">
        <dt>
          <a href="#">
            <img src="#">
          </a>              
        </dt>
      </dl>
      <dl class="gallery-item">
        <dt>
          <a href="#">
            <img src="#">
          </a>              
        </dt>
      </dl>
    </div>
  </div>
</div>
<script>
  var bricklayer = new Bricklayer(document.querySelector('.bricklayer'));     
</script>

I am using it for WP generated Galleries and i need more than one on page. For the first one, it works correctly, second one not working.

[f]

It must be like that if you want to bricklayer all the .bricklayer classes dynamically:

Array.prototype.slice.call(null, document.querySelectorAll('.bricklayer')).forEach(function (container) {
  var bricklayer = new Bricklayer(container);
});

or, if you want to use one by one:

var firstBricklayer = new Bricklayer(document.querySelector('.bricklayer.first'));
var secondBricklayer = new Bricklayer(document.querySelector('.bricklayer.second'));

[Ernedar]

Hm. The first thing you wrote with Array seems not working:

Uncaught TypeError: Array.prototype.slice called on null or undefined

EDIT: I deleted null, in call function and the first gallery works, but not more.

[f]

Which browser do you work in?

[Ernedar]

Tested on Chrome 49 + 50, IE Edge 25.10586.0.0, IE 11.212.10586.0, Firefox 45.0.2.

[f]

Any update on this? Still active?

[shohagbhuiyan]

I am having the same problem.

Uncaught TypeError: Array.prototype.slice called on null or undefined

I deleted null in call function and only the first gallery works.

Any solution?

[ahmeddabak]

i know this is an old question, but since it is not answered i wanted to help. please try this:

document.querySelectorAll('.bricklayer').forEach(function (section) { var bricklayer = new Bricklayer(section); });