forked from robedge/jquery.instagram.js
-
Notifications
You must be signed in to change notification settings - Fork 0
A simple plugin for integrating an instagram feed
ti2/jquery.instagram.js
Folders and files
Name | Name | 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
Watchers
Forks
Releases
No releases published
Packages 0
No packages published