Saturday, 6 October 2018

Add a "Show Less" button to InstafeedJS

Using InstafeedJS, I want to be able to add a button that hides whatever content has been loaded after the initial feed (e.g. the user has clicked Show More one or more times). My initial idea is to add a class or data tag to the additional feed items, then hide them with a custom button. But I'm not sure how to add these references through the script. Any ideas?

Current code:

      var loadButton = document.getElementById('instafeed-loadmore');

      var feed = new Instafeed({
          get: 'user',
          type: 'image',
          limit: '5',
          sortBy: 'most-recent',
          resolution: 'standard_resolution',
          userId: <?php echo $instagram_id; ?>,
          accessToken: '<?php echo $instagram_token; ?>',
          template: '<li><span class="instagram-post" data-url="" data-modal="instagram-popup" data-caption="" data-image="" style="background-image: url();"></span></li>',
          after: function() {
              if (!this.hasNext()) {
                  loadButton.setAttribute('disabled', 'disabled');
              }
          }
      });

      loadButton.addEventListener('click', function() {
          feed.next();
      });

      feed.run();



from Add a "Show Less" button to InstafeedJS

No comments:

Post a Comment