Triggering fluffy.js

Question

I'm trying to make a simple tumblr theme using the fluffy plugin (https://github.com/mzdr/fluffy.js) but I've ran into a problem. The plugin only executes once on page load. I'm trying to get it to work with the infinite scroll plugin (http://www.infinite-scroll.com/) and I need the fluffy plugin to trigger whenever new content loads.

I'm fairly new when it comes to JS so I appreciate any help I can get. Thanks.

Edit added code:

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src="http://static.tumblr.com/hpghjri/co2nfnr1j/infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/nxwjyyg/XWUob8gtq/fluffy.min.js"></script>

<script>

$(function(){
    app.initInfinite();
    app.onImagesLoad();       
}); //end document ready

var app = {
    'initInfinite' : function() {
        var $container = $('.page-index .posts');
        $container.infinitescroll({
            navSelector:".pagination",
            nextSelector:".pagination-next",
            itemSelector:".posts__container",
            appendCallback:true,
            loading:{
                finishedMsg:" ",
                img:"data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==",
                msg:null,
                msgText:" ",
                selector:null,
                finished:function() {

                }
            }
        },

        function(newElements) {
            var $newElems = $(newElements).css({opacity:0});

            var $newElemsIDs = $newElems.map(function() {
                return this.id;
                Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
            }).get();

            $newElems.imagesLoaded(function() {
                $newElems.animate({opacity: 1});

               //what to do when new elems appended
               // I need to trigger fluffy here
            });

            var $newElemsIDs = $newElems.map(function() {
                return this.id;
            }).get();

            Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);

        });             
    },
    'onImagesLoad' : function() {
        $('.content .posts').imagesLoaded()
            .always( function( instance ) {
                console.log('all images loaded');
                $('.overlay').addClass('hide');
                $('.overlay__preloader').attr('class', '');
            })
            .done( function( instance ) {
                console.log('all images successfully loaded');
            });            
    }
}        

</script>

It doesn't look (to me) that Fluffy has a dynamic option. You might be out of luck. — Ally, Aug 12 '16 at 16:15

score 1 · Accepted Answer · answered Aug 14 '16 at 18:59

1

This is your lucky day! I just released v2.1.0 which fixes your problem. Now you can create Fluffy objects on the fly like that:

// Start automatic detection
Fluffy.detect();

// Or provide a DOM node for single creation
var myElement = document.querySelector('#what-ever-you-like');

Fluffy.create(myElement);

// Or use a selector to create one
Fluffy.create('[data-fluffy-container]');

Don't forget to check out the updated docs.

answered Aug 14 '16 at 18:59

mzdr

388
2
12

Wow thank you!! It works perfectly! I was just about to give up on this thinking it was pointless but you just saved my day! Thank you for a great plugin!!!! – Jovil Hiew Aug 15 '16 at 07:38

Triggering fluffy.js

1 Answers1