如何在cubeportfolio中应用Instafeed？

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 中，但图像在那里。这是 inspect element

上的代码

如您所见，它确实出现了，但问题是 cubeportfolio 像这样向这些项目添加样式（如果我直接放在 HTML 文件上，它确实会出现）。下面是来自 inspect element 的图像，您可以看到第一个项目上有样式，它是由 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 的后函数中初始化 cubeportfolio，如下所示：
编辑： 添加了我的代码，请将它与您的代码与您的客户端 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 -->

如何在cubeportfolio中应用Instafeed？

How to apply Instafeed in cubeportfolio?

html

jquery

instafeedjs