Javascript-изображение для div

Question

Так что я могу получить изображения из instagram, но хочу, чтобы отдельные изображения вошли в мой контейнер-контейнер галереи, с которыми у меня возникла проблема. Я направил изображения в классе «html5gallery», но изображения не идет в как и другие URLs изображения:

<!-- 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

изменить атрибут класса для идентификатора или добавьте атрибут ID id="html5gallery"

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

EDIT:

Попробуйте это, чтобы добавить изображение

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

Answer 2

Я никогда раньше не использовал API-интерфейс instagram, но я думаю, что это то, чего вы хотите достичь (код ниже). Я включил как метод Vanilla Javascript, а также метод JQuery (так что вы можете выбрать и использовать в зависимости от того, который вы предпочитаете - ваниль быстрее, конечно)

(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 изображения для загрузки в div с id html5gallery на моем конце. Надеюсь это поможет!

Answer 3

Если человеческий глаз может видеть только 24 кадра в секунду или 30 кадров в секунду или больше при воспроизведении игры или просмотре телевизора, я считаю, что программист может использовать меньше DIV в HTML в размере экрана, с массивом Javascript из 3 миллионов цветов для пары DIVs и обмануть его позицию (из-за наших человеческих глаз), основанный на событии таймера с кучей кадров в секунду, чем те, которые я упомянул, например, 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>