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元素

的代码

正如你所看到它确实出现但问题是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的功能之后初始化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？

1 个答案: