[英]Dynamically loading Justified gallery images with infinite scroll
我正在使用带有内置无限滚动插件的jQuery Justified Gallery。
http://miromannino.github.io
这可能是一个愚蠢的问题,但是我如何使用PHP动态加载图像。
我知道如何使用下面的无限滚动插件来执行此操作,但是此插件不适用于无限滚动插件。
http://www.infinite-scroll.com/
码
$('#gallery').justifiedGallery({rowHeight:120});
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
for (var i = 0; i < 5; i++) {
$('#gallery').append('<a>' +
'<img src="http://path/to/image" />' +
'</a>');
}
$('#gallery').justifiedGallery('norewind');
}
});
$('#gallery').justifiedGallery({rowHeight:120});
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() == $(document).height()){
//jquery ajax for dynemic loading images
$.ajax({
type:'post',//method can bet get,post
url:'yourPHPFile.php',//url of your php file
data:{"key":value},//if you want to send some data for query
success:function(result){ //function call when successful response from server
var PhpImageArray=JSON.parse(result);
$.each(PhpImageArray, function(index, item) {
$('#gallery').append('<a>' +
'<img src="http://path/to/image"'+item.image+' />' +
'</a>');
});
}
});
$('#gallery').justifiedGallery('norewind');
}
});
phpfile.php
<?php
//array contain image object as
$img_array=array();
//your database query
$query=mysqli_query($DB_connect,"select imageName from ImageTable");
while($img=mysqli_fetch_array($query))
{
//object name with "image"
$obj["image"]=$img["imageName"];
//push object to arraay
array_push($img_array,$obj);
}
//convert array in to json format for javascript use
echo json_encode($img_array);
?>
您可以使用Javascript计算图像数量
var offset = $('#gallery').children().length
然后,您可以对给定的路由(例如/ giveImages)进行ajax调用,该路由返回一个包含图像URL的JSON-Array。
$.get('/giveImages?offset=' + offset, function(data) {
// data = [
// 'http://foo.com/image/3.jpg',
// 'http://foo.com/image/4.jpg',
// 'http://foo.com/image/5.jpg'
// ]
// APPEND STUFF HERE AND justifyGallery
})
完整示例:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
var offset = $('#gallery').children().length
$.get('/giveImages?offset=' + offset, function(data) {
for(var i = 0; i < data.length; i++) {
$('#gallery').append(
'<a>' +
'<img src="' + data[i] + '" />' +
'</a>'
)
$('#gallery').justifiedGallery('norewind')
}
})
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.