我很难尝试访问图像模型中的标题属性。我正在创建一个灯箱，其中图像在页面上以全尺寸打开，并在下方显示图像信息。在后回调函数中，我能够创建一个扩展缩略图的函数。但是我无法访问标题或喜欢数据。
我知道我可以使用模板属性来做到这一点，但是当所有图像都加载时就会显示出来。单击图像后，我将尝试显示该信息。我不断收到错误消息。 [gallery css test.html:35 Uncaught TypeError: Cannot read property 'custom' of undefined] 试图从自定义属性中检索数据时。
注意:为了测试标题检索，我将缩略图上的事件监听器更改为标题功能。通常我会将其附加到 expandImage 函数。
Instafeed 文档 https://github.com/stevenschobert/instafeed.js
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%;
}<!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>最佳答案
Cannot read property 'custom' of undefined 意味着，对象 this 上不存在选项。那是因为 showImage 的上下文绑定(bind)到对象 custom 而不是对象 feed。这意味着，您正在调用 custom.options.custom。
使用 this.images[this.currentImage] 如果 this 代表 custom 本身，使用 feed 如果 this 表示为 feed 对象
关于javascript - 无法使用 instafeed.js 检索 instagram 图片说明，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33585313/