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'); }
Comments
Post a Comment