Example Image Endless Scroller
This is a simple Example which show you, how you can scroll Images with jScroller2, please keep in mind that you should enable "dynamic Content Support" for this.
Mouse Autostop and Autostart is also activated for e.g: if you want to used this in a gallery and the user should click on the thumbs.
The Pictures are from Elsch you can see the Images in a better Resolution under http://reifanhp.de/special/fan-art/elsch/ .
Test W3C Validation:
HTML Code
<link rel="stylesheet" type="text/css" href="jscroller2-1.0.css">
<script type="text/javascript" src="jscroller2-1.61.js"></script>
<div id="scroller_container1">
<div class="jscroller2_left jscroller2_speed-10 jscroller2_ignoreleave jscroller2_mousemove jscroller2_dynamic" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">
<img src="001.jpg" width="99" height="130" alt="">
<img src="002.jpg" width="99" height="130" alt="">
<img src="003.jpg" width="130" height="99" alt="">
<img src="004.jpg" width="130" height="109" alt="">
<img src="005.jpg" width="99" height="130" alt="">
<img src="006.jpg" width="81" height="130" alt="">
</div>
<div class="jscroller2_left_endless" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">
<img src="007.jpg" width="103" height="130" alt="">
<img src="008.jpg" width="100" height="130" alt="">
<img src="009.jpg" width="93" height="130" alt="">
<img src="017.jpg" width="99" height="130" alt="">
<img src="018.jpg" width="99" height="130" alt="">
<img src="020.jpg" width="99" height="130" alt="">
<img src="022.jpg" width="99" height="130" alt="">
</div>
</div>
CSS Code
/* Scroller Box */
#scroller_container1 {
width: 700px;
height: 130px;
overflow: hidden;
}
/* CSS Hack Safari */
#dummy {;# }
#scroller_container1 {
overflow: auto;
}
/* Scoller Box */