Created
April 3, 2011 03:57
-
-
Save whs/900162 to your computer and use it in GitHub Desktop.
libimageloader loads image from photo upload services
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @license The imageloader.js library is licensed under GNU Lesser General Public License v3 or later | |
*/ | |
(function(){ | |
/** | |
* TwitPic Image Loader | |
* Example: ldr = new TwitPicLoader("http://twitpic.com/asdf123"); | |
* @param {string} URL of the TwitPic page. Eg. http://twitpic.com/asdf123 | |
* @constructor | |
*/ | |
TwitPicLoader = function(url){ | |
this.url = url.replace(/^http:/, "https:"); | |
}; | |
/** | |
* Get the large image URL from TwitPic | |
* Note that TwitPic API doesn't offer JSONP | |
* @param {Function} Callback function. Will be called with first argument is the image's URL and second argument is the description | |
*/ | |
TwitPicLoader.prototype.getURL = function(cb){ | |
return $.get(this.url+"/full", function(r){ | |
d = r.match(/<img src="(.*?)" alt="(.*?)">/); | |
cb(d[1], d[2]); | |
}) | |
}; | |
/** | |
* Plixi Image Loader | |
* Example: ldr = new PlixiLoader("https://plixi.com/p/asdf"); | |
* @param {string} URL of the Plixi page. Eg. https://plixi.com/p/asdf | |
* @constructor | |
*/ | |
PlixiLoader = function(url){ | |
this.url = url.replace(/^https:/, "http:"); | |
}; | |
/** | |
* Get the image URL from Plixi API | |
* @param {Function} Callback function. Will be called with first argument is the image's URL and second argument is the description | |
*/ | |
PlixiLoader.prototype.getURL = function(cb){ | |
$.getJSON("https://api.plixi.com/api/tpapi.svc/jsonp/metadatafromurl?callback=?", {"url": this.url}, function(d){ | |
cb(d['BigImageUrl'], d['Message']); | |
}); | |
}; | |
/** | |
* OEmbed Image Loader | |
* @param {string} Image URL | |
* @param {string} OEmbed endpoint for that URL | |
* @constructor | |
*/ | |
OEmbedLoader = function(url, endpoint){ | |
this.url = url; | |
this.endpoint = endpoint; | |
} | |
/** | |
* Get the image URL from OEmbed endpoint | |
* @param {Function} Callback function. Will be called with first argument is the image's URL and second argument is the description | |
*/ | |
OEmbedLoader.prototype.getURL = function(cb){ | |
join = this.endpoint.indexOf("?") == -1 ? "?" : "&" | |
$.getJSON(this.endpoint+join+"callback=?", {"url": this.url}, function(d){ | |
cb(d['url'], d['title']); | |
}) | |
} | |
/** | |
* picplz Image Loader | |
* Example: ldr = new PicPlzLoader("https://picplz.com/Jn22"); | |
* @param {string} URL of the PicPlz page. | |
* @constructor | |
*/ | |
PicPlzLoader = function(url){ | |
if(url.match(/http[s]{0,1}:\/\/picplz\.com\/user\/[^\/]+\/pic\/([^\/]+)/)){ | |
this.urlType = "longurl"; | |
}else{ | |
this.urlType = "shorturl"; | |
} | |
this.code = url.match(/\/([^\/]+)[\/]{0,1}$/)[1]; | |
}; | |
/** | |
* Get the image URL from Plixi API | |
* @param {Function} Callback function. Will be called with first argument is the image's URL and second argument is the description | |
*/ | |
PicPlzLoader.prototype.getURL = function(cb){ | |
data = {}; | |
data[this.urlType+"_id"] = this.code; | |
$.getJSON("https://api.picplz.com/api/v2/pic.json?callback=?", data, function(d){ | |
pic = d['value']['pics'][0]; | |
cb(pic['pic_files']['640r']['img_url'], pic['caption']); | |
}); | |
}; | |
/** | |
* twitgoo Image Loader | |
* Note: No HTTPS support. | |
* Example: ldr = new TwitGooLoader("http://twitgoo.com/a05dh"); | |
* @param {string} URL of the twitgoo page. | |
* @constructor | |
*/ | |
TwitGooLoader = function(url){ | |
this.code = url.match(/^http:\/\/twitgoo\.com\/([0-9a-zA-Z]+)/)[1]; | |
}; | |
/** | |
* Get the image URL from twitgoo API | |
* @param {Function} Callback function. Will be called with first argument is the image's URL and second argument is the description | |
*/ | |
TwitGooLoader.prototype.getURL = function(cb){ | |
$.getJSON("http://twitgoo.com/api/message/info/"+this.code+"?format=json&callback=?", function(d){ | |
cb(d['imageurl'], d['text']); | |
}); | |
}; | |
/* Main class */ | |
window['ImageLoader'] = { | |
/** | |
* Get the image provider class from specified URL | |
* @todo Make it extensible | |
* @param {String} The image URL | |
*/ | |
"getProvider": function(url){ | |
if(url.match(/^http[s]{0,1}:\/\/twitpic\.com\/([0-9a-zA-Z]+)/)){ | |
// oohEmbed doesn't offer title | |
return new TwitPicLoader(url); | |
}else if(url.match(/^http[s]{0,1}:\/\/plixi\.com\/p\/([0-9]+)/)|| | |
url.match(/^http[s]{0,1}:\/\/lockerz\.com\/s\/([0-9]+)/)|| | |
url.match(/^http[s]{0,1}:\/\/tweetphoto\.com\/([0-9]+)/)){ | |
return new PlixiLoader(url); | |
}else if(url.match(/^http[s]{0,1}:\/\/upic\.me\/(show\/([0-9]+)|e[^\/]+)/)){ | |
return new OEmbedLoader(url.replace(/^https:/, "http:"), "http://upic.me/api/oembed"); | |
}else if(url.match(/^http[s]{0,1}:\/\/instagr\.am\/p\/([^\/]+)/)){ | |
return new OEmbedLoader(url, "https://api.instagram.com/oembed"); | |
}else if(url.match(/^http[s]{0,1}:\/\/picplz\.com\/([^\/]+)/) || | |
url.match(/http[s]{0,1}:\/\/picplz\.com\/user\/[^\/]+\/pic\/([^\/]+)/)){ | |
return new PicPlzLoader(url); | |
}else if(url.match(/^http[s]{0,1}:\/\/(www\.|)flickr\.com\/photos\/(.*?)\/([0-9]+)/)){ | |
// 1: flic.kr is not supported by oembed | |
// 2: flickr oembed doesn't support JSONP | |
return new OEmbedLoader(url.replace(/^https:/, "http:"), "http://oohembed.com/oohembed/"); | |
}else if(url.match(/^http[s]{0,1}:\/\/(www\.|)xkcd\.com\/([0-9]+)/)){ | |
return new OEmbedLoader(url.replace(/^https:/, "http:"), "http://oohembed.com/oohembed/"); | |
}else if(url.match(/^http:\/\/twitgoo\.com\/([0-9a-zA-Z]+)/)){ | |
// no HTTPS support | |
return new TwitGooLoader(url); | |
} | |
/*else if(url.match(/^http[s]{0,1}:\/\/(www\.|)yfrog\.(com|ru|com.tr|it|fr|co.il|co.uk|com.pl|pl|eu|us)\/(.+)/)){ | |
// yfrog doesn't offer JSONP | |
return new OEmbedLoader(url.replace(/^https:/, "http:"), "http://oohembed.com/oohembed/"); | |
}*/ | |
}, | |
"viewer": { | |
/** | |
* Connect to frame and show the image | |
* @param {String} The image's URL | |
* @param {Frame} | |
*/ | |
"frame": function(url, wnd){ | |
provider = ImageLoader['getProvider'](url); | |
provider.getURL(function(url, desc){ | |
wnd.document.write("<style>body{text-align:center;margin:0;padding:0;}img{border:none;}</style>"); | |
wnd.document.write("<p style='text-align: left;'></p>"); | |
$("p", wnd.document).text(desc); | |
wnd.document.write("<img src='"+url+"' />"); | |
}); | |
}, | |
/** | |
* Show the image in Shadowbox (required seperately) | |
* @param {String} The image's URL | |
* @param {Frame} | |
*/ | |
"shadowbox": function(url){ | |
provider = ImageLoader['getProvider'](url); | |
if(!provider) return false; | |
provider.getURL(function(url, desc){ | |
Shadowbox.open({ | |
content: url, | |
player: "img", | |
title: desc | |
//"width": $(window).width() * 6/7, "height": $(window).height() * 3/4, | |
}); | |
}); | |
return true; | |
} | |
} | |
}; | |
})(); | |
if(!$) alert("jQuery is required!") |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment