On the homepage of http://www.divelicious.com we display images of youtube and vimeo. To get the images of vimeo you can try this. You only need a bit of javascript (and jquery).
<script type="text/javascript">
$(document).ready(function () {
$('.vimeothumb').each(function (i, obj) {
vimeoVideoID = $(this).data('val');
$.getJSON(
'http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?',
{ format: "json" },
function (data) {
var imgId = '#' + data[0].id;
$(imgId).attr('src', data[0].thumbnail_small);
$(imgId).attr('title', data[0].title);
// title
// description
// thumbnail_large ()
// thumbnail_medium (200x150)
// thumbnail_small (100x75)
});
});
});
</script>
And in your HTML you require an img element which carries the vimeothumb with the data-val set to the image which needs to be displayed.
<img id="{vimeoid}" class="img-rounded vimeothumb videothumb" alt="" data-val="{{vimeoid}" />
You can use jQuery's attr() function. For example, if you img tag has an id attribute of 'my_image':
<imgid="my_image"src="first.jpg"/>
Then you can change the src in jQuery by:
$("#my_image").attr("src","second.jpg");
To attach this to an onclick event, you could write:
$('#my_image').on({'click':function(){
$('#my_image').attr('src','second.jpg');}});
To rotate the image, you could do this:
$('img').on({'click':function(){var src =($(this).attr('src')==='img1_on.jpg')?'img2_on.jpg':'img1_on.jpg';
$(this).attr('src', src);}});