Skip to content

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

License

Notifications You must be signed in to change notification settings

swathikeshav/instagram-lite

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 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. 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. load_more: string
    A string that defines the class, ID or element you are using as a button to load more photos. (default: null).
  9. max_id: 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,
		load_more: '.load-more',
		success: function() {
			console.log('The request was successful!');
		},
		error: function(errorCode, errorMessage) {
		
			console.log('There was an error with the request');
			
			if(errorCode && errorMessage) {
				console.log(errorCode +': '+ errorMessage);
			}
		}
	});
		
});

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 73.1%
  • HTML 20.5%
  • CSS 6.4%