Search code examples
javascripthtmlinstagramjavascript-objectsinstagram-api

show multiple images with javascript


I am trying to show images in javascript and it works but at the moment of implementing it with the abstraction of instagram images the multiple images cannot be seen as a background in , it seems to not take the data-background-image of the tag "a", apparently having this line of code:

$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/" + name + "/", function(html) {

happens that does not add the background image, what could I be missing?

This is my view:`

var name = "legend_arnoldschwarzenegger";

$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/" + name + "/", function(html) {
    if (html) {
        var regex = /_sharedData = ({.*);<\/script>/m,
          json = JSON.parse(regex.exec(html)[1]),
          edges =  json.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;
          
      $.each(edges, function(n, edge) {
                var node = edge.node;
                var div = document.createElement("div");
                div.className = "col-xl-6";
                div.innerHTML =
                    "<a href='" + node.thumbnail_src + "' class='photo-box mfp-gallery' data-background-image='" + node.thumbnail_src + "' data-toggle='lightbox' title='Instagram' style='width: 400px;'>\n" +
                    '<div class="photo-box-content">\n' +
                    "<span>Instagram</span>\n" +
                    '</div>\n' +
                    '</a>\n';

                document.getElementById('insta_images').appendChild(div);
      });
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="insta_images" class="row"></div>


Solution

  • this

    data-background-image='"+node.thumbnail_src+"'
    

    Does not add a background image style to the element - data-background-image is just some data on the element

    div.innerHTML =
        "<a href='"+node.thumbnail_src + "' class='photo-box mfp-gallery' data-toggle='lightbox' title='Instagram' style='width: 400px;background-image:url("+node.thumbnail_src+")'>\n" +
        '<div class="photo-box-content">\n' +
        "<span>Instagram</span>\n" +
        '</div>\n' +
        '</a>\n';
    

    Should do the trick