Question

Problem: I have implemented an infinitescroll plugin in my rails app, along with JQuery Masonry. It works perfectly but I am facing one little problem: starting from the second page, the hover function does not get triggered. This problem is very similar to this post on Stackoverflow. I’m supposed to call my hover function again after the Masonry callback.

My original code:

<script>    
$(function () {
    var $container = $('#container_masonry');

    $container.infinitescroll({
        navSelector: '.pagination'
        nextSelector: '.pagination a',
        itemSelector: '.image_masonry'
        loading: {
        finishedMsg: 'Done loading'
        img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
        // trigger Masonry as a callback
        function(newElements) {
            //hide new items while loading
            var $newElems = $(newElements).css({ opacity: 0 });
            //images must be loaded completely before adding to layout
            $newElems.imagesLoaded(function(){
                //they are loaded and ready to be showed
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );  
            });
        }
    );

    $container.imagesLoaded(function(){
        $container.masonry({
        itemSelector: '.image_masonry',
        columnWidth: 10,
        isAnimated: true,
        animationOptions: { duration: 400 },
        isResizable: true,
        isFitWidth: true
        });

        $('.image_masonry').hover(
        function(){
        $('.title',this).fadeIn();
        $('.like_num',this).show();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }, function(){
        $('.title',this).fadeOut();
        $('.like_num',this).hide();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }); 
    });

});
</script>

I should add the following,

        $('.image_masonry').hover(
        function(){
        $('.title',this).fadeIn();
        $('.like_num',this).show();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }, function(){
        $('.title',this).fadeOut();
        $('.like_num',this).hide();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        });

to right after,

            $newElems.imagesLoaded(function(){
                //they are loaded and ready to be showed
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
                //ADD HOVER FCN HERE

However, simply adding the whole hover function did not work. I’m new to jQuery so I’m not entirely sure, but I need to pass in the related variables along with the function for it to work (got this hint from the similar post. So I should add something like

        $('.image_masonry').hover(
        function(SOME-RELATED-VARIABLES){
        $('.title',this).fadeIn();
        $('.like_num',this).show();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }, function(SOME-RELATED-VARIABLES){
        $('.title',this).fadeOut();
        $('.like_num',this).hide();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        });

But I need someone to teach me what I should put in there. I’m struggling because of my lack of familiarity with jQuery. I appreciate your help a lot!

Answer 1

You were missing some commas between rows 5-11. Also if you’re loading external content at a later time, you need to delegate the hover event with on or delegate depending on your version. I added on below.

$(function () {
  var $container = $('#container_masonry');

  $container.infinitescroll({
    navSelector: '.pagination',
    nextSelector: '.pagination a',
    itemSelector: '.image_masonry',
    loading: {
      finishedMsg: 'Done loading',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function (newElements) {
    //hide new items while loading
    var $newElems = $(newElements).css({
      opacity: 0
    });
    //images must be loaded completely before adding to layout
    $newElems.imagesLoaded(function () {
      //they are loaded and ready to be showed
      $newElems.animate({
        opacity: 1
      });
      $container.masonry('appended', $newElems, true);
    });
  });

  $container.imagesLoaded(function () {
    $container.masonry({
      itemSelector: '.image_masonry',
      columnWidth: 10,
      isAnimated: true,
      animationOptions: {
        duration: 400
      },
      isResizable: true,
      isFitWidth: true
    });

    $('body').on({
      mouseenter: function () {
        $('.title', this).fadeIn();
        $('.like_num', this).show();
        var buttonDiv = $(this).children('.button');
        buttonDiv.toggle();
      },
      mouseleave: function () {
        $('.title', this).fadeOut();
        $('.like_num', this).hide();
        var buttonDiv = $(this).children('.button');
        buttonDiv.toggle();
      }
    }, '.image_masonry');
  });

});