Добавьте кнопку «Показать меньше» в InstafeedJS - PullRequest
Новая
       28

Добавьте кнопку «Показать меньше» в InstafeedJS

0 голосов
/ 01 октября 2018

Используя InstafeedJS, я хочу иметь возможность добавить кнопку, которая скрывает любой контент, загруженный после первоначальной подачи (например, пользователь нажал «Показать больше» один или несколько раз).Моя первоначальная идея - добавить класс или тег данных к дополнительным элементам канала, а затем скрыть их с помощью пользовательской кнопки.Но я не уверен, как добавить эти ссылки через скрипт.Есть идеи?

Текущий код: 

      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="{{link}}" data-modal="instagram-popup" data-caption="{{caption}}" data-image="{{image}}" style="background-image: url({{image}});"></span></li>',
          after: function() {
              if (!this.hasNext()) {
                  loadButton.setAttribute('disabled', 'disabled');
              }
          }
      });

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

      feed.run();

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Хотя ответ Дипена и велик, так как вы, похоже, не используете jQuery, здесь он представлен в стандартных Js 

var limit = 4;
var feed = new Instafeed({
  target: 'instafeed',
  get: 'user',
  type: 'image',
  sortBy: 'most-recent',
  limit: limit,
  resolution: 'standard_resolution',
  userId: <?php echo $instagram_id; ?>,
  accessToken: '<?php echo $instagram_token; ?>',
  template: '<img class="instagram-post" src={{image}} />',
  after: function() {
    if (!this.hasNext()) {
      document.getElementById('btnMore').attr('disabled', 'disabled');
    }
  }
});

document.getElementById('btnMore').on('click', function(e) {
  document.getElementsByClassName("instagram-post:nth-child(n+" + (1 + limit) + ")").show();
  feed.next();
});

document.getElementById('btnLess').on('click', function(e) {
  document.getElementsByClassName("instagram-post:nth-child(n+" + (1 + limit) + ")").hide();
});

feed.run();

(PS Поскольку я только "JQueryified", он для вас принимается какответ не мой.)

0 голосов
/ 05 октября 2018

Вы можете добавить ссылки через скрипт или добавить пользовательский атрибут данных на загруженные элементы (есть несколько способов добиться того, что вы хотите), но, по моему мнению, вы можете использовать селектор CSS, чтобы выбрать все элементы, загруженные после первоначальной подачи и применитьнекоторые стили (скрыть) их, как показано в фрагменте кода ниже. 

var limit = 4;
var feed = new Instafeed({
  target: 'instafeed',
  get: 'user',
  type: 'image',
  sortBy: 'most-recent',
  limit: limit,
  resolution: 'standard_resolution',
  userId: <?php echo $instagram_id; ?>,
  accessToken: '<?php echo $instagram_token; ?>',
  template: '<img class="instagram-post" src={{image}} />',
  after: function() {
    if (!this.hasNext()) {
      $('#btnMore').attr('disabled', 'disabled');
    }
  }
});

$('#btnMore').on('click', function(e) {
  $(".instagram-post:nth-child(n+" + (1 + limit) + ")").show();
  feed.next();
});

$('#btnLess').on('click', function(e) {
  $(".instagram-post:nth-child(n+" + (1 + limit) + ")").hide();
});

feed.run();
.instagram-post {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 15px;
}
<div id="instafeed"></div>

<button id="btnMore">Load More...</button>
<button id="btnLess">Show Less...</button>

Изменить код в соответствии с вашими потребностями.

Объяснение:

Вобработчик события щелчка $('#btnLess') Я выбираю все изображения с классом .instagram-post из индекса limit + 1 и скрываю их.

В обработчике события щелчка $('#btnMore') я проверяю вседоступные изображения в ленте видны, так что всякий раз, когда я нажимаю его после нажатия $('#btnLess'), все ранее загруженные изображения в ленте также видны.

Надеюсь, это поможет.

...