画像の配列をループし、htmlのbootstrapsプレースホルダにコンテンツをプッシュアップします。markUp

Question

画像の配列の各インデックスをHTMLのプレースホルダにプッシュする関数を作成しようとしています。したがって、画像配列の最初のインデックスをプレースホルダ配列の最初のインデックスに配置し、2番目のインデックスを2番目のインデックスに配置するなどします。

コードが実行される瞬間、画像配列全体がすべてのプレースホルダに入りますが、何が欠けていますか？

これは、ここで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"]; 
 

 
    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); 
 
     }; 
 
    }; 
 
})();

ではCodepenからの完全なコードです：

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

私はの一部としてこれを建てしようとしていますポップアップ画像ギャラリーのスライダーのための大きなアプリ。私はJqueryプラグインを使用して行うことができますが、私はそれを外部プラグインの助けを借りずに、そしてJSだけでそれを行う方法を学ぼうとしています。

ご協力いただければ幸いです。前もって感謝します。

Answer 1

私は答えを変更しました。これにより、親コンテナにプレースホルダが設定されます。私はCSSを変更していないので、それを適合させるべきですが、あなたはそれを行う方法の原則を見ることができます。

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); 

    }; 
})(); 

あなただけの各容器に1を入れたい場合は、それぞれの画像をループする必要はありません。また、イメージの数からプレースホルダの数を生成する必要があります。あなたの要件については

Answer 2

、あなたは自分の質問があまり明確ではないが同じインデックスのプレースホルダーを見つけ、その中

(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"); 

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

     }; 
})();