Images downloader

by A B

HTML

<script src="http://malsup.github.com/jquery.blockUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/2.4.0/jquery.waitforimages.js"></script>
choose an image <select id="imagesLink"></select>
<div id="mydivContainer">
    <div id="mydiv"></div>
</div>

CSS

#mydivContainer
{
    width: 400px;
    height: 400px;
}

JavaScript

$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157623591220769&nsid=21696934@N05&format=json&jsoncallback=?", function(data) {
    $.each(data.items, function(i, item) {
        $("<option>").attr("value", item.media.m).html('image ' + i).appendTo("#imagesLink");
    });

});

$("#imagesLink").on('change', function() {

    $('#mydivContainer').block({
        message: 'Loading'
    });

    setTimeout(LoadImage, 10, this.value);

});

function LoadImage(imagePath)
{
    $('#mydiv').html($('<img>').attr('src', imagePath));
    
    $('#mydiv').waitForImages(function() {
        $('#mydivContainer').unblock();
        // alert("Finished!");
    });
    
}