Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

Question

Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

In my quest to create a function that populates placeholders in my HTML with images from an array, I am encountering a problem. Instead of assigning each image index to its corresponding placeholder index, the entire array of images is being placed in every single placeholder. What could be causing this issue?

Here's the JS code I'm working with:

(function pushImages() {
  //array of images, better to store in an object ?
  var images = ["07750013.jpg", "07750015.jpg", "07770021.jpg", "08210019.jpg", "08220021.jpg", "08230008.jpg", "08240009.jpg", "14990007.jpg",       "15000008.jpg", "15000009.jpg", "15010024.jpg", "15020018.jpg", "15020021.jpg", "15030012.jpg","15030025.jpg"];

  for (var i = 0; i < images.length; i++){
    //push the image to the markUp
    var newImage = images[i];
    var markUp = ("<img src='img/" + newImage + "' class='img-responsive'</img>");
    // get bootstrap place holder where to insert.after
    var placeHolder = document.getElementsByClassName("col-md-3");
      for (var h = 0; h < placeHolder.length; h++) {
        //insert the markUp into the html after the placeholder
        placeHolder[h].insertAdjacentHTML("beforeend", markUp);
      };
  };
})();

If you'd like to see the full code on Codepen, click here:

http://codepen.io/chem85/pen/grQJvP?editors=1111

I'm trying to incorporate this functionality into a larger app for a popup image gallery slider. While I could use a jQuery plugin for this purpose, I'm determined to figure it out using just JavaScript, without external plugins. Any guidance would be greatly appreciated. Thank you in advance.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

After updating my response, the parent container now displays placeholders. Although I have not made changes to the CSS, you can adjust it accordingly based on the principle demonstrated.

HTML

<div class="container-fluid" id="photos-sections">
  <div class="row container" id="photos">

  </div>
</div>

JS

(function pushImages() {
                //array of images, better to store in an object ?
  var images = ["07750013.jpg", "07750015.jpg", "07770021.jpg", "08210019.jpg", "08220021.jpg", "08230008.jpg", "08240009.jpg", "14990007.jpg", "15000008.jpg", "15000009.jpg", "15010024.jpg", "15020018.jpg", "15020021.jpg", "15030012.jpg", "15030025.jpg"];
  var placeHolder = document.getElementsByClassName("container");
  for (var i = 0; i < images.length; i++) {

    var markUp = ("<div class='col-md-3'><img src='img/" + images[i] + "' class='img-responsive'</img></div>");
    placeHolder[0].insertAdjacentHTML("beforeend", markUp);

  };
})();

If you only intend to place one image in each container, there's no need to iterate through each image. Additionally, consider generating the number of placeholders based on the total number of images available.

Answer 2

After updating my response, the parent container now displays placeholders. Although I have not made changes to the CSS, you can adjust it accordingly based on the principle demonstrated.

HTML

<div class="container-fluid" id="photos-sections">
  <div class="row container" id="photos">

  </div>
</div>

JS

(function pushImages() {
                //array of images, better to store in an object ?
  var images = ["07750013.jpg", "07750015.jpg", "07770021.jpg", "08210019.jpg", "08220021.jpg", "08230008.jpg", "08240009.jpg", "14990007.jpg", "15000008.jpg", "15000009.jpg", "15010024.jpg", "15020018.jpg", "15020021.jpg", "15030012.jpg", "15030025.jpg"];
  var placeHolder = document.getElementsByClassName("container");
  for (var i = 0; i < images.length; i++) {

    var markUp = ("<div class='col-md-3'><img src='img/" + images[i] + "' class='img-responsive'</img></div>");
    placeHolder[0].insertAdjacentHTML("beforeend", markUp);

  };
})();

If you only intend to place one image in each container, there's no need to iterate through each image. Additionally, consider generating the number of placeholders based on the total number of images available.

Answer 3

Answer №2

When it comes to your specific requirement, there is no need to iterate through the placeholders individually. Instead, you can simply locate the placeholder with the corresponding index and insert the image into it.

(function placeImages() {
    //array of images, consider storing in an object for better organization
    var images = ["07750013.jpg", "07750015.jpg", "07770021.jpg", "08210019.jpg", "08220021.jpg", "08230008.jpg", "08240009.jpg", "14990007.jpg", "15000008.jpg", "15000009.jpg", "15010024.jpg", "15020018.jpg", "15020021.jpg", "15030012.jpg", "15030025.jpg"];

    for (var i = 0; i < images.length; i++) {
          //insert the image into the markUp
          var newImage = images[i];
          var markUp = ("<img src='img/" + newImage + "' class='img-responsive'</img>");
          // find the bootstrap placeholder where the image will be inserted after
          var placeHolder = document.getElementsByClassName("col-md-3");

          placeHolder[i].insertAdjacentHTML("beforeend", markUp);

       };
})();

Answer 4

When it comes to your specific requirement, there is no need to iterate through the placeholders individually. Instead, you can simply locate the placeholder with the corresponding index and insert the image into it.

(function placeImages() {
    //array of images, consider storing in an object for better organization
    var images = ["07750013.jpg", "07750015.jpg", "07770021.jpg", "08210019.jpg", "08220021.jpg", "08230008.jpg", "08240009.jpg", "14990007.jpg", "15000008.jpg", "15000009.jpg", "15010024.jpg", "15020018.jpg", "15020021.jpg", "15030012.jpg", "15030025.jpg"];

    for (var i = 0; i < images.length; i++) {
          //insert the image into the markUp
          var newImage = images[i];
          var markUp = ("<img src='img/" + newImage + "' class='img-responsive'</img>");
          // find the bootstrap placeholder where the image will be inserted after
          var placeHolder = document.getElementsByClassName("col-md-3");

          placeHolder[i].insertAdjacentHTML("beforeend", markUp);

       };
})();

Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

Answer №1

Answer №2

Similar questions

The JSX component cannot use 'Router' as a valid element

Is there a way for me to update the button text and class to make it toggle-like

Unexpected behavior in jQuery AJAX: XML response returned as #document instead of object

Access-Control-Allow-Headers does not allow the use of X-Requested-With

Managing the triggering of the automatic transition in view models

Tips for implementing visual alterations using dynamically generated HTML scripts

Using the Ternary Operator in JavaScript to Dynamically Update HTML Elements with Angular

Eliminate HTML field based on checkbox status

Tips for utilizing JSON and ajax smoothly without encountering any errors

Is there a way to increment a counter with a click?

Creating or updating JSON files using Node.js

Ways to effectively utilize the results from php functions triggered by ajax in our document

Is it possible to refresh the JSViews data that is underneath using an onclick event?

Challenges with creating a contact form using bootstrap modal

Incorporate Jquery Append and Each functions into Class addition

Encountering excessive re-renders while using MUI and styled components

Ensure your Vue components have type-checked props at compile time when using TypeScript

Using VueJS Computed Property along with Lodash Debounce

Steps for adding a delete icon to a text input field and enabling the functionality to delete text

How to convert a querydict with multiple objects into lists