如何將Instafeed應用於cubeportfolio？

Question

我這個問題已經好幾天了，但是我不知道該怎么辦。 因此，我嘗試從instafeed添加圖像，而不是將其靜態放入HTML或從數據庫獲取數據，因為我希望圖片與instagram個人資料相同。

這是我到目前為止嘗試過的

/*-------------------------------------------------*/
/* =  Instafeed
/*-------------------------------------------------*/    
try {
    var userFeed = new Instafeed({
        get: 'user',
        userId: settings.userId,
        clientId: settings.clientId,
        accessToken: settings.accessToken,
        resolution: 'standard_resolution',
        limit: 8,
        template: '<div class="cbp-item ig"><a href="{{link}}" target="_blank" class="cbp-caption"><div class="cbp-caption-defaultWrap"><img src="https:{{image}}" alt="{{image}}"></div><div class="cbp-caption-activeWrap"><div class="cbp-l-caption-alignCenter"><div class="cbp-l-caption-body"><div class="cbp-l-caption-title">{{location}}</div><div class="cbp-l-caption-desc">{{caption}}</div></div></div></div></a></div>',
    });
    userFeed.run();
} catch(err) {

}

上面是instafeed的代碼，我已經使template來自cubeportfolio。 下面是cubeportfolio js。

// PortfolioGrid
$('#js-grid').cubeportfolio({
    filters: '#js-filters',
    layoutMode: 'grid',
    sortToPreventGaps: true,
    mediaQueries: [{
        width: 1500,
        cols: 3
    }, {
        width: 1100,
        cols: 3
    }, {
        width: 800,
        cols: 3
    }, {
        width: 480,
        cols: 2
    }, {
        width: 320,
        cols: 1
    }],
    defaultFilter: '*',
    animationType: 'sequentially',
    gapHorizontal: 15,
    gapVertical: 15,
    caption: 'zoom',
    displayType: 'sequentially',
    displayTypeSpeed: 100
});

它確實出現在網站上， but only在inspect element但是圖像在那里。 這是檢查元素上的代碼

如您所見，它確實出現了，但是問題是cubeportfolio向此類項目添加了樣式（如果我直接放在HTML文件上，它的確會出現）。 下面是來自inspect元素的圖像，您可以看到第一個項目具有樣式，並且由cubeportfolio動態添加。

那么，如何使instafeed中的那些物品從cubeportfolio中獲得樣式呢？ 我已經嘗試將cubeportfolio放入instafeed js中，因此，當instafeed完成時，它將啟動cubeportfolio，但仍然無法正常工作。

我感謝任何幫助，謝謝

編輯：

即使在嘗試在instafeed之后運行cubeportfolio之后，它仍然無法正常工作

function cubePortfolioFunc() {
    $('#js-grid').cubeportfolio({
        filters: '#js-filters',
        layoutMode: 'grid',
        sortToPreventGaps: true,
        mediaQueries: [{
            width: 1500,
            cols: 3
        }, {
            width: 1100,
            cols: 3
        }, {
            width: 800,
            cols: 3
        }, {
            width: 480,
            cols: 2
        }, {
            width: 320,
            cols: 1
        }],
        defaultFilter: '*',
        animationType: 'sequentially',
        gapHorizontal: 15,
        gapVertical: 15,
        caption: 'zoom',
        displayType: 'sequentially',
        displayTypeSpeed: 100
    }); 
} 

function instaFeedFunc(callback) {
    try {
        var userFeed = new Instafeed({
            get: 'user',
            userId: settings.userId,
            clientId: settings.clientId,
            accessToken: settings.accessToken,
            resolution: 'standard_resolution',
            limit: 8,
            template: '<div class="cbp-item ig"><a href="{{link}}" target="_blank" class="cbp-caption"><div class="cbp-caption-defaultWrap"><img src="https:{{image}}" alt="{{image}}"></div><div class="cbp-caption-activeWrap"><div class="cbp-l-caption-alignCenter"><div class="cbp-l-caption-body"><div class="cbp-l-caption-title">{{location}}</div><div class="cbp-l-caption-desc">{{caption}}</div></div></div></div></a></div>',
        });
        userFeed.run();
    } catch(err) {
        console.log(err);
    } 
}

(function ($) {
    "use strict";

    instaFeedFunc(cubePortfolioFunc());
}(jQuery));

編輯：

<!-- Portfolio -->
<section class="p0">
    <div class="container-fluid">
        <div class="row">    
            <div class="portfolio-no-gutter-fullwidth cbp" id="js-grid"></div>           
        </div>
    </div>
</section>            
<!-- End Portfolio -->  

Answer 1

嘗試在Instafeed的后功能中初始化多維數據集，如下所示：
編輯：添加了我的代碼，請與您的代碼和您的客戶端ID進行比較，並訪問令牌，它在我的系統中對我有用

 var userFeed = new Instafeed({ get: 'user', tagName: 'instafeed', userId: settings.userId, clientId: settings.clientId, accessToken: settings.accessToken, resolution: 'standard_resolution', limit: 8, template: '<div class="cbp-item ig"><a href="{{link}}" target="_blank" class="cbp-caption"><div class="cbp-caption-defaultWrap"><img src="https:{{image}}" alt="{{image}}"></div><div class="cbp-caption-activeWrap"><div class="cbp-l-caption-alignCenter"><div class="cbp-l-caption-body"><div class="cbp-l-caption-title">{{location}}</div><div class="cbp-l-caption-desc">{{caption}}</div></div></div></div></a></div>', after: function () { // PortfolioGrid $('#instafeed').cubeportfolio({ filters: '#instafeed', layoutMode: 'grid', sortToPreventGaps: true, mediaQueries: [{ width: 1500, cols: 3 }, { width: 1100, cols: 3 }, { width: 800, cols: 3 }, { width: 480, cols: 2 }, { width: 320, cols: 1 }], defaultFilter: '*', animationType: 'sequentially', gapHorizontal: 15, gapVertical: 15, caption: 'zoom', displayType: 'sequentially', displayTypeSpeed: 100 }); } }); userFeed.run(); 

 <link type="text/css" rel="stylesheet" href="cubeportfolio.min.css" media="screen,projection"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="./instafeed.min.js"></script> <script type="text/javascript" src="http://scriptpie.com/cubeportfolio/live-preview/cubeportfolio/js/jquery.cubeportfolio.min.js"></script> <!-- Portfolio --> <section class="p0"> <div class="container-fluid"> <div class="row"> <div class="portfolio-no-gutter-fullwidth cbp" id="instafeed"></div> </div> </div> </section> <!-- End Portfolio -->