我在Laravel中设置了一个应用程序。该应用程序基本上插入了一个instagramapi库,可以获取图像等,并允许分享和点赞以及所有相关内容。
我正在尝试在网站上进行无限滚动,它会将下一页的图像加载到页面中,等等。目前这根本不起作用,只是每次加载相同的图像。我知道它为什么这么做,这是因为url在分页中总是一样的,并且每次添加图像时都不会更新。
这是设置:
JS-
$('#images').infinitescroll({
navSelector : "#pagination",
nextSelector : "#pagination a",
itemSelector : ".instagram-image",
debug : true,
prefill: true,
dataType: 'html',
appendCallback: false
// behavior : 'twitter',
// appendCallback : false, // USE FOR PREPENDING
//pathParse : function( pathStr, nextPage ){ return pathStr.replace('2', nextPage ); }
}, function(newElements, data, url){
//USE FOR PREPENDING
// $(newElements).css('background-color','#ffef00');
$(this).prepend(newElements);
//
//END OF PREPENDING
// window.console && console.log('context: ',this);
window.console && console.log('returned: ', newElements);
});
标记-
echo '<section id="images">';
foreach ( $media as $item ) {
echo '<article class="instagram-image">';
// define the form and set the action to POST to send the data to this script
echo '<form id="'. $token .'" class="forms" action="'; echo URL::current(); echo '" method="post">';
$id = $item->getId();
echo '<a title="' . $item->getCaption() .'" class="fancybox" rel="folk-1" href="' . $item->images->standard_resolution->url . '"><img alt="' . $item->getCaption() .'" src="' . $item->images->standard_resolution->url . '" /></a>';
echo '<div class="formSubmit-feedback"></div>';
if ( $current_user->likes($item) ){
echo '<button class="ajax instabtn button-unlike unlike icon-heart" type="submit" name="action" value="Unlike"></button>';
} else {
echo '<button class="ajax instabtn button-like like icon-heart" type="submit" name="action" value="Like"></button>';
}
echo '<input class="id" type="hidden" name="id" value="'; echo $id; echo '">';
echo '<p>'; echo $item->likes->count; echo '</p>';
echo '</form>';
echo '</article>';
}
echo '</section>';
这就是分页标记:
<div id="pagination">
<?php if( $media->getNext() ) { ?>
<a class="next_id" href="<?php echo URL::current() ?>?max_id=<?php echo $media->getNextMaxId(); ?>" class="next_page">Next page</a>
<?php } ?>
</div>
然后在页面中呈现:
<a class="next_id" href="http://folk:8888/?max_id=588378248253423565_195163470">Next page</a>
每次加载项目时,url都不会改变,下一组图像的下一个url基本上是这样的,所以这就是下一页上的内容:
<a class="next_id" href="http://folk:8888/?max_id=556279164512386673_195163470">Next page</a>
因此,获取这一点并不容易,但无限滚动也无法在脚本中确定这一点。
有人知道如何设置或解决方法吗?
任何帮助都将是惊人的,
干杯
如果我了解你,可以这样做:
更改文章布局并将文章id放入id
echo '<article class="instagram-image" id="$article->id">';
现在在无限滚动中只需获得最后一个instagram图像类id,如下所示:
last_id = $("div.instagram-image:last").attr('id');
现在使用ajax将该id发送到php在你的控制器中做一些类似的事情:
$last_id=0;
if (Input::has('last_id') $last_id = Input::get('last_id')
你的sql是这样的:
$media = Media::where('id','>',$last_id)->take(10);
现在,当向下滚动并调用ajax时,php将返回最后一个之后的项