Lazyload and isotope

[gablabelle]

OK I'm building a new portfolio for myself at http://www.gablabelle.com/ and I'm using your lazyload plugin with isotope to showcase my images. It works great when I scroll down the page but it seems like the images don't show up when filtering without having previously scrolled down. If i scroll down nothing happens.

It's acting like it doesn't consider the images to actually be in viewport (because of isotope).

If I put a high number to failure_limit (like 100 or 1000) it will actually show the images after filtering if I scroll a bit.

Is there something I can do to solve this?

Many thanks.

[benjaminsehl]

Depending on how you're issuing your filters, you may wish to trigger a +1 & -1 scroll with jQuery on filter click.

[gablabelle]

@Whoisbenjamin I'm already animating

    $("ul.menu a[href*=category]").click(function(event) {
        event.preventDefault();
        var cat = $(this).parent().attr("class");
        $container.isotope({ filter: "."+cat });
        $("ul.menu a").removeClass("active");
        $(this).addClass("active");
        setTimeout(function() {
            $("html, body").stop().animate({
                scrollTop: 0
            }, 1000);
        }, 100);
        return false;
    });

But it doesn't work only if the page is already at Top position.

[benjaminsehl]

Feel free to use the simple little function I created:

function forceLoad(){
$.scrollTo('+=1px');
$.scrollTo('-=1px');
}

May not be graceful, but get's the job done and not a hog.

[gablabelle]

Thanks ... OK if I use the following :

    function forceLoad(){
                alert('function ok');
        $.scrollTo('+=1px');
        $.scrollTo('-=1px');
    };
    $("ul.menu a[href*=category]").click(function(event) {
        event.preventDefault();
        var cat = $(this).parent().attr("class");
        $container.isotope({ filter: "."+cat });
        $("ul.menu a").removeClass("active");
        $(this).addClass("active");
        forceLoad();
        setTimeout(function() {
            $("html, body").stop().animate({
                scrollTop: 0
            }, 1000);
        }, 100);
        return false;
    });

It works but if I remove the alert it doesn't work anymore :-/

[gablabelle]

@Whoisbenjamin This works. THANK YOU!

    function forceLoad(){
        $.scrollTo('+=1px');
        $.scrollTo('-=1px');
    };
    $("ul.menu a[href*=category]").click(function(event) {
        event.preventDefault();
        var cat = $(this).parent().attr("class");
        $container.isotope({ filter: "."+cat });
        $("ul.menu a").removeClass("active");
        $(this).addClass("active");
        setTimeout(function() {
            $("html, body").stop().animate({
                scrollTop: 0
            }, 1000);
            forceLoad();
        }, 100);
        return false;
    });

[gablabelle]

@Whoisbenjamin Well it only works if the page is still bigger than viewport (so it can actually scroll) :-/

If you try the Corporatif filter menu it won't work because the page can't scroll. Does it make sense?

[benjaminsehl]

Not sure I understand.

Here is how I implemented it … there is a bulk of extra code in there as I'm doing a sort of inverse :active state for the other filters, and have implemented jQuery BBQ for permalinks.

Hope this helps.

$('#filters_select').change(function(){
            var value = $(this).find(":selected").val();
            if(value == ""){
                $.bbq.pushState('',2);
                $container.isotope({ filter: '*' });            
                updateSelect("All Categories");
                $("#menu-work_filters a, #menu-people_filters a").each(function() {
                    $(this).removeClass('current'); 
                    $(this).removeClass('deactivated'); 
                });                     
                return false;               
            }
            else{
                var href = value.replace( /^#/, '' ),
                option = $.deparam( href, true );
                $.bbq.pushState( option );
                var hashOptions = $.deparam.fragment();
                $container.isotope( hashOptions, forceLoad );
                $("#menu-work_filters a, #menu-people_filters a").each(function() {
                    if($(this).attr("href")==value){
                        $(this).addClass('current');
                        $(this).removeClass('deactivated');
                        $("#menu-work_filters a, #menu-people_filters a").not(this).each(function() {
                            $(this).removeClass('current');
                            $(this).addClass('deactivated');
                        });     
                    }
                });
            }
        }); 

[gablabelle]

OK got it ! I used I setTimout to make sure the scroll would occur before the page becomes smaller than the viewport. Thanks!

[gablabelle]

Hey @Whoisbenjamin the solution doesn't work in Safari... On your site neither, I just checked.

[tuupola]

Have not tried with isotope but have you tried triggering scroll on window?

 $(window).trigger("scroll");

[gablabelle]

@tuupola Thanks it works!