jquery - CubePortfolio で Instafeed を適用する方法は?

Question

私はこの問題を数日間抱えていますが、どうすればよいかわかりません。そのため、画像をInstagramのプロフィールと同じにしたいので、HTMLに静的なものを入れるか、データベースからデータを取得する代わりに、instafeedから画像を追加しようとしました。

これは私がこれまでに試したことです

/*-------------------------------------------------*/
/* =  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 のコードで、私は既に cubeportfoliotemplateから作成しています。以下は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 によって動的に追加されていることがわかります。

では、キューブポートフォリオからスタイルを得たインスタフィードのアイテムを作成するにはどうすればよいでしょうか? 私はすでに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 -->