Javascript question about arrays and using image src from it anyone can help? (not random img)-CodePudding

I have created some javascript div, a, img elements. Making my website easier to read instead of spamming the same stuff over and over again.

My problem right now is -->

I need to use href and src links from my array ("src") and add them to my created imgages and links.

So far i have found only one working way to do it with Math...() but i don't want to show the images in random order i want them to be in the order that i have putted them in the array.

This is my code down below i will be happy if anyone helps me out!

I think this can be solved with forEach but i can't figure it out...

var src = ["https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80" , 
           "https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"];

(function () {

  
    function createDiv() {
      
      var boardDiv = document.createElement("div");
      var link = document.createElement("a");
      var img = document.createElement("img");
  
      boardDiv.className = "col-md-6 col-lg-4 item";
      
      
      boardDiv.appendChild(link);
      link.className = "lightbox"
      link.appendChild(img);
      link.href = src[0];
      
      img.className ="img-fluid image scale-on-hover"
      img.src = src[Math.floor(Math.random() * src.length)];
  
      return boardDiv;
    }
  
    function createAndModifyDivs() {
      var board = document.getElementById("image-builder"),
        myDivs = [],
        i = 0,
        numOfDivs = src.length;
        
      for (i; i < numOfDivs; i  = 1) {
        myDivs.push(createDiv());
        board.appendChild(myDivs[i]);
      }
    }
  
    createAndModifyDivs();
  
  }());

.gallery-block.grid-gallery{
  padding-bottom: 60px;
  padding-top: 60px;
}

.gallery-block.grid-gallery .heading{
    margin-bottom: 50px;
    text-align: center;
}

.gallery-block.grid-gallery .heading h2{
    font-weight: bold;
    font-size: 1.4rem;
    text-transform: uppercase;
}

.gallery-block.grid-gallery a:hover{
  opacity: 0.8;
}

.gallery-block.grid-gallery .item img{
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
  transition: 0.4s;
}

.gallery-block.grid-gallery .item{
  margin-bottom: 20px;
}

@media (min-width: 576px) {

  .gallery-block.grid-gallery .scale-on-hover:hover{
    transform: scale(1.05);
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15) !important;
  }
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grid Gallery</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />
</head>

<body>
    <section >
        <div >
            <div >
                <h3>Alexis</h3>
            </div>
            
            <div  id="image-builder">
            </div>

        </div>
        
    </section>

    <div id="board">
    </div>
    </div>
    <script src="app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script>
        baguetteBox.run('.grid-gallery', { animation: 'slideIn' });
    </script>
</body>

</html>

CodePudding user response：

You can change your createDiv() function to take in the img src as a parameter and then set it in your for loop. Your code could be cleaned up a bit and I can help with that if you leave a comment but for now I just wanted to answer your initial question.

var src = ["https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80" , 
           "https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"];

(function () {

    // Take the image link as a parameter called imgSrc
    function createDiv(imgSrc) {
      
      var boardDiv = document.createElement("div");
      var link = document.createElement("a");
      var img = document.createElement("img");
  
      boardDiv.className = "col-md-6 col-lg-4 item";
      
      
      boardDiv.appendChild(link);
      link.className = "lightbox"
      link.appendChild(img);
      // Assuming here you want to link to the image
      link.href = imgSrc;
      
      img.className ="img-fluid image scale-on-hover"
      // Set the img src
      img.src = imgSrc;
  
      return boardDiv;
    }
  
    function createAndModifyDivs() {
      var board = document.getElementById("image-builder"),
        myDivs = [],
        i = 0,
        numOfDivs = src.length;
        
      for (i; i < numOfDivs; i  = 1) {
        // pass in the src from the array.
        myDivs.push(createDiv(src[i]));
        board.appendChild(myDivs[i]);
      }
    }
  
    createAndModifyDivs();
  
  }());

.gallery-block.grid-gallery{
  padding-bottom: 60px;
  padding-top: 60px;
}

.gallery-block.grid-gallery .heading{
    margin-bottom: 50px;
    text-align: center;
}

.gallery-block.grid-gallery .heading h2{
    font-weight: bold;
    font-size: 1.4rem;
    text-transform: uppercase;
}

.gallery-block.grid-gallery a:hover{
  opacity: 0.8;
}

.gallery-block.grid-gallery .item img{
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
  transition: 0.4s;
}

.gallery-block.grid-gallery .item{
  margin-bottom: 20px;
}

@media (min-width: 576px) {

  .gallery-block.grid-gallery .scale-on-hover:hover{
    transform: scale(1.05);
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15) !important;
  }
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grid Gallery</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />
</head>

<body>
    <section >
        <div >
            <div >
                <h3>Alexis</h3>
            </div>
            
            <div  id="image-builder">
            </div>

        </div>
        
    </section>

    <div id="board">
    </div>
    </div>
    <script src="app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script>
        baguetteBox.run('.grid-gallery', { animation: 'slideIn' });
    </script>
</body>

</html>

CodePudding user response：

You only have to make these two changes, now you will pass the src as a parameter o createDiv() (look for the comments)

...app.js...

var src = [
  "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80",
  "https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
];

(function () {
  //ADD A PARAMETER TO THE FUNCTION HERE
  function createDiv(img_src) {
    var boardDiv = document.createElement("div");
    var link = document.createElement("a");
    var img = document.createElement("img");

    boardDiv.className = "col-md-6 col-lg-4 item";

    boardDiv.appendChild(link);
    link.className = "lightbox";
    link.appendChild(img);
    link.href = src[0];

    img.className = "img-fluid image scale-on-hover";
    img.src = img_src;

    return boardDiv;
  }

  function createAndModifyDivs() {
    var board = document.getElementById("image-builder"),
      myDivs = [],
      i = 0,
      numOfDivs = src.length;

    for (i; i < numOfDivs; i  = 1) {
      //PASS THE SRC OF THE DIRECT IMAGE AS PARAMETER HERE
      myDivs.push(createDiv(src[i]));
      board.appendChild(myDivs[i]);
    }
  }

  createAndModifyDivs();
})();