Full version: jsB@nk » Image » Image viewer » Glide-Scroll to Specified Locations Onclick
URL: https://www.javascriptbank.com/glide-scroll-glide-scroll-to-specified-locations-in-a-scrolling-layer-onclick.html
The image below is one in a series of images laid out in a grid pattern. Click the links beside the image to glide-scroll to specific locations in the grid.
Full version: jsB@nk » Image » Image viewer » Glide-Scroll to Specified Locations Onclick
URL: https://www.javascriptbank.com/glide-scroll-glide-scroll-to-specified-locations-in-a-scrolling-layer-onclick.html
<script type="text/javascript">var wndo = [];// Necessary to avoid errors before page loaded function dw_glideScrollTo(num, x, y) { if ( wndo[num] && wndo[num].glideScrollTo ) wndo[num].glideScrollTo(x,y)}function initScrollLayer() { // hide loading gif var load_lyr = document.getElementById? document.getElementById("loading"): document.all? document.all["loading"]: null; if (load_lyr) load_lyr.style.visibility = "hidden"; // 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', 'imgTbl'); // Read instructions if your scrolling layers are inside tables }</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_grid.css" type=text/css rel=stylesheet><script src="js/dw_glidescroll.js" type="text/javascript"></script><body onload="initScrollLayer()"><div id="hold"> <div id="wn"> <!-- loading gif layer, hidden onload --> <div id="loading" class="content"><img src="images/loading.gif" width="99" height="16" alt="" /></div> <!-- scrolling layer here --> <div id="lyr1" class="content"> <table id="imgTbl" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> </tr> <tr> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> </tr> <tr> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="106" height="131" alt="" /></td> </tr> <tr> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="150" height="150" alt="" /></td> <td><img src="../logojs.gif" width="100" height="100" alt="" /></td> </tr> </table> </div> </div> <!-- end wn --> <div id="linksLyr"> <table id="lnks" border="0" cellpadding="12" cellspacing="0"> <tr> <!-- dw_glideScrollTo arguments: wndo number, destination on x, y axes, (optional, not included here) duration of glide Height and width of images and table cells determine location to glide to --> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,0); return false">1</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,180,0); return false">2</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,360,0); return false">3</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,540,0); return false">4</a></td> </tr> <tr> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,180); return false">5</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,180,180); return false">6</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,360,180); return false">7</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,540,180); return false">8</a></td> </tr> <tr> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,360); return false">9</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,180,360); return false">10</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,360,360); return false">11</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,540,360); return false">12</a></td> </tr> <tr> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,0,540); return false">13</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,180,540); return false">14</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0,360,540); return false">15</a></td> <td><a href="javascript:;" onclick="dw_glideScrollTo(0, 540,540); return false">16</a></td> </tr> </table> </div> </div><!-- end hold --></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_grid.csshttp://javascriptbank.com/javascript/image/Glide_Scroll/js/dw_glidescroll.js