使用网格Rotator.js的Instagram feed

Question

<script type="text/javascript">
var userFeed = new Instafeed({
    get: 'user',
    userId: **********,
    accessToken: '*************',
       template: '<a href="{{link}}"><img src="{{image}}" /></a>'

});

userFeed.run();
$('#instafeed').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});

​

    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.gridrotator.js"></script>

    <script type="text/javascript"> 
        $(function() {
$( '#instafeed' ).gridrotator( {
                animSpeed : 300,
                animType : 'rotateBottom',
                w320 : {
                    rows : 3,
                    columns : 4
                },
                w240 : {
                    rows : 3,
                    columns : 3
                },
                slideshow : false,
                onhover : true
            } );

    </script>

我正在尝试创建一个具有旋转效果的instagram feed，所以我使用了instafeed.js和gridrotator.js，但它似乎不起作用。

Answer 1

它对我来说很有效：

var feed = new Instafeed({
    clientId: '***********',
    get: 'tagged',
    tagName: 'food',
    resolution: 'standard_resolution',
    sortBy: 'most-recent',
    limit: 60,
    template: '<li class="square-insta"><a href="{{link}}"><img src="{{image}}" /></a></li>',
    after: function() {
        $( '#ri-grid' ).gridrotator( {
            rows        : 4,
            columns     : 5,
            animType    : 'fadeInOut',
            animSpeed   : 1000,
            interval    : 600,
            step        : 1,
            w320        : {
                rows    : 3,
                columns : 4
            },
            w240        : {
                rows    : 3,
                columns : 4
            }
        } );
    }
});

feed.run();

和你的HTML：

<section class="instagram ri-grid ri-grid-size-2" id="ri-grid">

          <ul id="instafeed">

          </ul>
</section>