After sending my previous code off for review, as I have heard and come to expect, it came back to me as “review-needs-work“.

Most of the problems were about whitespace and code style but some were about tiny errors in the code too.

Having fixed all the points (or at least I hope so!) in dseif’s review, here is the revised code:

Code on github

Demo on the internet

Unit test on the internet

Syntax errors have thrown me off but here’s to being one step closer to being a contributing developer to an open source project!

0.2 has come and gone and while I am still waiting on some more info for the manifest ticket

The Instagram plugin is up and running!

View a demo of it here: Instagram demo.

The previous trouble I had with this plugin was solved with a Ctrl-A + Del of the existing code I had and starting over again! It really is true when your prof says to write code that you’re just going to throw away.

The code that I didn’t throw away is here:popcorn.instagram.js on github. The ticket is here.

I referenced the flickr plugin code when I re-wrote the code. What made me decide to look at flickr was that it’s also a plugin that relies on getting (a lot of) image data from a service and being able to display it to the user at the specific time it is requested. After looking through the code, I realized what I was doing wrong. I was retrieving the JSON data at the specified time of the video. This isn’t the ideal way to do this since getting a response from the api and loading images take some time to load. The best way was to have the images preloaded i.e. before it is requested in the video.

I’m fairly certain that it was because I was setting it up wrong – I had my setup code in the return statement of the plugin code. My setup code should be placed before the return statement. See below.

Popcorn.plugin( "instagram" , function( options ) {
//code goes here

return {

// Wrong, setup code doesn't go here if it needs to be preloaded
// _setup: function( options ){
// },

start: function( event,options){},
ends: function( event,options){},
_teardown:function( options ){}

My next step in this release is to update the ticket on lighthouse.

I’m glad that I took on this plugin. I’m hoping to improve it and maybe add the option for the user to specify a # of images to retrieve and maybe show it in a scrollable div. Another request that can be made to the api is searching for images with a specified tag. I’ll try and include these in the next release.

Thanks for reading! I appreciate any comments and suggestions!

I’ve been having a difficult time trying to get the Instagram plugin to work properly. The images don’t load early enough for them to be rendered on the page in sync with the requested times. This is so disappointing since I, acting as an end user, am just waiting there wondering where is the image I’m supposed to be seeing and then suddenly I see it for 2 seconds then there goes the next image trying to load.

After some code analyzing and debugging (firebug is great, btw) I think it might have something to do with which part of the code is executed first — actually I’m pretty sure it has something to do with the running code sequence.

I’ve been looking at the source code for other plugins like flickr and and they’ve helped lots with setting up the plugin code and formatting the containing div and such so I’ll have to check back and analyze and try and figure out how to get my images preloaded before reaching the specified video time.

JSON troubles up ahead…
Read More