Question

我很难尝试访问图片模型中的字幕属性。我正在创建一个灯箱，图片在页面上打开全尺寸，并在下面显示图像信息。在后回调功能中，我能够创建一个扩展缩略图图像的功能。但是，我无法访问标题或喜欢数据。

我知道我可以使用模板属性来执行此操作，但是在加载所有图像时会显示该属性。我点击图片后试图显示该信息。我一直在收到错误。 [gallery css test.html：35 Uncaught TypeError：无法读取属性＆＃39; custom＆＃39;尝试从自定义属性中检索数据时未定义的。

注意：为了测试字幕检索，我将缩略图上的事件监听器更改为字幕功能。通常我会将它附加到expandImage函数。

Instafeed doc's https://github.com/stevenschobert/instafeed.js

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-color: black;
}

#container {
  margin-left: auto;
  margin-right: auto;
}

#galleryBox {
  padding: 2%;
  margin: 4%;
  background-color: white;
}

#innerGallery {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.thumbnail {
  margin: 1%;
  display: inline-block;
}

.location{

}

.caption {

}

.likes {

}

#backgroundChanger {
  margin: 0;
  padding: 0;
  /*min-height: 150%;*/
  /*min-width: 100%;*/
  background-color: rgba(0,0,0,0.5);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
}

/*change lightbox to class*/
#lightBox {
  left: 0;
  right: 0;
  top: 5%;
  margin: 0 auto;
  /*height: 800px;
  width: 800px;*/
  position: absolute;
}

#instafeed img {
  object-fit: cover;
  height: 20em;
  width: 20em;
  margin: 1%;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Gallery</title>
    <link rel="stylesheet" type="text/css" href="style2.css">

  </head>

  <body>
    <div id="container">
      <div id="galleryBox">
        <div id="innerGallery"><div id="instafeed"></div></div>

        </div>
      </div>
    </div>

  </body>
  <script type="text/javascript" src="js/instafeed.min.js"></script>
  <script type="text/javascript">
  function init() {

    var feed = new Instafeed({
      get: 'user',
      userId: '1418648047',
      resolution: 'standard_resolution',
      template: '<img class="thumbnail" src="{{model.images.standard_resolution.url}}" />',
      clientId: '66e8640ecc1c4145af1bb497cda6897c',
      // custom: '<div class="location">{{location}}</div><div class="caption">{{caption}}</div><div class="likes">{{likes}}</div>',
      custom: {
        images: [],
        currentImage: 0,
        showImage: function () {
          var result, image;
          image = this.options.custom.images[this.options.custom.currentImage];
          result = this._makeTemplate(this.options.template, {
            model: image,
            id: image.id,
            link: image.link,
            image: image.images[this.options.resolution].url,
            caption: this._getObjectProperty(image, 'caption.text'),
            likes: image.likes.count,
            comments: image.comments.count,
            location: this._getObjectProperty(image, 'location.name')
          });
          var imageInfoDiv = document.createElement("div");
          imageInfoDiv.innerHTML = result;
        }
      },
      after: function() {


        var backgroundChanger = document.createElement("div");
        backgroundChanger.id = "backgroundChanger";
        var lightBox = document.createElement("div");
        lightBox.id = "lightBox";
        var expandedImg = document.createElement("img");
        // var imageInfoDiv = document.createElement("div");
        var thumbnails = document.getElementsByClassName("thumbnail");
        var innerGallery = document.getElementById("innerGallery");
        for (i = 0; i < thumbnails.length; i++) {
          thumbnails[i].addEventListener("click", caption);
        }

        function caption(imageInfoDiv) {
          console.log(feed.options.custom.showImage(imageInfoDiv));
          lightBox.appendChild(feed.options.custom.showImage(imageInfoDiv));
        }


      function expandImage() {
        expandImage = this;
        expandedImg.src = this.src;
        document.body.appendChild(backgroundChanger);
        backgroundChanger.appendChild(lightBox);
        lightBox.appendChild(expandedImg);

        lightBox.style.width = expandedImg.width + "px";
        expandedImg.addEventListener("click", removeImage);
        backgroundChanger.addEventListener("click", removeImage);
      }
    //TO DO: Add captions, favorite. Next previous. Alt tag? Work on canvas

      function removeImage() {
        document.body.removeChild(backgroundChanger);
        backgroundChanger.removeChild(lightBox);
        lightBox.removeChild(expandedImg);
        expandedImg.removeEventListener("click", removeImage);
        backgroundChanger.removeEventListener("click", removeImage);
      }

      // feed.next();

    }
    });

    feed.run();

    // var hew = Instafeed.prototype.



    var rgb = getAverageRGB(document.getElementById("i"));
    document.body.style.backgroundColor = "rgb('+rgb.r+', '+rgb.b+', '+rgb.g+')";

    function getAverageRGB(imgEl) {
      var blockSize = 5, //every 5 pixels
          defaultRGB = {r:0, g:0, b:0},
          canvas = document.createElement,
          context = canvas.getContext && canvas.getContext('2d'),
          data, width, height,
          i = -4,
          length,
          rgb = {r:0, g:0, b:0},
          count = 0;

      if (!context) {
        return defaultRGB;
      }

      height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
      width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

      context.drawImage(imgEl, 0, 0);

      try {
        data = context.getImageData(0, 0, width, height);
      } catch(e) {
        console.log("x");
        return defaultRGB;
      }

      length = data.data.length;

      while ((i += blockSize * 4) < length) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i+1];
        rgb.b += data.data[i+2];
      }

      rgb.r = ~~(rgb.r/count);
      rgb.g = ~~(rgb.g/count);
      rgb.b = ~~(rgb.b/count);

      return rgb;
    }

  };

  window.onload = init();
  </script>

</html>

＆＃13;

Answer 1

Cannot read property 'custom' of undefined表示对象this上不存在选项。这是因为showImage的上下文绑定到对象custom而不是对象feed。这意味着，您正在呼叫custom.options.custom。

使用this.images[this.currentImage]代替custom本身，如果feed代表this对象

，请使用feed

无法使用instafeed.js检索instagram图片标题

1 个答案: