0
我很難嘗試訪問圖像模型中的標題屬性。我正在創建一個燈箱，其中的圖像在頁面上打開了全尺寸，並在下方顯示圖像信息。在回撥後功能中，我能夠創建一個擴展縮略圖圖像的功能。但是我無法訪問標題或喜歡的數據。無法使用instafeed.js檢索instagram圖像標題
據我所知，我可以使用模板屬性來做到這一點，但是當所有的圖片加載時都會顯示出來。我試圖在點擊圖片後顯示該信息。我不斷收到錯誤。 [gallery css test.html：35 Uncaught TypeError：嘗試從自定義屬性中檢索數據時，無法讀取未定義的屬性'custom']。
注意：爲了測試字幕檢索，我將縮略圖上的事件偵聽器更改爲字幕功能。通常我會將它附加到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>