0

I know how to draw the array of the 9 images in my HTML, but I don't know how to sort them by an specific attribute, I can sort them or reverse them but just directly from the input to the array. I have the 3 buttons for sorting but I'm not sure on how to do that.

Here's the code for a button that loads the images from my files:

$('#btn1').click(function(){
  //Global
   var gallery = new Array(9);
       for(var i=1;i<10;i++){ 
          gallery[i] = new Image();
          gallery[i].src = 'images/img' + i + '.png';
          }
          //setter
          $('#container1').html(gallery);
});

Here's the code of my gallery, with some attributes:

<div id="gallery">
   <img id="img_8" alt="2" name="Name_1" class="col-md-4 img img-responsive" src="images/img8.png">
   <img id="img_5" alt="4" name="Name_2" class="col-md-4 img img-responsive" src="images/img5.png">
   <img id="img_7" alt="6" name="Name_3" class="col-md-4 img img-responsive" src="images/img7.png">
   <img id="img_2" alt="8" name="Name_4" class="col-md-4 img img-responsive" src="images/img2.png">
   <img id="img_3" alt="10" name="Name_5" class="col-md-4 img img-responsive" src="images/img3.png">
   <img id="img_6" alt="12" name="Name_6" class="col-md-4 img img-responsive" src="images/img6.png">
   <img id="img_9" alt="14" name="Name_7" class="col-md-4 img img-responsive" src="images/img9.png">
   <img id="img_10" alt="16" name="Name_8" class="col-md-4 img img-responsive" src="images/img1.png">
   <img id="img_4" alt="18" name="Name_9" class="col-md-4 img img-responsive" src="images/img4.png">
</div>

I can sort the images but just directly after the function that loads the images to the gallery with:

$('#container1').html(gallery.reverse());

My question is: how can I sort the images by "id" or "name".. and also showing the by the image in the HTML?

Gustavo R.
  • 33
  • 8

0 Answers0