Skip to content

ti2/jquery.instagram.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 

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

Watchers

Forks

Releases

No releases published

Packages

No packages published