Making a jQuery plugin to feed Tumblr to site
- by tylorreimer
I have some experience with PHP and a little with JS but I'm far from anything proficient. I'm trying to make a jQuery plugin for my site that I can call in my HTML via something like this:
$('.new').tumble({username: "tylor", count: 9});
Which would basically put the Tumblr list the code should make into the DIV with class 'new' in this case. Here is my code so far; the problem seems to be how to get it to pick up class/id from the original call (in the HTML) and use that in the jQuery.
Here's the code so far:
(function($) {
$.fn.tumble = function(options){
var settings = $.extend({
username: null, // [string or array] required to get url for tumblr account
count: 3, // [integer] how many posts to display?
}, options);
//url construction
var url = "http://" + settings.username + ".tumblr.com";
var jsonurl = url + "/api/read/json?num=" + settings.count + "&callback=?";
$.getJSON(jsonurl, function(data) {
var items = [];
$.each(data.posts, function(id, url) { // Goes over each post in the JSON document retrieved from data URL
var url = this.url; // Just assigns a variable to the url to avoid constantly writing "this.whatever"
var photourl = this['photo-url-250']; // photo-url-xxx needs to be called this way due to integers in the name
items.push('<li><a href="' + url + '">' + photourl + '</a></li>');
});
$('<ul/>', { // Creates an empty list
html: items.join('') // Takes the values in the item array and puts 'em together
}).appendTo('.new'); // I don't want this to have the class set in the jQuery itself
}); //end json
};
})( jQuery );
Any help you can lend would be wonderful. Thank you
