Javascript image to div

Question

So I am able to retrieve the images from instagram but I want the individual images to go into my gallery container div which I got a problem with. I have directed the images to the class "html5gallery" but the images does not goes in like other image 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>

`document.getElementById("html5gallery")` but there is no element with this id ! — Abhitalks, Jan 03 '14 at 05:38
You have a `div` with `class="html5gallery"` and NOT `id="html5gallery"` — Rahul Desai, Jan 03 '14 at 05:39
`document.getElementById('gallery')` but there is no element with this id too! — Abhitalks, Jan 03 '14 at 05:40

zzlalani · Accepted Answer · 2014-01-08T06:10:20.657

2

Change the class attribute to id or add the id attribute id="html5gallery"

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

EDIT:

Try this to append image

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

edited Jan 08 '14 at 06:10

answered Jan 03 '14 at 05:39

zzlalani

22,960
16
44
73

i tried adding to the id but it still doesnt work. i am able to get the images but cant seem to direct it into my gallery div – user3152558 Jan 03 '14 at 05:49
@user3152558 please check now. – zzlalani Jan 03 '14 at 06:09
Thanks man!! it worked! but only one images got to the gallery. instead of 4. any idea? – user3152558 Jan 07 '14 at 15:23
which image? first image or the last image? – zzlalani Jan 07 '14 at 15:29
only the last image is displayed http://distilleryimage3.s3.amazonaws.com/d00b251a75c111e3a10912e7d4c7f15b_6.jpg – user3152558 Jan 07 '14 at 15:35
take this line out of the loop `var gallery = $("#html5gallery");` – zzlalani Jan 07 '14 at 15:38
add console.log('TEST') function with in the img.load function to check how many times it called? – zzlalani Jan 07 '14 at 15:50
not sure how to test using chrome but if it only called once? – user3152558 Jan 07 '14 at 16:05
Yep! i did it! the number says 4 – user3152558 Jan 07 '14 at 23:17
i found the solution by changing this line $("#html5gallery").append(''); – user3152558 Jan 24 '14 at 01:13

score 0 · Answer 2 · answered Jan 03 '14 at 06:07

I've never used the instagram API before, but I think this is what you want to achieve (code below). I've included both a Vanilla Javascript method as well as a jQuery method (so you can pick and use whichever one you prefer - vanilla is faster of course)

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

I was able to get the 4 images to load in a div with the id of html5gallery on my end. Hope this helps!

user2887761 · Answer 3 · 2014-03-06T15:09:18.050

If the human eye can only see 24fps or 30fps or more when playing a game or watching tv, I believe a programer can use less DIVs in HTML within the screen size, with a Javascript array of 3 million colors for a couple of DIVs and cheat it's position(because of our human eyes), based in a timer event with a bunch of frames per second than the ones I mentioned, example 1 millisecond. In my opinion this is something which I would like to test, if it's the question that drives us let the answer be our destination.

This is the fiddle so far: 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>

wrong post, I should've notice that I was posting somewhere else. This is the link of where this should go to:[link](http://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div/5883032#5883032)...never mind. — user2887761, Mar 06 '14 at 15:37

Javascript image to div

3 Answers3