WordPress.org

Ready to get started?Download WordPress

Forums

Infinite-Scroll
[resolved] Combine Masonry/Isotope with Manual Trigger (8 posts)

  1. throwingmarbles
    Member
    Posted 1 year ago #

    Hello,
    Your plugin works like a charm on the Sampression-lite theme, thanks! I do have one question though:

    Sampression-lite uses Isotope so I have selected the Masonry/Isotope behaviour in your plugin's settings. (Other settings naturally cause the loaded content to overlap the existing one) However, I would like to have a manual trigger to load the content, rather than the auto-load on scrolling down the page.

    Is is possible to combine the Manual Trigger with the Masonry/Isotope behaviour and if so, could you tell me how I should go about implementing it?

    Kindest regards,
    Marloes

    http://wordpress.org/extend/plugins/infinite-scroll/

  2. muudles1
    Member
    Posted 1 year ago #

    Hi, I would love to know as well. Could you please kindly post a solution?

  3. throwingmarbles
    Member
    Posted 1 year ago #

    Hi,
    I added a third function to manual-trigger.js:

    ,
    _callback_twitter: function infscr_callback_masonry (newElements) {
    	$(this).masonry('appended',$(newElements));
    }

    Seems to do the trick. Hope it works for you as well! If so, will you please mark this as resolved?

    Regards,
    Marloes

  4. muudles1
    Member
    Posted 1 year ago #

    Thanks for that Marloes, just want to make sure - do I select the "Manual Trigger" option and add your code into manual-trigger.js?

  5. throwingmarbles
    Member
    Posted 1 year ago #

    Yes, that should work. By the way, I just made a small edit to replace "isotope" with "masonry" in the above post, just like it is in the original script.

    The entire script reads:

    /*
    	--------------------------------
    	Infinite Scroll Behavior
    	Manual / Twitter-style
    	--------------------------------
    	+ https://github.com/paulirish/infinitescroll/
    	+ version 2.0b2.110617
    	+ Copyright 2011 Paul Irish & Luke Shumard
    	+ Licensed under the MIT license
    
    	+ Documentation: http://infinite-scroll.com/
    
    */
    
    (function($, undefined) {
    	$.extend($.infinitescroll.prototype,{
    
    		_setup_twitter: function infscr_setup_twitter () {
    			var opts = this.options,
    				instance = this;
    
    			// Bind nextSelector link to retrieve
    			$(opts.nextSelector).click(function(e) {
    				if (e.which == 1 && !e.metaKey && !e.shiftKey) {
    					e.preventDefault();
    					instance.retrieve();
    				}
    			});
    
    			// Define loadingStart to never hide pager
    			instance.options.loading.start = function (opts) {
    				opts.loading.msg
    					.appendTo(opts.loading.selector)
    					.show(opts.loading.speed, function () {
    						instance.beginAjax(opts);
    					});
    			}
    		},
    		_showdonemsg_twitter: function infscr_showdonemsg_twitter () {
    			var opts = this.options,
    				instance = this;
    
    			//Do all the usual stuff
    			opts.loading.msg
    				.find('img')
    				.hide()
    				.parent()
    				.find('div').html(opts.loading.finishedMsg).animate({ opacity: 1 }, 1000, function () {
    					$(this).parent().fadeOut('slow');
    				});
    
    			//And also hide the navSelector
    			setTimeout(function() {
          			$(opts.navSelector).fadeOut("slow");
          		}, 1000);
    
    			// user provided callback when done
    			opts.errorCallback.call($(opts.contentSelector)[0],'done');
    
    		},
    		_callback_twitter: function infscr_callback_masonry (newElements) {
    			$(this).masonry('appended',$(newElements));
    		}
    
    	});
    })(jQuery);

    Good luck!
    Marloes

  6. muudles1
    Member
    Posted 1 year ago #

    Hi Marloes, I'm afraid that didn't do anything for me. I get an error in my console saying "Uncaught TypeError: Object [object Object] has no method 'isotope' " (I'm using isotope)

    I'm beginning to think I've missed a step, am I suppose to initialise isotope somewhere else?

    I tried adding this into my dom.ready:

    var container = $('#infinite-wrapper');
    
    	$(container).isotope({
    	  itemSelector : '.infinite-item',
    	  layoutMode : 'fitRows'
    	});

    Although it makes the .infinite-items on initial page load masonry, it doesn't apply to the additional items after manually trigger for more. It also still gives me the same error in console.

    Any ideas?

  7. muudles1
    Member
    Posted 1 year ago #

    Ah, I've figured it out - I accidentally called jquery twice, now it's all fixed! Thank you SO MUCH!

  8. throwingmarbles
    Member
    Posted 1 year ago #

    Glad you got it to work! :-)

    I just ran into the next problem: Implementing the imagesLoaded script... That might be a whole new thread in itself, if I can't figure it out in a few days.

    Regards,
    Marloes

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic