Javascript图像到div答案

【问题标题】：Javascript image to divJavascript图像到div
【发布时间】：2014-01-03 05:36:18
【问题描述】：

所以我可以从 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>

【问题讨论】：

document.getElementById("html5gallery") 但是没有这个id的元素！
你有一个div 和class="html5gallery" 而不是id="html5gallery"
document.getElementById('gallery') 但也没有具有此 id 的元素！

标签： javascript html image instagram

【解决方案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>");   
}

【讨论】：

我尝试添加到 id 但它仍然不起作用。我能够获取图像，但似乎无法将其引导到我的画廊 div
@user3152558 请立即查看。
谢谢哥们！！有效！但只有一张图片进入画廊。而不是 4. 有什么想法吗？
哪个图片？第一张图还是最后一张图？
只显示最后一张图片distilleryimage3.s3.amazonaws.com/…

【解决方案2】：

我以前从未使用过 instagram API，但我认为这是您想要实现的（代码如下）。我已经包含了一个 Vanilla Javascript 方法和一个 jQuery 方法（所以你可以选择和使用你喜欢的任何一个 - vanilla 当然更快）

(function ($, window) {
    var userId = "19410587";
    var accessToken = "574298972.d868eb6.bab9c8fe820c4d4c80724edfb86236bd";
    var numDisplay = "4";

    // Define the gallery variable outside the for loop (performance)
    // Vanilla JS
    var galleryHTML = document.getElementById("html5gallery");
    // jQuery
    var $galleryHTML = $('#html5gallery');

    // Moved the gallery outside of the for loop (performance, again)
    var gallery = document.getElementById('gallery');

    var insta = $('.insta');
    // or var insta = document.getElementsByClassName('insta')[0] for vanilla JS

    // create a function to do the fancy ajax
    var fetchInstagram = function() {
        $.ajax({
            type: "GET",
            dataType: "jsonp",
            cache: false,
            url: "https://api.instagram.com/v1/users/"+userId+"/media/recent/?access_token="+accessToken,

            success: function(data) {
                for (var i = 0; i < numDisplay; i++) {

                    // I don't think you need the onload function here
                    // img.onload = function() {
                    //     document.getElementById('gallery').appendChild(img);
                    // };

                    // Not sure what this is, but I don't think you need it (for what you want to do)
                    // $(".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>");

                    // Create the new image object
                    var newImage = document.createElement('img');
                    newImage.src = data.data[i].images.low_resolution.url;

                    // Insert the images into html5gallery

                    // Vanilla Javascript Way
                        // galleryHTML.appendChild(newImage);

                    // jQuery Way
                        // var $newImage = $(newImage);
                        // $galleryHTML.append($newImage);
                }
            }
        });
    };

    // Making the function available in window for global use
    window.fetchInstagram = fetchInstagram;

})(jQuery, window);

// Initiate the function
fetchInstagram();

// You can bind the function to other stuff like.. if you click a button
// $('#load-more').on('click', fetchInstagram);

我能够将 4 张图片加载到 id 为 html5gallery 的 div 中。希望这会有所帮助！

【讨论】：

【解决方案3】：

如果人眼在玩游戏或看电视时只能看到 24fps 或 30fps 或更高，我相信程序员可以在屏幕尺寸内使用更少的 HTML 中的 DIV，使用 300 万种颜色的 Javascript 数组进行几次DIV 和欺骗它的位置（因为我们的人眼），基于一个计时器事件，每秒帧数比我提到的帧数多，例如 1 毫秒。在我看来，这是我想测试的东西，如果这是驱动我们的问题，那么答案就是我们的目的地。

到目前为止，这是小提琴：DEMO

<html>

<head>

<title></title>
<style>#placeDiv{position:absolute;left:0px;width:100px;height:100px;}
#placeDiv1{position:absolute;left:100px;width:100px;height:100px;}
#placeDiv2{position:absolute;left:200px;width:100px;height:100px;}
#b1{position:absolute;top:100px;left:0px}
#b2{position:absolute;top:100px;left:80px}
#b3{position:absolute;top:100px;left:170px}
#b4{position:absolute;top:100px;left:270px}
#b5{position:absolute;top:100px;left:320px}
 </style>
 </head>

  <body>
  <div id = "placeDiv">ok</div><div id = "placeDiv1">ok</div><div id = "placeDiv2">ok</div>
<button id="b1" onclick="forward()">Forward</button>
<button id="b2" onclick="backward()">Backward</button>
<button id="b3" onclick="skip2()">skip2</button>
<button id="b4" onclick="automatic()">auto</button>
 <button id="b5" onclick="stop()">stop</button>
 <script>
 var myArray = ["black","yellow","green","red","blue","blue","black","gray"];
 var myArray1 = ["yellow","blue","green","red","green","blue","black","gray"];
 var myArray2 = ["yellow","blue","green","red","green","blue","black","gray"];
 var i = 0;
 document.getElementById("placeDiv").style.backgroundColor = myArray[i];
 document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
 document.getElementById("placeDiv2").style.backgroundColor = myArray2[i];
 forward=function(){

     if(i == myArray.length-1) 
     {i=0;}
     else
     {i=i+1;}
     document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
   document.getElementById("placeDiv").style.backgroundColor = myArray[i];
  document.getElementById("placeDiv2").style.backgroundColor = myArray2[i];
       };     skip2=function(){

       if(i == myArray.length-4) 
       {i+=2;alert("This is the iterator "+i)}else if(i==7){i=0}else{i=i+1;};
       document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
       document.getElementById("placeDiv").style.backgroundColor = myArray[i];
       };
 backward=function(){

     if(i == 0)
    {i=myArray.length-1;i=myArray1.length-1;}
    else
   {
        i=i-1;
   }

   document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
   document.getElementById("placeDiv").style.backgroundColor = myArray[i];
     //

}
  var m=null;   
  automatic=function(){
   clearInterval(m)
   m = setInterval(function(){
    if(i == myArray.length-1) 
         {i=0;}
         else
         {i=i+1;}
         document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
       document.getElementById("placeDiv").style.backgroundColor = myArray[i];

  },1);
function b(x,y){
var a =setInterval(function(){document.getElementById("placeDiv").style.left=x+++"px";if (x==100){d();clearInterval(a);}},10);
function d(){var z = setInterval(function(){document.getElementById("placeDiv").style.left=x--+"px";if (x==0){c();clearInterval(z);}},10);}
function c(){var g = setInterval(function(){document.getElementById("placeDiv").style.left=x+++"px";if(x==100){d();clearInterval(g)}},10)};
//Aqui uma copia.

var v =setInterval(function(){document.getElementById("placeDiv").style.top=y+++"px";if (y==100){h();clearInterval(v);}},10);
function h(){var l = setInterval(function( {document.getElementById("placeDiv").style.top=y--+"px";if (y==0){ok();clearInterval(l);}},10);}
function ok(){var ja = setInterval(function( {document.getElementById("placeDiv").style.top=y+++"px";if(y==100 {h();clearInterval(ja)}},10)};
}
b(0,0);
  stop=function(){clearInterval(m)};
  };
</script>
</body>

</html>

【讨论】：

发错了，我应该注意到我在其他地方发帖。这是应该去哪里的链接：link...没关系。