Question

I’d like to create an auto-scrollable image inside of a div. like, I have a picture that’s 600px wide and 1200px tall and I’d like to display it inside a 600px by 200px div and make it scroll and loop indefinitely. the jQuery plugins I’ve tried are all designed to scroll multiple li items, and I’ve failed hard at adapting it to my needs. so I tried chopping up the image into multiple pieces but that just looks horrid. any pointers?

<style type="text/css">
  #autoscroll {
    max-height: 100px;
    overflow: hidden;
  }
</style>
...
<div id="autoscroll">
  <img src="someimage.jpg">
</div>

Answer 1

Setup a container with overflow set to hidden and the dimensions you want to display. Then add your image as a child of this container and animate its position:

HTML

<div id="container">
    <img src="src_of/img.jpg" width="600" height="1200" />
</div>

CSS

#container {
    position : relative;
    width    : 600px;
    height   : 200px;
    overflow : hidden;
}

#container > img {
    position : absolute;
    top      : 0;
    left     : 0;
}

JS

$(function () {
    var $image = $('#container').children('img');
    function animate_img() {
        if ($image.css('top') == '0px') {
            $image.animate({top: '-1000px'}, 2500, function () {
                animate_img();
            });
        } else {
            $image.animate({top: '0px'}, 2500, function () {
                animate_img();
            });
        }
    }
    animate_img();
});

Note that I animate the top of the image to the negative of the height of the image minus the height of container ((container.height() – image.height()) * -1).

Here is a jsfiddle of the above solution: http://jsfiddle.net/J9BM8/1/