Javascript图像到div

Question

所以我可以从 Instagram 检索图像，但我希望将各个图像放入我遇到问题的图库容器 div 中。我已将图像定向到“html5gallery”类，但图像不像其他图像网址那样进入:

<!-- Reference to html5gallery.js -->
<script type="text/javascript" src="../html5gallery/html5gallery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-instagram/0.2.2/jquery.instagram.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-instagram/0.2.2/jquery.instagram.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<script>
    (function ($) {
        var userId = "19410587";
        var accessToken = "574298972.d868eb6.bab9c8fe820c4d4c80724edfb86236bd";
        var numDisplay = "4";
        $.ajax({
            type: "GET",
            dataType: "jsonp",
            cache: false,
            url: "https://api.instagram.com/v1/users/"+userId+"/media/recent/?access_token="+accessToken,

          success: function(data) {
                var imgURL = '';
                for (var i = 0; i < numDisplay; i++) {
                    var gallery = document.getElementById("html5gallery");
                    var img = new Image();

                    img.onload = function() {
                        document.getElementById('gallery').appendChild(img);

                    };
                    img.src = data.data[i].images.low_resolution.url;
                    imgURL += img.src + ' ';

            $(".insta").append("<div class='instaBox'><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' width='98' /></a></div>");   
                }
                alert(imgURL);
            }
        });
    })(jQuery);
    </script>

<div style="display:none;margin:0 auto; " class="html5gallery" data-skin="horizontal" data-width="1200" data-height="680" >

     <!-- Add images to Gallery -->
    <a href="#" onload="javascript:document.img.src='data.data[i].images.low_resolution.url'">
    <a href="images/Tulip_large.jpg"><img src="images/Tulip_small.jpg" alt="Tulips"></a>
    <a href="images/Colourful_Tulip_large.jpg"><img src="images/Colourful_Tulip_small.jpg" alt="Colourful Tulips"></a>
    <a href="images/Swan_large.jpg"><img src="images/Swan_small.jpg" alt="Swan on Lake"></a>
    <a href="images/Red_Tulip_large.jpg"><img src="images/Red_Tulip_small.jpg" alt="Red Tulips"></a>
    <a href="images/Sakura_Tree_large.jpg"><img src="images/Sakura_Tree_small.jpg" alt="Sakura Trees"></a>

    <a href="http://www.youtube.com/embed/1oHWvFrpocY?autoplay=1"><img src="http://img.youtube.com/vi/1oHWvFrpocY/2.jpg" alt="Youtube Video"> </a>
    <!-- Add Youtube video to Gallery -->
    <a href="http://www.youtube.com/embed/ofr5EE9GsUs?autoplay=1"><img src="http://img.youtube.com/vi/ofr5EE9GsUs/2.jpg" alt="Youtube Video"></a>

   <!-- Add Youtube video to Gallery -->
   <a href="http://www.youtube.com/embed/9bZkp7q19f0?autoplay=1"><img src="http://img.youtube.com/vi/9bZkp7q19f0/2.jpg" alt="Youtube Video"></a>
</div>

Answer 1

将class属性更改为id或添加id属性id="html5gallery"

<div style="display:none;margin:0 auto; " 
 class="html5gallery" id="html5gallery" 
 data-skin="horizontal" data-width="1200" 
 data-height="680" >

编辑:

尝试添加图像

var imgURL = '';
var gallery = $("#html5gallery");

for (var i = 0; i < numDisplay; i++) {

  var img = new Image();

  img.onload = (function(im) {
    return function () {
       gallery.append(im);
     }
  })(img);

  img.src = data.data[i].images.low_resolution.url;
  imgURL += img.src + ' ';

  $(".insta").append("<div class='instaBox'><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' width='98' /></a></div>");   
}