Make instagram html feed static (Instafeed + Gridrotator)

StackOverflow https://stackoverflow.com/questions/23320801

Question 

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

I would like to combine INSTAFEED.JS + GRIDROTATOR.JS Both are working instafeed can pull images, grid rotator can shuffle images but only when i put STATIC html in it. Is there a way to make the data pulled by instafeed from instagram a static html. Like when you echo some posts on php?

Was it helpful?

Solution 

<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top