Generate more content as user scrolls without sql

Question

My goal is go generate the following code when the user scrolls down:

<?php
    // get all files
        $imagesDir = 'uploads/';
    $images = glob($imagesDir . '* {jpg,jpeg,png,gif,JPG,JPEG,PNG,GIG}', GLOB_BRACE);
    $imagesCount = count($images);
    for($i = 0 ; $i < $imagesCount ; $i++) {
        // select image 
        $randomIndex = array_rand($images); // select image index
        $file_title = $randomImage = $images[$randomIndex]; // use selected image
        unset($images[$randomIndex]); // remove selected image
        // print_r($images); // you can see what left in $images
        // show image
    }   
?>

<li class="item-thumbs span3 img">
   <!-- Fancybox - Gallery Enabled - Title - Full Image -->
   <a class="hover-wrap fancybox" data-fancybox-group="gallery" 
       title="<?php echo $randomImage ?>" href="<?php echo $randomImage ?>">
   <span class="overlay-img"></span>
   <span class="overlay-img-thumb font-icon-plus"></span>
   </a>
   <!-- Thumb Image and Description -->
   <img src="<?php echo $randomImage ?>" alt="{Failed To Load Item Description}">
</li>

This code is found inside a block. I want to generate random images and have them show up in a nicely formatted area. Right now, everything works except that I need this code to be automatically generated so more show up as the user scrolls...Just like Facebook loads more posts on the wall when you scroll down. I've tried many scripts but none of them worked for me.

Answer 1

ou query answer is: first thing * you have to set a scroll handler in javascript that will be fired whenever user will scroll either up or down * you have to put ajax call that will fetch result for you when ever scroll handler will be called * and the last thing render your ajax response

But you have to manage in scroll handler that user is going up or down b / c you will need data whenever user will scroll down

so i am putting some code example , it uses jquery

Scroll handler

var lastScrollTop = 0;
var scrollHandler = function () {
var st = $(this).scrollTop();
var pageHeight = $(document).height();
var pageScrolled = $(window).scrollTop();
var pageView = $(window).height();
if (st > lastScrollTop) {
    // downscroll code
    if (st > lastScrollTop && (pageScrolled >= (pageHeight / 2))) {
        // calling scroll     after half page scrolled
        //  do nothing
    } else {
        loadMore(); // it will be called only in scroll down
    }
}


lastScrollTop = st;

}

put ajax call in this function

function loadMore() {
$(window).off("scroll", scrollHandler);
$.ajax({
    url: "",
    "data": '',
    success: function () {
        //  render you ajax response
        ....
        $(window).scroll(scrollHandler); // call event handle after first result render
    }

});

}

// attaching scroll event after window load

$(window).load(function () {
    $(window).scroll(scrollHandler);
});

only the remaining logic is how will you identify that how many result are loaded and wha was last result

so little logic is put an extra parameter in you last that will tell you it was las result and before calling loadMore(), read that parameter and send back to ajax call.