#Instagram Lite
A simple, lightweight jQuery plugin used to display a user's Instagram photos.
##Instructions
Include jQuery and the plugin in the head or footer of your page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/plugins/instagramLite.js"></script>
Create a list with an ID or class that will contain the user's Instagram photos.
<ul class="instagram-lite"></ul>
Initialize the plugin targeting the class, ID or element and pass the function your client ID (api key) and username.
$('.instagram-lite').instagramLite({
clientID: 'XXXXXXXXXXXXXXXXXXXXX',
username: 'yourusername'
});
####Required Properties
-
clientID: string
A string that defines your client ID provided by Instagram. - username: string
A string that defines the username of the user you want to retrieve Instagram photos from.
####Optional Properties
- limit: integer
An integer that indicates the amount of photos to be returned. If loadMore is set, the limit property will determine how many photos are loaded each time. (default: 10). - list: boolean
A boolean value that indicates whether or not to use list items (default: true). - urls: boolean
A boolean value that indicates whether or not the images should be linked to their page on Instagram (default: false). - loadMore: string
A string that defines the class, ID or element you are using as a button to load more photos. (default: null). - limit: string
A string that indicates the ID of the image that the feed should begin from. (default: null). - error: function(errorCode, errorMessage)
A callback function that is triggered after the request if the request is not sucessful. If Instagram returns an error, the error code and error message will be passed to this callback function. - success: function()
A callback function that is triggered after the request if the request is sucessful.
#####Example:
$(function() {
$('.instagram-lite').instagramLite({
clientID: 'XXXXXXXXXXXXXXXXXXXXX',
username: 'yourusername',
list: false,
urls: false,
loadMore: '.load-more',
error: function(errorCode, errorMessage) {
console.log('There was an error with the request');
if(errorCode && errorMessage) {
console.log(errorCode +': '+ errorMessage);
}
}
success: function() {
console.log('The request was successful!');
}
});
});