Search code examples
javascriptarraysimagehrefsrc

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

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 class="gallery-block grid-gallery">
        <div class="container">
            <div class="heading">
                <h3>Alexis</h3>
            </div>
            
            <div class="row" 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>

Solution

  • 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/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&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"
      img.className ="img-fluid image scale-on-hover"
      link.appendChild(img);
      // Assuming here you want to link to the image
      link.href = imgSrc;
      // Set the img src
      img.src = imgSrc;
      return boardDiv;
    }
  
    function createAndModifyDivs(elmId) {
      const board = document.getElementById(elmId);
      for (const imgSrc of src) {
        board.appendChild(createDiv(imgSrc));
      }
    }

    const galleries = ['image-builder', 'image-builder-2'];
    for(const gallery of galleries) {
        createAndModifyDivs(gallery);
        baguetteBox.run(`#${gallery}`);
    }

  
  }());
    .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 class="gallery-block grid-gallery">
        <div class="container">
            <div class="heading">
                <h3>Alexis</h3>
            </div>
            
            <div class="gallery" id="image-builder">
            </div>

        </div>
        
    </section>
    
    <section class="gallery-block grid-gallery">
        <div class="container">
            <div class="heading">
                <h3>Other</h3>
            </div>
            
            <div class="gallery" id="image-builder-2">
            </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>
    </script>
</body>

</html>