Example Image Endless Scroller with winDiv
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.
This Example used ByRei winDiv to display the Image. Click on a Picture to see ByRei winDiv in action !
You will find the lasted Version of this Script on http://winDiv.markusbordihn.de/ .
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>
<script type="text/javascript" src="byrei_windiv-0.72.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;">
<a href="pic/xxx-001.jpg" class="winDiv"><img src="thumb/xxx-001.jpg" width="99" height="130" alt="xxx-001.jpg - 4kb" style="border: 0;"></a>
<a href="pic/xxx-002.jpg" class="winDiv"><img src="thumb/xxx-002.jpg" width="99" height="130" alt="xxx-002.jpg - 4kb" style="border: 0;"></a>
<a href="pic/xxx-003.jpg" class="winDiv"><img src="thumb/xxx-003.jpg" width="130" height="99" alt="xxx-003.jpg - 4kb" style="border: 0;"></a>
<a href="pic/xxx-004.jpg" class="winDiv"><img src="thumb/xxx-004.jpg" width="130" height="109" alt="xxx-004.jpg - 4kb" style="border: 0;"></a>
<a href="pic/xxx-005.jpg" class="winDiv"><img src="thumb/xxx-005.jpg" width="99" height="130" alt="xxx-005.jpg - 4kb" style="border: 0;"></a>
<a href="pic/xxx-006.jpg" class="winDiv"><img src="thumb/xxx-006.jpg" width="81" height="130" alt="xxx-006.jpg - 3kb" style="border: 0;"></a>
</div>
<div class="jscroller2_left_endless" style="font-size:60px; line-height:60px; white-space:nowrap; margin: 0;">
<a href="pic/xxx-007.jpg" class="winDiv"><img src="thumb/xxx-007.jpg" width="103" height="130" alt="xxx-007.jpg - 3kb" style="border: 0;"></a>
<a href="pic/xxx-008.jpg" class="winDiv"><img src="thumb/xxx-008.jpg" width="100" height="130" alt="xxx-008.jpg - 4kb" style="border: 0;"></a>
<a href="pic/xxx-009.jpg" class="winDiv"><img src="thumb/xxx-009.jpg" width="93" height="130" alt="xxx-009.jpg - 3kb" style="border: 0;"></a>
<a href="pic/xxx-017.jpg" class="winDiv"><img src="thumb/xxx-017.jpg" width="99" height="130" alt="xxx-017.jpg - 4kb" style="border: 0;"></a>
<a href="pic/xxx-018.jpg" class="winDiv"><img src="thumb/xxx-018.jpg" width="99" height="130" alt="xxx-018.jpg - 3kb" style="border: 0;"></a>
<a href="pic/xxx-020.jpg" class="winDiv"><img src="thumb/xxx-020.jpg" width="99" height="130" alt="xxx-020.jpg - 4kb" style="border: 0;"></a>
<a href="pic/xxx-022.jpg" class="winDiv"><img src="thumb/xxx-022.jpg" width="99" height="130" alt="xxx-022.jpg - 4kb" style="border: 0;"></a>
</div>
</div>
CSS Code
/* Scroller Box */
#scroller_container1 {
width: 700px;
height: 130px;
overflow: hidden;
}
/* CSS Hack Safari */
#dummy {;# }
#scroller_container1 {
overflow: auto;
}
/* Scoller Box */