image-fetcher/script.js
var config =
{
maxWidth: 100,
maxHeight: 75,
};
/** Default Document Ready Event **/
$(function()
{
// Make form do what we want
$('#url-form')
.submit(getImagesFromUrl);
});
/**
* Sends request for images.
*/
function getImagesFromUrl()
{
// Make object out of form data
var data = $(this).serializeObject();
// Create request
$.post($(this).attr('action'), data, getImagesFromUrlDone);
// Return false so the form doesn't actually submit
return false;
}
/**
* Creates hidden image tags for the found image urls.
*/
function getImagesFromUrlDone(data)
{
$('#output')
.empty();
if(data && data.images)
for(var n in data.images)
{
var image = $('<img>')
.prop(data.images[n])
.css({opacity: 0, display: 'none'})
.appendTo('#output')
.load(imageLoaded);
}
}
/**
* Set proper size and fade in after load.
*/
function imageLoaded()
{
var image = $(this);
// Remove tiny images
if(image.width() < 2 || image.height() < 2)
{
image.remove();
return;
}
// Find scale
var scale = Math.min(config.maxWidth/image.width(), config.maxHeight/image.height());
// Set new width and height
image.attr({
width: Math.ceil(scale*image.width()),
height: Math.ceil(scale*image.height()),
})
// Fade in
image
.css({display: 'inline-block'})
.animate({opacity: 1});
}
/**
* Serializes a form into an object.
*/
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};