I have this code that relies on the Embedly API for replacing a link with a video and thumbnail:
$('a.oembed').each(function(){
$(this).embedly({maxWidth:525,'method':'replace'}).bind('embedly-oembed', function(e, oembed){
$(this).parent().append($("<img>", { src: oembed.thumbnail_url, width:200 })).children('img').wrap('<div class="thumbnail_border" />');
});
});
I want to show a loading image when this request is made, and hide it when the thumbnail is returned. How would I do this?
I also have this code that hides the thumbnail and shows the video:
$(".thumbnail_border img").live('click', function() {
$(this).toggle();
$(this).parent().hide();
$(this).parent().parent().children('.embed').toggle();
$(this).parent().parent().children("div.description_div").hide();
});
I want to show a loading image when the user clicks, and I want to hide it once the video appears. How would I do this as well?