Instagram Photo Cycler JavaSscript widget

A while ago I built for the company I work for a nice Dashboard presenting business and operational data on a TV.

I wanted to add to the Dashboard something cool that will drive people to be more creative.

I had an idea of showing on the dashboard Instagram photos of the company by posting photos to a predefined hashtag. For example: #mycompany.

There was one problem: the real-estate on a dashboard TV screen is very expensive and you can not show more then a single photo.

I remembered that I once encountered a cool JavaScript widget that simply cycles photos with nice transition effects. I thought that it will be nice to connect this widget with Instagram and put it on the dashboard.

Back then I didn't know that I can also get the assistance of Instafeed.js in order to get Instagram data easily, so I had to write this part my self.

The result was pretty cool, so I decided to make a jQuery widget from it to allow others to use it as well. You can download the widget and use it for your own photos or for showing photos of some hashtag.

Here is how the widget looks like for the hashtag #love:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.rawgit.com/malsup/cycle/master/jquery.cycle.lite.js" type="text/javascript"></script>
<script src="https://docs.google.com/uc?export=download&id=0B8vXkKUFKJw4anFQam9reXhyNWc" type="text/javascript"></script>

<br />
<div id="instagramCyclerCoderEyeLove" style="width:320px; height:320px;">
</div>
<script language="JavaScript">
 <!--

  $(document).ready(function() {
   $('#instagramCyclerCoderEyeLove').cycleInstagram({
    'get':   'tagged',
    'tagName':  'love',
    'accessToken': '161840.f92bbd9.e0a09d9b00f746c8b2662a4e784e55b0'
   });
  });

 </script>

And here is the result:

In order to show your own photos you can use the property "get" with the "user" value. Please note that in order to show you own photos, you can simply use for "userId" the word "self". In addition you can see how you can show more than just a photo and even control look of the widget very easily with the "template" property and simple usage of CSS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.rawgit.com/malsup/cycle/master/jquery.cycle.lite.js" type="text/javascript"></script>
<script src="https://docs.google.com/uc?export=download&id=0B8vXkKUFKJw4anFQam9reXhyNWc" type="text/javascript"></script>

 <style>
  #instagramCyclerCodeEyerUser {
   background-image: url("https://docs.google.com/uc?export=download&id=0B8vXkKUFKJw4a1JVbTNoY0N0T0U"); 
   background-size: cover; 
   width:326px; 
   height:380px;
  }

  #instagramCyclerCodeEyerUser img {
   padding-top:28px;
   padding-left:36px;
  }

  #instagramCaption {
   margin-top:25px;
   padding-left:36px;
   font-size:18px;
   font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
   width: 250px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
  }

 </style>

<div id="instagramCyclerCodeEyerUser"></div>
<script language="JavaScript">

  $(document).ready(function() {
   $('#instagramCyclerCodeEyerUser').cycleInstagram({
    'get':   'user',
    'userId':  'self',
    'tagName':  'todacellmon',
    'accessToken': '161840.f92bbd9.e0a09d9b00f746c8b2662a4e784e55b0',
    'template': '<div><a href="{{link}}"><img src="{{image}}" width="250" height="250" /></a><div id="instagramCaption">{{caption}}</div></div>'
   });
  });

 </script>

Here is the result:

PLEASE NOTE: In order to use Instagram API, you should create an access token. You have nothing to worry that others can see your access token as long as you create an access token only for READING. Frankly, creating the access token on Instagram, at least at the time that I did it, was not a simple task. You can find more help on how to do it on Instagram developers section or on this url

DOWNLOAD: Here you can download the widget