показать несколько изображений с помощью JavaScript - PullRequest
Новая
       9

показать несколько изображений с помощью JavaScript

0 голосов
/ 12 октября 2019

Я пытаюсь показать изображения в javascript, и это работает, но в момент реализации этого с абстракцией изображений instagram несколько изображений не могут рассматриваться как фон, кажется, что они не принимают data-background-image ofслучается тэг "a", по-видимому, с такой строкой кода:

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

, который не добавляет фоновое изображение, что я мог упустить?

Это мой взгляд: `

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>

1 Ответ

1 голос
/ 12 октября 2019

this 

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

Не добавляет стиль фонового изображения к элементу - data-background-image - это просто некоторые данные по элементу 

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';

Должен выполнить трюк

...