clipbucket/upload/styles/cbv3/layout/photos.html

{assign var=type value='p'}
<div id="collection-photos-container">
{foreach $photos as $photo}
   {include_template_file file="blocks/photo.html" photo=$photo display_method='view_collection' add_collection_name=true}
{/foreach}

</div>
<div class="height100 clearfix"></div>
{include_template_file file='/blocks/pagination.html'}
<script type="text/javascript">
    $( document ).ready(function(){
        var $container = $('#collection-photos-container');
        
        $('#collection-photos-container').imagesLoaded( function(){
            $('#collection-photos-container').masonry({
                // options
                itemSelector : '.view-collection-photos'
            });
        });
        
    $('#collection-photos-container').infinitescroll({
      navSelector  : 'div#paged-pagination',    // selector for the paged navigation 
      nextSelector : 'div#paged-pagination a.next-page-link',  // selector for the NEXT link (to page 2)
      itemSelector : '.view-collection-photos',     // selector for all items you'll retrieve
      },
      // 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 });
          $('#collection-photos-container').masonry( 'appended', $newElems, true ); 
        });
        });
    });      
</script>