ajaxLoop.js

jQuery(function($) {
	var page 		= 1,
		loading		= true,
		$window		= $(window),
		$content	= $('body.page-template-page-browse-php #content');

	var load_posts = function() {
		console.log('load_posts():: INIT');
		$.ajax({
			type		: "GET",
			data		: {numPosts : 9, pageNumber: page, action:'displaylens'},
			dataType	: "html",
			url			: ajax_object.ajax_url,
			beforeSend	: function() {
				if (page != 1) {
					console.log(page);
					$content.append('<div id="temp_load" style="text-align: center"><img src="http://critlens.com/critlens/wp-content/uploads/2014/04/ajax-loader3.gif" /></div>');
				}
			},
			success		: function(data) {
				$data = $(data);
					if ($data.length) {
					$data.hide();
					$content.append($data);
					$data.fadeIn(800, function() {
						$('#temp_load').remove();
						loading = false;
					});
				} else {
					$('#temp_load').remove();
				}
			},
			error		: function(jqXHR, textStatus, errorThrown) {
				$('#temp_load').remove();
				alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
			}
		});
	};

	$window.scroll(function() {
		//console.log('Loading::' + loading);
		var content_offset = $content.offset();
		//console.log(content_offset.top);
		if (!loading && ($window.scrollTop() +
			$window.height() ) > ( $content.scrollTop() + $content.height() + content_offset.top - 250 ) ) {
			//console.log('hit load more posts');
				loading = true;
				page++;
				load_posts();
		}
	});
	load_posts();
});

functions.php

<?php
/*
Author: Eddie Machado
URL: htp://themble.com/bones/

This is where you can drop your custom functions or
just edit things like thumbnail sizes, header images,
sidebars, comments, ect.
*/

/************* INCLUDE NEEDED FILES ***************/

/*
1. library/bones.php
	- head cleanup (remove rsd, uri links, junk css, ect)
	- enqueueing scripts & styles
	- theme support functions
	- custom menu output & fallbacks
	- related post function
	- page-navi function
	- removing <p> from around images
	- customizing the post excerpt
	- custom google+ integration
	- adding custom fields to user profiles
*/
require_once( 'library/bones.php' ); // if you remove this, bones will break
/*
2. library/custom-post-type.php
	- an example custom post type
	- example custom taxonomy (like categories)
	- example custom taxonomy (like tags)
*/
require_once( 'library/custom-post-type.php' ); // you can disable this if you like
/*
3. library/admin.php
	- removing some default WordPress dashboard widgets
	- an example custom dashboard widget
	- adding custom login css
	- changing text in footer of admin
*/
// require_once( 'library/admin.php' ); // this comes turned off by default
/*
4. library/translation/translation.php
	- adding support for other languages
*/
// require_once( 'library/translation/translation.php' ); // this comes turned off by default

/************* THUMBNAIL SIZE OPTIONS *************/

// Thumbnail sizes
add_image_size( 'bones-thumb-600', 600, 150, true );
add_image_size( 'bones-thumb-300', 300, 100, true );
/*
to add more sizes, simply copy a line from above
and change the dimensions & name. As long as you
upload a "featured image" as large as the biggest
set width or height, all the other sizes will be
auto-cropped.

To call a different size, simply change the text
inside the thumbnail function.

For example, to call the 300 x 300 sized image,
we would use the function:
<?php the_post_thumbnail( 'bones-thumb-300' ); ?>
for the 600 x 100 image:
<?php the_post_thumbnail( 'bones-thumb-600' ); ?>

You can change the names and dimensions to whatever
you like. Enjoy!
*/

/************* ACTIVE SIDEBARS ********************/

// Sidebars & Widgetizes Areas
function bones_register_sidebars() {
	register_sidebar(array(
		'id' => 'sidebar1',
		'name' => __( 'Sidebar 1', 'bonestheme' ),
		'description' => __( 'The first (primary) sidebar.', 'bonestheme' ),
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h4 class="widgettitle">',
		'after_title' => '</h4>',
	));

	/*
	to add more sidebars or widgetized areas, just copy
	and edit the above sidebar code. In order to call
	your new sidebar just use the following code:

	Just change the name to whatever your new
	sidebar's id is, for example:

	register_sidebar(array(
		'id' => 'sidebar2',
		'name' => __( 'Sidebar 2', 'bonestheme' ),
		'description' => __( 'The second (secondary) sidebar.', 'bonestheme' ),
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h4 class="widgettitle">',
		'after_title' => '</h4>',
	));

	To call the sidebar in your template, you can just copy
	the sidebar.php file and rename it to your sidebar's name.
	So using the above example, it would be:
	sidebar-sidebar2.php

	*/
} // don't remove this bracket!

