Skip to content

cjfinc/instagram-lite

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#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. loadMore: string
    A string that defines the class, ID or element you are using as a button to load more photos. (default: null).
  5. limit: string
    A string that indicates the ID of the image that the feed should begin from. (default: null).
  6. 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.
  7. 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!');
		}
	});
		
});

About

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

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • JavaScript 91.5%
  • CSS 8.5%