jordanlenon / instagram-lite Goto Github PK

#Instagram Lite

A simple, lightweight jQuery plugin used to display a user's Instagram photos.

See a demo

##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

1. clientID: string
   A string that defines your client ID provided by Instagram.
2. username: string
   A string that defines the username of the user you want to retrieve Instagram photos from.

####Optional Properties

1. 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).
2. list: boolean
   A boolean value that indicates whether or not to use list items (default: true).
3. urls: boolean
   A boolean value that indicates whether or not the images should be linked to their page on Instagram (default: false).
4. videos: boolean
   A boolean value that indicates whether or not videos should be displayed (default: false). ^*Note that videos are .mp4 and currently only work in webkit.
5. captions: boolean
   A boolean value that indicates whether or not the photo captions should be displayed (default: false).
6. date: boolean
   A boolean value that indicates whether or not the date of when the photo was taken should be displayed (default: false).
7. likes: boolean
   A boolean value that indicates whether or not the photo like count should be displayed (default: false).
8. loadMore: string
   A string that defines the class, ID or element you are using as a button to load more photos. (default: null).
9. limit: string
   A string that indicates the ID of the image that the feed should begin from. (default: null).
10. 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.
11. 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!');
		}
	});
		
});