javascript - Dynamically get thumbnails and titles of vimeo videos [SOLVED!] -


picking question: get img thumbnails vimeo?

i'm trying create page several vimeo videos on it.

i want have videos in html this:

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

and want jquery populate divs img src thumbnail vimeo, , a points video, , text title of video. is, should end this:

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

(indentation added clarity)

this starting point 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> 

i don't know jquery enough (yet) ....

here solution @psl:

$('.vimeo').each(function(){ var $this  = this; $.ajax({         type:'get',         url: 'http://vimeo.com/api/v2/video/' + this.id  + '.json',         jsonp: 'callback',         datatype: 'jsonp',         success: function(data){              var video = data[0];              $('<a/>',{                  href:video.url,                  text:video.title }).append(               $('<img/>' ,{                  src:video.thumbnail_medium               })               )               .appendto($this);         }     }); }); 

try this:-

assuming div id 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 div 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


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -