Full version: jsB@nk » Image » Image viewer » Scroll with a Gliding Motion OnClick
URL: https://www.javascriptbank.com/glide-scroll-glide-scroll-vertically-onclick.html
This JavaScript slideshow lets the user manually move back and forth between images, by clicking on the provided buttons.
Full version: jsB@nk » Image » Image viewer » Scroll with a Gliding Motion OnClick
URL: https://www.javascriptbank.com/glide-scroll-glide-scroll-vertically-onclick.html
<script type="text/javascript">var wndo = [];// Necessary to avoid errors before page loaded function dw_glideScrollBy(num, x, y, dur) { if ( wndo[num] && wndo[num].glideScrollBy ) wndo[num].glideScrollBy(x, y, dur);}function initScrollLayer() { // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, // if horizontal scrolling, id of element containing scrolling content (table?) wndo[0] = new dw_scrollLayer('wn', 'lyr1'); // pass id's of any wndo's that scroll inside tables // i.e., if you have 3 (with id's wn1, wn2, wn3): GeckoTableBugFix('wn1', 'wn2', 'wn3'); GeckoTableBugFix('wn'); }</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><LINK href="css/glide_scroll_rel_v.css" type=text/css rel=stylesheet><script src="js/dw_glidescroll.js" type="text/javascript"></script><body onload="initScrollLayer()"><table class="main" cellspacing="0" cellpadding="8" border="0"><tr> <th colspan="3"></th></tr><tr> <td class="text"> <p>This example positions the scrolling layers in a cell of a centered table.</p> <p>The glide-scroll code supports <a href="scrollbar.html">scrollbars</a>, <a href="glide_scroll_h.html">horizontal scrolling</a>, and gliding to <a href="glide_grid.html">specific images</a>.</p> </td> <td><!-- relative positioned layer that contains scrolling layers --><div id="hold"><div id="wn"> <!-- scrolling layer here --><div id="lyr1" class="content"> <!-- The images here are different sizes, so td height is set (in style sheet) to equalize those differences. The table cell height is set equal to the scroll distance per click. --><table id="imgTbl" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="../logojs.gif" width="100" height="100" alt="" /></td> </tr> <tr> <td><img src="../logojs.gif" width="100" height="100" alt="" /></td> </tr> <tr> <td><img src="../logojs.gif" width="100" height="100" alt="" /></td> </tr> <tr> <td><img src="../logojs.gif" width="106" height="131" alt="" /></td> </tr> <tr> <td><img src="../logojs.gif" width="88" height="88" alt="" /></td> </tr> </table></div> <!-- end scrolling layer --></div> <!-- end wn --></div><!-- end hold (relative layer) --></td><td><table class="scrollLinks" border="0" cellpadding="0" cellspacing="0"><tr> <!-- dw_glideScrollBy arguments: wndo element number, amount to scroll onclick on x, y axes, (optional, not included here) duration of glide --><td valign="top"><a href="javascript:;" onclick="dw_glideScrollBy(0,0,140); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-up.gif" width="11" height="18" alt="" /></a></td></tr><tr><td class="spacer"> </td></tr><tr><td valign="bottom"><a href="javascript:;" onclick="dw_glideScrollBy(0,0,-140); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-dn.gif" width="11" height="18" alt="" /></a></td></tr></table></td></tr></table></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/image/Glide_Scroll/css/glide_scroll_rel_v.csshttp://javascriptbank.com/javascript/image/Glide_Scroll/js/dw_glidescroll.js