Dynamically get thumbnails and titles of vimeo videos

Question

Picking up from this question: Get img thumbnails from Vimeo?

I'm trying to create a page with several vimeo videos on it.

I want to have the videos in the HTML look like this:

<div id='12345678' class='vimeo'></div>
<div id='23423423' class='vimeo'></div>

And then I want the jQuery to populate the divs with an img where the src is the thumbnail from vimeo, and an a which points to the video, and whose text is the title of the video. That is, it should end up like this:

<div id='12345678' class='vimeo'>
    <a href='https://vimeo.com/12345678'>
        <img src='url-to-thumbnail.jpg' />
        Video Title
    </a>
</div>

(Indentation added for clarity)

This is my starting point from that other question:

<script type="text/javascript">
    $.ajax({
        type:'GET',
        url: 'http://vimeo.com/api/v2/video/' + video_id + '.json',
        jsonp: 'callback',
        dataType: 'jsonp',
        success: function(data){
            var thumbnail_src = data[0].thumbnail_large;
            $('#thumb_wrapper').append('<img src="' + thumbnail_src + '"/>');
        }
    });
</script>

<div id="thumb_wrapper"></div>

Do you have the div with id already exist and the constructed anchor with image is to be appended to it right? `div id='12345678' class='vimeo'>``this already exists in DOM? — PSL, May 15 '13 at 01:13
Yes, I will manually enter all the divs with the ids for the videos I want. I want the js to fill in the details. — Dan, May 15 '13 at 01:26
ok, try the first one in my answer then, i haven't tested but but it should work fine. — PSL, May 15 '13 at 01:26

PSL · Accepted Answer · 2013-05-15T01:32:10.103

5

Try this:-

Assuming the div with id already exists.

  success: function(data){

              $('<a/>',{
                 href:data[0].url,
                 text:data[0].title }).append(
              $('<img/>' ,{
                 src:data[0].thumbnail_large
              })
              )
              .appendTo('#'+data[0].id)
        }

If the div with id doesnot exist:-

     success: function(data){

              $('<a/>',{
                 href:data[0].url,
                 text:data[0].title })
              .append(
                 $('<img/>' ,{
                 src:data[0].thumbnail_large
                 })
              ).appendTo($('<div/>',{
                 id:data[0].id,
                 class:'vimeo'

               }))
               .appendTo('.someContainer');
        }

Fiddle

edited May 15 '13 at 01:32

answered May 15 '13 at 01:14

PSL

123,204
21
253
243

The div with id already exists. But how do I get the id from the div into the `video_id` in the `url:` part of the `.ajax` call? And will that do the injection into ALL the divs on the page with that class? – Dan May 15 '13 at 01:28
You can get it how are you planning to do it for each div with class vimeo you are planning to make ajax calls and populate it? – PSL May 15 '13 at 01:29
1

WICKED! You rock! `this.` is _exactly_ what I was looking for, thanks! – Dan May 15 '13 at 01:35
Would there be any way to get the thumbnails to `fadeIn` when they load? – Dan May 16 '13 at 02:04

score 3 · Answer 2 · answered May 15 '13 at 01:20

Append html to the corresponding div

var vimeo_content="<a>\
                        <img />\
                        <span></span>\
                    </a>";
// on success function
function(){
    var vdata = data[0];
    var thumbnail_src = vdata.thumbnail_large;
    var video_title   = vdata.title;
    var video_url     = vdata.url;

    $vimeo_content    = $(vimeo_content);
    $vimeo_content.find('a').attr('href',url);
    $vimeo_content.find('img').attr('src',thumbnail_src);
    $vimeo_content.find('span').text(title);
    //append to corresponding div
    $vimeo_content.appendTo($('div#'+video_id));
}

Dynamically get thumbnails and titles of vimeo videos

2 Answers2

Fiddle

Linked