jqueryhtmlinstafeedjs

How to apply Instafeed in cubeportfolio?

I've this problem for several days, but I don't know what to do. So I tried to add image from instafeed instead put static in HTML or getting data from database, because I want the picture is the same with the instagram profile.

This is what I've tried so far

/*-------------------------------------------------*/
/* =  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) {

}

Above is the code of instafeed and I already make the template is from the cubeportfolio. and below is the 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
});

It does appear on the website but only in inspect element but the image is there. Here is the code on inspect element

enter image description here

As you can see it does appear but the problem is cubeportfolio adding style to those items like this (If I put directly on the HTML files it does appear). Below is the image from inspect element, as you can see the first item has style on it, and it's dynamically added by cubeportfolio.

enter image description here

So how to make those items from the instafeed got style from the cubeportfolio? I already tried put the cubeportfolio in the instafeed js, so when instafeed finish, then it'll start cubeportfolio, but it still doesn't working.

I appreciate any kind of helps, thank you

EDITED:

Even after I tried to run cubeportfolio after instafeed, it still doesn't working

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));

EDITED:

<!-- 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 -->
Solution

  • Try to intialize cubeportfolio in after function of Instafeed like below:
    Edit: added my code please compare it with your code with your client id and access token it's working for me in my system 

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