Recently I needed a way to show a lot of thumbnails ina small space.
I decided it would be a nice solution to use a wide "ribbon" of images continuously bouncing left to right.
I came with this solution : http://www.liquidgate.it/tests/testscroll.html
Basically it is a single container div with the overflow-x property set to hidden.
Inside the container div there is another div with all the thumbnails in a row.
With this simple jQuery code I made it bounce left to right (and back) continuously.
The HTML code is really simple, here it is a sample (remember the ID of the objects) :
Have fun and happy coding dudes !!!
I decided it would be a nice solution to use a wide "ribbon" of images continuously bouncing left to right.
I came with this solution : http://www.liquidgate.it/tests/testscroll.html
Basically it is a single container div with the overflow-x property set to hidden.
Inside the container div there is another div with all the thumbnails in a row.
With this simple jQuery code I made it bounce left to right (and back) continuously.
var _duration = 12000;
function goRight()
{ $('#scroller').animate({"left": "0"},_duration,function(){ goLeft(); }); }
function goLeft()
{ var _sw = $('#scroller').width(); var _scrval = _sw - $('#scrollcontainer').width(); $('#scroller').animate({"left": "-"+_scrval},_duration,function(){ goRight(); }); }
$(document).ready(function() { goLeft();
});
The HTML code is really simple, here it is a sample (remember the ID of the objects) :
<body>
<div id="scrollcontainer" name="scrollcontainer" style="width:90%; border:1px solid; overflow:hidden; position:relative; height:50px;">
<div id="scroller" name="scroller" style="position:absolute; overflow:auto; white-space:nowrap; border:none; min-width:2000px; left:0px;">
...a lot of images here...
</div><!-- scroller --></div><!-- container --></body>
Have fun and happy coding dudes !!!
No comments:
Post a Comment