Skip to content

About

A simple plugin for integrating an instagram feed

Resources

Stars

0 stars

Watchers

0 watching

Forks

 
 

Latest commit

 

History

35 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

####
This is a basic jquery plugin that will allow you to pull in an instagram feed.

The user data for the uploader of the image is attached to the image in the jquery data.  
You can access it by using $('#id').data('user')

Alternate image sizes are available as well as caption data.  They are attached to the image element 
that is created.

To get altImageSizes object use var altImages = $('#me_0').data('altImageSizes');
To get Caption object use var caption = $('#me_0').data('caption');
To get User object var user = $('#me_0').data('user');
To get link to Instagram image page var link = $('#me_0').data('instagramLink');

*** me_0 is the id of the element you wish to get data for, so this would change for each image.

####

####
USAGE
####

--- getMyStream (example with onclick and mouseover tooltip to show user and caption) ---

<div id="me" />
<div style="margin-left: 15px; padding: 5px; background-color: #a7a7a7; position: absolute; opacity: 0; filter:alpha(opacity=0)" class="caption"></div>
<div id="pagesLeft"></div>

$(document).ready(function(){
	var $caption = $('.caption');
	
	
    $("#me").instagram('getStream', {
		count: 4,
		getUser: true,
		callback: function() {
		    // show page numbers
		    $totalPages = $('#me').data('pages');
		    $pageHolder = $('#pagesLeft');
		    
		    if(typeof($totalPages) != 'undefined') {
			    $pageHolder.html($totalPages + ' pages left');
		    }
			
			$.each($('#me img'), function() {
				var $this = $(this);
				var largeUrl = $this.data('altImageSizes').standard_resolution.url;
				
				$this.click(function() {
					window.open(largeUrl); 
				}).mouseover(function() {
					
					var html = $this.data('user').username;
					if ($this.data('caption') != null) {
						html += ': ' + $(this).data('caption').text;
					}
					
					$this.mousemove(function(e){
						$caption.css({left: e.pageX, top: e.pageY});
					});
	
					$caption.html(html);
					$caption.animate({
					  opacity: 1
					}, {queue: false});
				}).mouseout(function(){
					$caption.animate({
					  opacity: 0
					}, {queue: false});
				});
			});
		}
	});


--- getUserStream ---

<div id="user" />

$(document).ready(function() {
	$("#user").instagram('getStream', {
		count: 5,
		user: 1574083
	});
});


--- getMyLikes ---

<div id="myLikes" />

$(document).ready(function() {
	$("#myLikes").instagram('getMyLikes', {
		count: 5
	});
});

--- getPopularStream ---

<div id="popular" />

$(document).ready(function() {
	$("#popular").instagram('getPopularStream', {
		count: 5
	});
});

--- getStreamByTag ---

<div id="search" />

$(document).ready(function() {
	$("#search").instagram('getStreamByTag', {
		count: 5,
		tag: 'transformers'
	});
});

About

A simple plugin for integrating an instagram feed

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors