Dribble shots lists

by James Doyle

HTML

<div id="item">
    <img id="image" src="" />
    <div id="over">
        <img id="avatar" src="" />
        <ul>
            <li class="title"></li>
            <li class="username"></li>
            <li class="likes"></li>
            <li class="views"></li>
            <li class="link"><a href="#"></a></li>
        </ul>
    </div>
</div>

CSS

#item {
    width: 400px;
    height: 300px;
    overflow: hidden;
}

#item #over {
    width: 360px;
    height: 260px;
    padding: 20px;
    background: rgba(0,0,0,0.7);
    -webkit-transition: -webkit-transform 0.2s ease;
    -webkit-transform: translate3d(0,0,0);
}

#item:active #over {
    -webkit-transform: translate3d(0,-304px,0);
}

#item #over ul li {
    color: white;
    font-size: 20px;
    text-shadow: 0 1px 1px black;
}

JavaScript

var list = "everyone";
var listResponse = {};
$.ajax({
    url: "http://api.dribbble.com/shots/" + list,
    dataType: 'jsonp',
    success: function(get) {
        listResponse = get;
        $('#image').attr('src', listResponse.shots[1].image_url);
        $("#avatar").attr('src', listResponse.shots[1].player.avatar_url);
        $(".title").html(listResponse.shots[1].title);
        $(".username").html(listResponse.shots[1].player.username);
        $(".likes").html(listResponse.shots[1].likes_count + ' likes');
        $(".views").html(listResponse.shots[1].views_count + ' views');
        $(".link a").html(listResponse.shots[1].short_url);
        $(".link a").attr('href', listResponse.shots[1].short_url);
    },
    error: function() {
        console.log('error getting shots/list');
    }
});