While with Javascript grabbing images inside a folder

Asked

Viewed 55 times

1

How to pick up images inside a javascript loop folder and insert along with the styling of Materialize Css

Note that the images inside the folder are already all sequentially numbered.

<div class="container scrollspy" id="abate">
    <h3>01 Apartamentos Cabine Elétrica</h3>

    <div class="row">
        <div class="col s12 m4">
            <img src="imagens/01 Apartamentos Cabine Elétrica/1.JPG" alt="" class="responsive-img card materialboxed">
        </div>
        <div class="col s12 m4">
            <img src="imagens/01 Apartamentos Cabine Elétrica/2.JPG" alt="" class="responsive-img card materialboxed">
        </div>

    </div>
</div>
javascript css materialize

  • You want to insert the images in the div with the same attributes via Javascript?

  • Yes, note that <div class="col S12 M4"> repeats to each line and img has class="Responsive-img card materialboxed" which must also repeat. understood ?

1 answer

1


Instead of wearing while, you could use for and insert the HTML into the div. No for below, the value 10 is the amount of images you want to insert:

document.addEventListener("DOMContentLoaded", function(){ // aguarda o DOM ser carregado
   // seleciona a div com a classe .row
   var container = document.querySelector("#abate > .row");
   var html = '';
   for(var x=1; x <= 10; x++){
      html += `<div class="col s12 m4">
      <img src="imagens/01 Apartamentos Cabine Elétrica/${ x }.JPG" alt="${ x }" class="responsive-img card materialboxed">
      </div>`;
   }
   
   container.innerHTML = html;
   
});
<div class="container scrollspy" id="abate">
    <h3>01 Apartamentos Cabine Elétrica</h3>

    <div class="row">
    </div>
</div>

Browser other questions tagged javascript css materialize

You are not signed in. Login or sign up in order to post.