Thumbnails From Vimeo

by alekskorovin

HTML

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<img alt="" data-vimeo-id="27246366" />
<img alt="" data-vimeo-id="51430433" />

JavaScript

var getVimeoThumbnail = function(id, vimeoImg) {
    $.ajax({
        type:'GET',
        url: 'http://vimeo.com/api/v2/video/' + id + '.json',
        jsonp: 'callback',
        dataType: 'jsonp',
        success: function(data){
            var thumbnail_src = data[0].thumbnail_small;
            $(vimeoImg).attr('src', thumbnail_src);
        }
    });
};

var drawVimeoImages = function() {
    var vimeoImgDataAttr = 'data-vimeo-id',
        vimeoThumbnails = $('[' + vimeoImgDataAttr + ']'),
        vimeoThumbnailsLength = vimeoThumbnails.length;
    
    if(vimeoThumbnailsLength) {
        for(var i=0, l = vimeoThumbnailsLength; i < l; i++) {
            var vimeoImg = $(vimeoThumbnails).get(i),
                vimeoImgId = $(vimeoImg).attr(vimeoImgDataAttr);
            
            getVimeoThumbnail(vimeoImgId, vimeoImg);
        }
    }
};

drawVimeoImages();