Dynamic loading of images with an aligned gallery with infinite scroll

Question

I am using jQuery Justified Gallery with a built-in infinite scroll plugin.

http://miromannino.imtqy.com 

This might be a dumb question, but how can I dynamically upload images using PHP.

I know how to do this with the infinity scroll plugin, but this plugin does not work with the infinity scroll plugin.

 http://www.infinite-scroll.com/ 

The code

 $('#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'); } }); 

Answer 1

  $('#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); ?> 

Answer 2

You can count the number of images using Javascript

 var offset = $('#gallery').children().length 

Then you can make an ajax call for a given route (e.g. / giveImages) that returns a JSON array containing the image URL

 $.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 }) 

Full example:

 $(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') } }) } }