I have a
Code:
<div id="content" class="clearfix"></div>
which self populates with a list of image urls from a separate directory on my server.
(im not sure if this is going to be an issue with infinite scroll option since the div self isnt hard coded on the page itself with the image urls.)

Here is the script that populates the <div> id= Content </Div> which pulls image urls from another directory called user-uploads-thumbnails.
It also sorts the images in descending order by image name.

Code:
<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
    $.ajax({
        url: "user-uploads-thumbnails",
        success: function(data){
            var imageNames = [];
            $(data).find("a:contains(.jpg)").each(function(){
                // store each image name into array
                imageNames.push($(this).attr("href"));
               });
            //imagenames array is ~ 
            //["001.jpg", "002.jpg" ".003.jpg" ....]
            var sortedImageNames = imageNames.sort();
            //sortedImageNames array is ~ 
            //["003.jpg", "002.jpg","001.jpg" ....]
            //In for loop we take from last image to first Image for DESC order
            for(var i = sortedImageNames.length; i-- > 0;) {
                    var linkImage = 'user-uploads/' + sortedImageNames[i];
                    var thumbnailImage = 'user-uploads-thumbnails/' + sortedImageNames[i];
                    var item = '<p><a class="fancybox" href="' 
                        + linkImage 
                        + '" data-fancybox-group="gallery"><img src="' 
                        + thumbnailImage 
                        + '"></a></p>';
                    $(item).appendTo('#content');
                }
            //Apply fancybox to these Elements
            $('.fancybox').fancybox();
            }
        });
    });
</script>

Here is the live URL for the site : http://ilovesmallies.com/forum/showcase.php

I want to use infinite scroll and masonry plugins in this div.
However, I'm unsure of how to point the function towards the content div which in theory has the list of image urls.

Here is some idea coding i had which didn't work.

Code:
    <script>
      $(function(){
        
        var $container = $('#content');
        
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector: '.box',
            columnWidth: 250
          });
        });
        
        $container.infinitescroll({
          navSelector  : '#content',    // selector for the paged navigation 
          nextSelector : '#content a',  // selector for the NEXT link (to page 2)
          itemSelector : '.box',     // selector for all items you'll retrieve
          loading: {
              finishedMsg: 'No more pages to load.',
              img: 'http://i.imgur.com/6RMhx.gif'
            }
          },
          // trigger Masonry as a callback
          function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
              // show elems now they're ready
              $newElems.animate({ opacity: 1 });
              $container.masonry( 'appended', $newElems, true ); 
            });
          }
        );
        
      });
    </script>