Gridster for Instagram

Danny Wahl's picture Danny Wahl  •   •  Portfolio

Gridster for instagram v1.0

Gridster for instagram is the easiest way to get a customized, full-screen, display of any instagram feed. As its name implies, Gridster loads the images you want into a photo wall and animates through them.

Installation

Navigate to the assets/js folder open the Gridster.js file and enter your clientID on line 1.

Usage

Simply open / in your browser and Gridster will display the most popular images on instagram. Click on the hashtag to enter full-screen mode.

Customization

There are two ways to customize the output of Gridster, the first is with the URL query string and the second is by editing Gridster.js

Query String

There are a number of options that you can use to customize the display of Gridster using the query string.

Gridster.js

Most of the variables that control the output of Gridster are in the urlParams{} object. Simply change the default values that you want. If you don't want users to be able to modify the output with the query string then at the top of Gridster.js set enableQuery = false; and only the settings from the js file will be used.

Examples

?tag=spring&author&sort=random: Display 60 large images all tagged "spring" with the username displayed, randomly displaying them in the grid.

?sort=most-liked&speed=0&refresh=5&likes&link: Display a small grid that doesn't animate of the most popular images on instagram that refreshes every 5 minutes, sorted by likes and you can click to see the original on instagram.

?tag=tbt&author&likes&comments&caption: See who's throwing back and what they have to say about it.

License

Gridster is built using a combination of open source and proprietary code. The individual licenses for each open source component can be found in the LICENSE folder.

Main

Gridster for instagram is copyright 2015 Danny Wahl, all rights reserved except where specified in the LICENSE file.

Vendor

Changelog