使instagram html feed静态(Instafeed + Gridrotator)

时间:2014-04-27 07:55:07

标签: javascript jquery api instagram

//** INSTA FEED **/// 

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

        });

        userFeed.run();
</script>

//*** GRIDROTATOR ***//
     <section class="grid">
    <div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
            <img src="<?php echo get_template_directory_uri(); ?>/images/loadinggrid.gif" class="ri-loading-image">
                    <ul id="instafeed">
                          <HTML IMAGES HERE>
                    </ul>
                </div>
     </section>

        <script type="text/javascript"> 
            $(function() {
        $( '#ri-grid' ).gridrotator( {
                    w320 : {
                        rows : 3,
                        columns : 4
                    },
                    w240 : {
                        rows : 3,
                        columns : 3
                    },
                    nochange : [0,1,2,3],
                    preventClick : false
                } );

            });

        </script>

我想结合使用INSTAFEED.JS + GRIDROTATOR.JS两者都工作instafeed可以拉图像,网格旋转器可以洗牌图像,但只有当我把STATIC html放在其中。有没有办法通过从一个静态html的instafeed拉取数据。就像你在php上回复一些帖子一样?

1 个答案:

答案 0 :(得分:0)

<script type="text/javascript">
        var userFeed = new Instafeed({
            get: 'user',
            userId: ******,
            limit: 28,
            accessToken: '***************',
            template: '<li><a href="{{link}}"><img src="{{image}}" /></a></li>',
            after: function() {
                  $( '#ri-grid' ).gridrotator( {
                    w320 : {
                        rows : 3,
                        columns : 4
                    },
                    w240 : {
                        rows : 3,
                        columns : 3
                    },
                    nochange : [0,1,2,3],
                    preventClick : false
                } );
            }
        });

        userFeed.run();
</script>