Auto load of photos – No More Load Button

Hey guesssilk,

The plugin doesn’t contain an auto-load feature currently, but I’ve put together a JavaScript snippet for you which should help create this functionality by combining the jQuery scroll event with the jQuery trigger function, so that as you scroll down the page then it triggers a click on the ‘Load More’ button. Try adding the following to the plugin’s Custom JavaScript section (Customize > Custom JavaScript) and see whether it works for you:

var scrolled = 0;
jQuery(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 250;
    if(y_scroll_pos > scroll_pos_test) {
        scrolled++;
        if(scrolled == 1) jQuery( ".sbi_load_btn" ).trigger( "click" );
    }
});

You’d need to enable the Load More button in order for it to work. You may need to tweak the numbers a bit, but should hopefully get you pretty close.

John

Hi John,

Negative. Still the same as it was. But thank you for the attempt.

Forgive me, it does work… just on mobile devices. Is there a way to encapsulate it like on the Twitter feed I have?

https://www.themeparkconnect.com/social-media/

Thanks!

Hi guesssilk,

John is out for the night so I thought I would jump in here. You can get the Instagram Feed to line up with your other widgets in the footer by setting the height to 710px in the Settings page, “Customize” tab.

Your theme may also need some additional CSS to make the overflow scrollable instead of allowing it to bleed out to be larger than that height. On the “Customize” tab, you can scroll down to the “Custom CSS” area and paste in this code if that is the case:

#sb_instagram { overflow: scroll; }

Did you still need anything with the auto load functionality you were asking about or is that working like you hoped?

Craig, this helps a lot for mobile. What about web browsers? None of them will allow me to scroll in that space.

Hello again,

It looks like the 710px width with scrolling and load more on scroll is working when I visited your page in my Chrome desktop browser. Are you seeing something different?

Hi Craig,

In several browsers you have to hit “Load More…” and then it will stay in its style sheet. But automatically it doesn’t lost more photos like the Twitter feed next to it. On a mobile device it does work correctly, just not on a desktop computer. Thank you.

I think I see what you mean now. You can try replacing that code with the following:

jQuery('#sb_instagram').on('scroll', function() {
    var y_scroll_pos = jQuery('#sb_instagram').scrollTop();
    var scroll_pos_test = 250;
    sbi_delay(function(){
      if(y_scroll_pos > scroll_pos_test) {
        jQuery( ".sbi_load_btn" ).trigger( "click" );
      }
    }, 500);
});
var sbi_delay = (function(){
    var sbi_timer = 0;
        return function(sbi_callback, sbi_ms){
        clearTimeout (sbi_timer);
        sbi_timer = setTimeout(sbi_callback, sbi_ms);
    };
})();

That should get it going.

Negative. Still have the same with my browsers. Thanks!

When I take a look at the source of your page it is still showing the old code in the custom javascript area (https://snag.gy/47H5p.jpg). Is it possible that the changes didn’t save?

Sorry, when it didn’t work I reverted back to the somewhat working code. I’ve reapplied it. Please let me know, thank you.

Sorry about this I thought the code would work fine without the previous bit of code. I believe it will work if you add it back in. So add this below the existing code:

var scrolled = 0;
jQuery(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 250;
    if(y_scroll_pos > scroll_pos_test) {
        scrolled++;
        if(scrolled == 1) jQuery( ".sbi_load_btn" ).trigger( "click" );
    }
});

Sorry about the mix up!

OK, just added the code below. Now mobile will not work as well as the browsers continue to not work as well. Please keep me posted. Thanks.

PS This code is being entered in the “Custom JavaScript” and not the “Custom CSS” correct?

Hello again,

It looks like the quotes and double quotes were encoded somehow when you pasted them. Try replacing everything in the “Custom Javascript” area by copying and pasting the following:

var scrolled = 0;
jQuery(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 250;
    if(y_scroll_pos > scroll_pos_test) {
        scrolled++;
        if(scrolled == 1) jQuery( ".sbi_load_btn" ).trigger( "click" );
    }
});

jQuery('#sb_instagram').on('scroll', function() {
    var y_scroll_pos = jQuery('#sb_instagram').scrollTop();
    var scroll_pos_test = 250;
    sbi_delay(function(){
      if(y_scroll_pos > scroll_pos_test) {
        jQuery( ".sbi_load_btn" ).trigger( "click" );
      }
    }, 500);
});
var sbi_delay = (function(){
    var sbi_timer = 0;
        return function(sbi_callback, sbi_ms){
        clearTimeout (sbi_timer);
        sbi_timer = setTimeout(sbi_callback, sbi_ms);
    };
})();

Negative. Not working at all on either platform.