/************* COMMENT LAYOUT *********************/

// Comment Layout
function bones_comments( $comment, $args, $depth ) {
   $GLOBALS['comment'] = $comment; ?>
	<li <?php comment_class(); ?>>
		<article id="comment-<?php comment_ID(); ?>" class="clearfix">
			<header class="comment-author vcard">
				<?php
				/*
					this is the new responsive optimized comment image. It used the new HTML5 data-attribute to display comment gravatars on larger screens only. What this means is that on larger posts, mobile sites don't have a ton of requests for comment images. This makes load time incredibly fast! If you'd like to change it back, just replace it with the regular wordpress gravatar call:
					echo get_avatar($comment,$size='32',$default='<path_to_url>' );
				*/
				?>
				<?php // custom gravatar call ?>
				<?php
					// create variable
					$bgauthemail = get_comment_author_email();
				?>
				<img data-gravatar="http://www.gravatar.com/avatar/<?php echo md5( $bgauthemail ); ?>?s=32" class="load-gravatar avatar avatar-48 photo" height="32" width="32" src="<?php echo get_template_directory_uri(); ?>/library/images/nothing.gif" />
				<?php // end custom gravatar call ?>
				<?php printf(__( '<cite class="fn">%s</cite>', 'bonestheme' ), get_comment_author_link()) ?>
				<time datetime="<?php echo comment_time('Y-m-j'); ?>"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php comment_time(__( 'F jS, Y', 'bonestheme' )); ?> </a></time>
				<?php edit_comment_link(__( '(Edit)', 'bonestheme' ),'  ','') ?>
			</header>
			<?php if ($comment->comment_approved == '0') : ?>
				<div class="alert alert-info">
					<p><?php _e( 'Your comment is awaiting moderation.', 'bonestheme' ) ?></p>
				</div>
			<?php endif; ?>
			<section class="comment_content clearfix">
				<?php comment_text() ?>
			</section>
			<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
		</article>
	<?php // </li> is added by WordPress automatically ?>
<?php
} // don't remove this bracket!

/************* SEARCH FORM LAYOUT *****************/

// Search Form
function bones_wpsearch($form) {
	$form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
	<label class="screen-reader-text" for="s">' . __( 'Search for:', 'bonestheme' ) . '</label>
	<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . esc_attr__( 'Search the Site...', 'bonestheme' ) . '" />
	<input type="submit" id="searchsubmit" value="' . esc_attr__( 'Search' ) .'" />
	</form>';
	return $form;
} // don't remove this bracket!



//Styling for the WP Admin Bar
function link_to_stylesheet() {
	if ( ! current_user_can( 'manage_options' ) ) : ?>
	<style type="text/css">
	#wp-admin-bar-wp-logo { display: none; }
	.adminbar-input { display: none; }
	#wpadminbar {background-image: none;}
	#wp-toolbar ul li {float: right;}
	</style>
	<?php
	endif;
}
add_action('wp_head', 'link_to_stylesheet');

// Creating a new content type: Album
add_action( 'init', 'create_custom_taxonomies');
function create_custom_taxonomies() {
	register_taxonomy(
		'medium',
		'album',
		array(
			'label' => __( 'Medium'),
			'rewrite' => array('slug' => 'medium' )
			 )
		);

	register_taxonomy(
		'software',
		'album',
		array(
			'label' => __( 'Software' ),
			'rewrite' => array('slug' => 'software')
			 )
		);
}
add_action( 'init', 'create_post_type');
function create_post_type() {
	register_post_type( 'album',
		array(
				'labels' => array(
					'name' => __( 'Albums' ),
					'singular_name' => __( 'Album' )
					),
				'public' => true,
				'has_archive' => true,
				'menu_position' => 10,
				'supports' => array(
					'title',
					'editor',
					'author',
					'thumbnail',
					'custom-fields',
					'comments',
					'revisions'
					),
				'taxonomies' => array(
					'medium',
					'software',
					'category'
					),

				)
		);
}

