Sonsuz kaydırma resmiyle Sonsuz galeri görüntülerini dinamik olarak yükleme

Question

JQuery Justified galerisini, dahili sonsuz kaydırma eklentisiyle kullanıyorum.

http://miromannino.github.io 

Bu aptalca soru olabilir ama nasıl ben PHP ile dinamik görüntüleri yükleyebilirsiniz.

Aşağıdaki sonsuz kaydırmayla birlikte nasıl yapılacağını biliyorum ancak bu eklenti sonsuz kaydırmayla çalışmaz.

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

Sen Sonra belirli bir rota için bir ajax arama yapabilir

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

Javascript

kullanarak görüntülerin miktarını sayabiliriz

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

Kodu (örn/giveImages) döndürür Resim URL'sinin

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

numarasını içeren bir JSON-Array

için tam bir örnek:

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

     } 

    }) 
    } 
}