plumwd

Infinite Scroll and Masonry

Sep 18th, 2012
158
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 1.28 KB | None | 0 0
  1. function custom_masonry_js() { ?>
  2. <script type="text/javascript">
  3.  
  4.   jQuery(document).ready(function(){
  5.  
  6.     var $container = jQuery('#sort');
  7.    
  8.     $container.imagesLoaded(function(){    
  9.       $container.masonry({
  10.         itemSelector: '.box',
  11.         columnWidth: 100
  12.       });
  13.     });
  14.    
  15.     $container.infinitescroll({
  16.       navSelector  : '.navigation',    // selector for the paged navigation
  17.       nextSelector : '.navigation .nav-previous a',  // selector for the NEXT link (to page 2)
  18.       itemSelector : '.box',     // selector for all items you'll retrieve
  19.       loading: {
  20.           finishedMsg: 'No more pages to load.',
  21.           img: 'http://www.stemtechtestimonials.com/wp-content/themes/shaken-grid-free/images/ajax-loader.gif'
  22.         }
  23.       },
  24.       // trigger Masonry as a callback
  25.       function( newElements ) {
  26.         // hide new items while they are loading
  27.         var $newElems = jQuery( newElements ).css({ opacity: 0 });
  28.         // ensure that images load before adding to masonry layout
  29.         $newElems.imagesLoaded(function(){
  30.           // show elems now they're ready
  31.           $newElems.animate({ opacity: 1 });
  32.           $container.masonry( 'appended', $newElems, true );
  33.         });
  34.       }
  35.     ); 
  36.  
  37.   });
  38. </script>
  39.     <?php
  40. }
Advertisement
Add Comment
Please, Sign In to add comment