[英]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.