我正在构建一个基本的应用程序,该应用程序可以从某人检索Instagram图片tag name
。我正在使用instagram-api-php回购。到目前为止,一切都很好。我在尝试加载更多与此相关的图片时遇到了问题tag name
。我正在next_max_id
按照instagram api分页中的说明使用。我已button
在页面中放置一个,并指定next_max_id
要加载其余照片。但是没有照片被加载。单击按钮如何加载更多照片?我遵循Github的例子
index.php
<script>
$(document).ready(function() {
$('#more').click(function() {
var tag = $(this).data('tag'),
maxid = $(this).data('maxid');
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {
tag: tag,
max_id: maxid
},
dataType: 'json',
cache: false,
success: function(data) {
// Output data
$.each(data.images, function(i, src) {
$('ul#photos').append('<li><img src="' + src + '"></li>');
});
// Store new maxid
$('#more').data('maxid', data.next_id);
}
});
});
});
</script>
<?php
/**
* Instagram PHP API
*/
require_once 'Instagram.php';
// Initialize class with client_id
// Register at http://instagram.com/developer/ and replace client_id with your own
$instagram = new Instagram('API KEY');
// $geo = $instagram->searchMedia(56.8770413, 14.8092744);
$tag = 'sweden';
// Get recently tagged media
$media = $instagram->getTagMedia($tag);
// Display first results in a <ul>
echo '<ul id="photos">';
foreach ($media->data as $data)
{
echo '<li><img src="'.$data->images->thumbnail->url.'"></li>';
}
echo '</ul>';
// Show 'load more' button
echo '<br><button id="more" name="max_id" data-maxid="'.$media->pagination->next_max_id.'" data-tag="'.$tag.'">Load more ...</button>';
?>
ajax.php
<?php
/**
* Instagram PHP API
*/
set_include_path("../src/" . PATH_SEPARATOR . get_include_path());
require_once 'Instagram.php';
use MetzWeb\Instagram\Instagram;
// Initialize class for public requests
$instagram = new Instagram('API KEY');
// Receive AJAX request and create call object
$tag = $_GET['tag'];
$maxID = $_GET['max_id'];
$clientID = $instagram->getApiKey();
$call = new stdClass();
$call->pagination->next_max_id = $maxID;
$call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}";
// Receive new data
$media = $instagram->getTagMedia($tag,$auth=false,array('max_tag_id'=>$maxID));
// Collect everything for json output
$images = array();
foreach ($media->data as $data) {
$images[] = $data->images->thumbnail->url;
}
echo json_encode(array(
'next_id' => $media->pagination->next_max_id,
'images' => $images
));
?>
改变
$.each(data.images, function(i, src) {
$('ul#photos').append('<li><img src="' + src + '"></li>');
});
到
$.each(data.images, function(i, img) {
$('ul#photos').append('<li><img src="' + img.standard_resolution.url + '"></li>');
});
不能100%地确定这是正确的属性名称,但就目前而言,您正在遍历图像对象数组,将每个图像对象设置为src
,然后尝试src
用作图像源,而实际上它是图像对象。src
可能是它的一个属性。
编辑:这是一个jsBin演示。如果data.images
实际上是一个对象数组,我的解决方案应该可以工作...
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句