[英]Add a “Show Less” button to InstafeedJS
使用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();
盡管Dipen的答案很好,但您似乎並沒有使用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();
(附言:由於我只對“ JQueryified”進行了解密,因此您接受他作為答案,而不是我的答案。)
您可以通過腳本添加引用,也可以在加載的元素上添加自定義數據屬性(有多種方法可以實現所需的功能),但在我看來,您可以使用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')
的click事件處理程序中,我從索引limit + 1
選擇所有類為.instagram-post
圖像,並將其隱藏。
在$('#btnMore')
的click事件處理程序中,我確保提要中的所有可用圖像都是可見的,以便在按$('#btnLess')
后在提要中所有以前加載的圖像時按一下它也可見。
希望能幫助到你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.