add_action( 'init', 'usi_taxonomy_init');
function usi_taxonomy_init() {
	register_taxonomy('user_submitted_images', 'post', array(
		'name' => __('User Submitted Images'),
		'singular_name' => __('User Submitted Image'),
		'all_items' => __( 'All User Submitted Images' ),
		'edit_item' => __('Edit User Submitted Image' ),
		'view_item' => __('View User Submitted Image'),
		'add_new_item' => __('Add New User Submitted Image' ),
		'parent_item' => __('Parent User Image Category'),
		'parent_item_colon' => ' ',
		'search_items' => __('Search User Submitted Image Categories'),
		'public' => true,
		'show_ui' => true,
		)
	);
}


// Display attachments in user-submitted posts
function usp_display_images() {
	global $post;

	$args = array('order' => 'ASC', 'post_type' => 'attachment', 'post_parent' =>$post->ID, 'post_mime_type' => 'image', 'post_status' => null);
	$items = get_posts($args); ?>

	<div class="usp-image">
		<?php foreach ($items as $item) {
			$size = "thumbnail";
			// Is this a single post? Then we don't need thumbs, we need the full image.
			if (is_single() ) {
				$size = "large";
			}
			$atts = wp_get_attachment_image_src($item->ID, $size);
			$full = wp_get_attachment_image_src($item->ID, 'full');
			// usp-images link to their parent post, not the actual attachment.
			$parent_permalink = get_permalink($post->ID); ?>
			<a href="<?php echo $parent_permalink; ?>" target="_blank"><img src="<?php echo $atts[0]; ?>" width="<?php echo $atts[1]; ?>" height="<?php echo $atts[2]; ?>" alt=""></a>
			<?php }
			$author = get_post_meta($post->ID, 'user_submit_name', true);
			$url = get_post_meta($post->ID, 'user_submit_url', true);
			if (filter_var($url, FILTER_VALIDATE_URL) !== false) {
				echo '<span class="usp-author-link">Posted by <a href="' . $url . '">' . $author . '</a></span>';
				//TODO: Display user avatar next to author-link
			} ?>
		</div>
			
			<?php if (is_single() ) { //Post text content for single-posts ?>
			<div class="post-content">
				<?php echo '<p>' . get_the_content() . '</p>'; ?>
			</div> <?php
			} ?>
		<?php }

//add_filter('the_content', 'usp_display_images');

// Register Custom Post Type
function cvist_user_post_type() {

	$labels = array(
		'name'                => _x( 'Lenses', 'Post Type General Name', 'text_domain' ),
		'singular_name'       => _x( 'Lens', 'Post Type Singular Name', 'text_domain' ),
		'menu_name'           => __( 'Lenses', 'text_domain' ),
		'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
		'all_items'           => __( 'All Lenses', 'text_domain' ),
		'view_item'           => __( 'View Lens', 'text_domain' ),
		'add_new_item'        => __( 'Add New Lens', 'text_domain' ),
		'add_new'             => __( 'Add New', 'text_domain' ),
		'edit_item'           => __( 'Edit Lens', 'text_domain' ),
		'update_item'         => __( 'Update Lens', 'text_domain' ),
		'search_items'        => __( 'Search Lenses', 'text_domain' ),
		'not_found'           => __( 'No Lenses found', 'text_domain' ),
		'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
	);
	$args = array(
		'label'               => __( 'lenses', 'text_domain' ),
		'description'         => __( 'User Submitted Content', 'text_domain' ),
		'labels'              => $labels,
		'supports'            => array( 'title', 'editor', 'author', 'thumbnail', 'comments', 'trackbacks', 'custom-fields', 'page-attributes', ),
		'taxonomies'          => array( 'category', 'post_tag' ),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => true,
		'show_in_admin_bar'   => true,
		'menu_position'       => 5,
		'menu_icon'           => '',
		'can_export'          => true,
		'has_archive'         => true,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'capability_type'     => 'post',
	);
	register_post_type( 'lenses', $args );

}

