»
EnglishFrenchVietnamese

Print - Horizontal Glide-Scroll OnClick - JavaScriptBank.com

Full version: jsB@nk » Image » Image viewer » Horizontal Glide-Scroll OnClick
URL: http://www.javascriptbank.com/glide-scroll-horizontal-glide-scroll-onclick.html

Horizontal Glide-Scroll OnClick © JavaScriptBank.comThis 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 » Horizontal Glide-Scroll OnClick
URL: http://www.javascriptbank.com/glide-scroll-horizontal-glide-scroll-onclick.html



JavaScript
<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', 't1');    // 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-->


HTML
<LINK href="css/glide_scroll_h.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>  <td> </td><td><!-- scrolling layers --><div id="hold">  <div id="wn">  <div id="lyr1" class="content">    <table id="t1" cellpadding="0" cellspacing="0" border="0">     <tr><td><a href="http://jsbank.beplaced.com"><img src="../logojs.gif" width="175" height="40" alt="" /></a></td>  <td><img src="../logojs.gif" width="176" height="30" alt="" /></td>  <td><img src="../logojs.gif" width="132" height="32" alt="" /></td>      <td><a href="http://jsbank.beplaced.com"><img src="../logojs.gif" width="175" height="40" alt="" /></a></td>  <td><img src="../logojs.gif" width="176" height="30" alt="" /></td>  <td><img src="../logojs.gif" width="132" height="32" alt="" /></td>      <td><a href="http://jsbank.beplaced.com"><img src="../logojs.gif" width="175" height="40" alt="" /></a></td>  <td><img src="../logojs.gif" width="176" height="30" alt="" /></td>  <td><img src="../logojs.gif" width="132" height="32" alt="" /></td>     </tr>    </table>    </div>  </div>  <!-- end wn div --></div><!-- end hold div -->  </td>  <td> </td></tr><tr>  <td class="spacer"> </td><!-- dw_glideScrollBy arguments: wndo element number, amount to scroll onclick on x, y axes,     (optional, not included here) duration of glide --><td class="arrows">    <a href="javascript:;" onclick="dw_glideScrollBy(0,200,0); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-lft.gif" width="19" height="9" alt="" /></a>     <a href="javascript:;" onclick="dw_glideScrollBy(0,-200,0); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-rt.gif" width="19" height="9" alt="" /></a>  </td>  <td class="spacer"> </td></tr><tr>  <td> </td></tr></table></body><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/image/Glide_Scroll/css/glide_scroll_h.csshttp://javascriptbank.com/javascript/image/Glide_Scroll/js/dw_glidescroll.js