jQuery Infinite Scrolling

[mRAza]

there are more ways but here is one simple for you to understand:
First off keep images only you wants to display on page load, so lets assume you wants only 10 images, so your html will look like this

<ul id="images">
       <li><img class="quotes" src="/Quotes/ididntthought.png" alt="/"></li>
       <li><img class="quotes" src="/Quotes/ijustwantto.png" alt="/"></li>
       <li><img class="quotes" src="/Quotes/dowhat.png" alt="/"></li>
       <li><img class="quotes" src="/Quotes/maybeill.png" alt="/"></li>
       <li><img class="quotes" src="/Quotes/whenwe.png" alt="/"></li>
       <li><img class="quotes" src="/Quotes/ihateyour.png" alt="/"></li>
       <li><img class="quotes" src="/Quotes/iwonder.png" alt="/"></li>
       <li><img class="quotes" src="/Quotes/icaninsult.png" alt="/"></li>
       <li><img class="quotes" src="/Quotes/neverlookback.png" alt="/"></li>
       <li><img class="quotes" src="/Quotes/icanttell.png" alt="/"></li>
</ul> 

Now when page loads it has 10 images, next add this code before </head> , ofc include jquery libraray and this libraray as well, now read comments in the code which starts with double slash on how to use it.

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
  <script type="text/javascript" charset="utf-8">
    $(function() {
      $(document).endlessScroll({
        bottomPixels: 500,
        fireDelay: 10,
        callback: function(i) {
        // how many images you wants to add? after page stop , you have 30 more to display so add 30 images, after reaching 30 it should stop so add 31 below.
        if(i == 31) { ceaseFire(); }        
        // ok lets add first image, image name is stones.png so i gave just stones, and dont forget alt ;)
        if(i == 1) { var image = 'stones'; var alt = 'alt here';}        
        // lets add second image, image name is lotus.png i gave lotus 
        if(i == 2) { var image = 'lotus'; var alt = 'lotus alt here'; }
        // lets add third image
        if(i == 3) { var image = 'other'; var alt = 'other alt';}        
        // just repeat as above if(i == 4) with image names in img directory and alt you need how many you need
        
        // now time to display, 
          $("ul#images li:last").after('<li><img src="/Quotes/' + image + '.png" alt="' + alt + '" />' + i + '</li>');
        }
      });
    });
  </script>