// Hook into the 'init' action
add_action( 'init', 'cvist_user_post_type', 0 );

function cvist_get_current_profile_user() {
	 $f_url = $_SERVER['REQUEST_URI'];
     $url = explode('/', $f_url);
     $user_name = $url[3];

     return $user_name;
}

// Redirects non-admin users to the home page after login
function cvist_login_redirect($redirect_to, $request, $user) {
	return( is_array( $user->roles ) && in_array( 'administrator', $user->roles ) ) ? admin_url() : site_url();
}

add_filter( 'login_redirect', 'cvist_login_redirect', 10, 3);



function cvist_scripts_method() {
	wp_enqueue_style('tumbmit-style', get_stylesheet_directory_uri() . '/library/js/tumbmit/tumbmit.css');
	wp_enqueue_style('fontawesome', get_stylesheet_directory_uri() . '/library/fontawesome/css/font-awesome.min.css');
	wp_enqueue_script(
		'tumbmit',
		get_stylesheet_directory_uri() . '/library/js/tumbmit/tumbmit.js',
		array( 'jquery')
		);
}

add_action( 'wp_enqueue_scripts', 'cvist_scripts_method' );


/**
  * Populates an announcement bar located directly under the footer.
  */
function cvist_announcements_bar() {
	$args = array(
		'post_type' => 'announcement'
	);

	$the_query = new WP_Query( $args );
	if ( $the_query->have_posts() ) : ?>

	<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
	<div id="announcement-bar" class="twelvecol full-width">
		<p class="announcement"><?php echo get_the_content(); ?></p>
    <div id="announce-collapse">x</div>
	</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
	<p><?php echo "No announcements at this time."; ?></p>
<?php endif; ?>
<?php

}

/**
  * Sidebar used on the browse lenses page to sort by PoI, tags, etc.
  */
function cvist_filter_sidebar() {

}


/**
  * Used on lens-entries to shrink titles that may be too long.
  */

function collapse_string($string, $stringLimit) {
	$stringLength = strlen($string);
	if ($stringLength >= $stringLimit) {
		$newString = substr($string, 0, $stringLimit ) . '...';
	}
	return $newString;
}


function register_ajaxLoop_script() {
	if (is_page_template('page-browse.php') ) {
    wp_register_script(
  		'ajaxLoop',
  		get_stylesheet_directory_uri() . '/library/js/ajaxLoop.js',
  		array('jquery')
  	);
    wp_enqueue_script('ajaxLoop');
   wp_localize_script ('ajaxLoop', 'ajax_object', array( 'ajax_url' => admin_url('admin-ajax.php') ) );
  }
}
add_action('template_redirect', 'register_ajaxLoop_script');


$dirName = dirname(__FILE__);
$baseName = basename(realpath($dirName));
require_once ("$dirName/loopHandler.php");

loopHandler.php

<?php
function displaylens_callback() {
	ob_start();
	$posts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;
	$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;

	$args = array(
		'posts_per_page' 	=> $posts,
		'post_type' 		=> 'lenses',
		'paged' 			=> $page
		);
		
	cvist_announcements_bar();

	$ajax_query = new WP_Query($args); ?>
				<?php if ($ajax_query->have_posts()) : while ($ajax_query->have_posts()) : $ajax_query->the_post(); ?>

					<div class="post-entry">
						<div class="lens-img">
						<?php
						usp_display_images(); ?>
					</div> <!-- .lens-img -->
					<div class="lens-meta">
						<span class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span><br>
						<?php
						$author = get_the_author();
							echo '<span class="author-link"><a href="' . bp_core_get_user_domain(get_the_author_meta('ID') ) . '">' . $author . '</a></span><br>'; ?>
						<hr>
						<div class="lens-tags">
							<?php the_tags("", " "); ?>
						</div> <!-- .lens-tags -->
					</div><!-- .lens-meta -->
					<div class="lens-stats">
						<span class="comments-number"><?php comments_number( '<i class="fa fa-comments"></i>0', '<i class="fa fa-comments"></i>1', '<i class="fa fa-comments"></i> %'); ?></span>
					</div><!-- .lens-stats -->
						</div><!---.post-entry --><?php endwhile;

	wp_reset_postdata();
	endif;
}

