Display VIMEO video thumbnail

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}" />

Changing the image source using jQuery

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);}});