JQuery alternative to Flash Display Element.

Question

I'm building a website at the moment and in the design it shows a scrollwheel in the form of this example.

I've got no problem creating this using something like scrollable or some other similar plugins, however, they don't allow you to click and drag through the images and "flick" them in such a way as the flash example.

Do you know of any plugins that allow you to do this, or even know how to modify something like Scrollable to do this?

I'm quite new to JQuery, so I'm sorry if this is a bit of an easy question

Answer 1

Here you can find a lot of pluginsfor jquery. http://www.jqueryplugins.com/

Answer 2

http://jsfiddle.net/UmZeZ/2/ has a running sample.

Stripped down version midly refactored for readability:

<div id="lolcats" style="background:url(image.jpg) 0 0 repeat-y;"></div>

<script>
$(function(){
    var startLoc = 0;
    var currentLoc = 0;
    $('#lolcats').mousedown(function(e){
        startLoc = e.pageY;
        $(this).bind('mousemove', function(e){
            startLoc = startLoc - event.pageY;
            location = $(this).css("background-position-y");
            currentLoc = parseInt(location.replace("px", "")) - startLoc;
            $(this).css("background-position-y", currentLoc + "px");
            startLoc = currentLoc;
        });
    });
    $('body').mouseup(function(e){
        $('#lolcats').unbind('mousemove');
    });
});
</script>

Enjoy :)