add_action('wp_ajax_displaylens', 'displaylens_callback');

?>

single-lenses.php

<?php
/**
 * Template Name: Single Lens View
 * Template Description: This view is presented to the user when they click on an individual project from within the Browse/Gallery
 * @package Cvist
 * @since Cvist 2.0
 */

get_header(); ?>

<div id="main-content" class="main-content">
	<div id="primary" class="content-area">

		<div id="content" class="site-content wrap clearfix" role="main">
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

			<h1 class="page-title"><?php the_title(); ?></h1>
			<div class="lens-author-avatar">
				<?php $author_id = get_the_author_meta('ID'); ?>
				<a href="<?php echo bp_core_get_user_domain( $author_id ) ?>" title="<?php echo bp_core_get_user_displayname( $author_id ) ?>">
					<?php echo bp_activity_avatar ( array('user_id' => $author_id) ) ?>
				</a>
			</div>
			<h2 class="page-author">By <a href="<?php echo bp_core_get_user_domain(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a></h2>

			<article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix' ); ?>>

				<div class="image-wrapper">
					<?php
					$args = array(
						'post_type' => 'attachment',
						'post_mime_type' => 'image',
						'post_parent' => $post->ID
						);
					$images = get_posts( $args );
					foreach($images as $image):
						echo wp_get_attachment_image($image->ID, 'large');
					endforeach;
					?>
				</div> <!-- .image-wrapper -->
				<?php endwhile; endif; ?>
				<div class="spacer onecol"></div>
				<section id="lens-info-panel" class="fourcol">
					<h2>Description</h2>
					<p><?php
							$content = strip_tags( get_the_content(), '<p><a><h2><blockquote><code><ul><li><i><em><strong>' );
							if (empty($content) ) {
								echo "There is no description for this item";
							}else  {
								echo $content;
							} ?>
					</content>

					<section id="poi" class="clearfix">
						<h2>Points of Interest</h2>
						<p class="section-desc">These are the specific areas that <?php the_author(); ?> is looking for feedback on.</p>
						<ul class="twocol">
							<?php the_terms( $post->ID, 'point-of-interest' ); ?>
							</ul>
					</section> <!-- #poi -->

					<section id="tags">
						<?php the_tags("Tags: ", " "); ?>
					</section><!-- #tags -->

				</section> <!-- #lens-info-panel -->
			</article><!-- #post-<?php the_ID(); ?> -->

			<section id="comments">
				<h2>Active Discussion</h2>
				<hr>
				<?php
				$args = array(
					'post_id' => $post->ID
					);
				$comments = get_comments($args);

				foreach( $comments as $comment ) : ?>
				<article id="comment-<?php comment_ID(); ?>" class="comment first-level">
					<div class="author-avatar">
						<?php
							$id = $comment->user_id;
							bp_activity_avatar( array( 'user_id' => $id ) );
							?>
						</div>
					<span class="comment-author"><?php echo($comment->comment_author); ?></span>
					<p class="comment-content"><?php echo($comment->comment_content); ?></p>
				</article>
				<?php endforeach; ?>
			</section>

			<section id="comment-form">
				<?php comment_form(array(
									'title_reply' => '',
									'comment_notes_after' => '',
									'logged_in_as' => '',
									'comment_field' => '<p class="comment-form-comment"><label for="comment">Leave some feedback</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>'
									)); ?>
			</section>

	</div><!-- #content -->

	</div><!-- #main-content -->
</div><!-- #primary .content-area -->

<?php get_footer(); ?>

tumbmit.js

$(function() {
$('.btn-upload').click(function () {
	console.log('Clicked!');
    $(".fileupload input").trigger('click');
    return false;
});

$('.fileupload input[type=file]').change(function() {
    var input = $(this);
    if (input[0].files && input[0].files[0]) {
        var reader = new FileReader();
        
        reader.onload = function (e) {
            $('#image-preview')
                .attr('src', e.target.result);
        };
        
        $('.btn-upload').html('Change your photo');
        
        reader.readAsDataURL(input[0].files[0]);
    }
});
});