Auto-Rotate Images

[HighTower328]

I'm setting up an image gallery, in which in a large image will be displayed by default. Below that is a gallery of additional images, which when clicked will swap places with the large default images. At this point the rotation only happens manually when the images are clicked.

I would like the images to rotate automatically. Can any one tell me how to do this? The code for my app is below.

Thanks.

<%@ Page Language="VB"  MasterPageFile ="~/Home_english.master" %>


<asp:Content ID="Content1"  ContentPlaceHolderID = "MainContent" runat = "server">

<!-- Gallery Script Starts Here -->
<script language="JavaScript">
<!--

function changeimg(imgpath)
{
    document.getElementById('imgprop').src = imgpath;
}
// -->
</script>
<span class="pagehdr2">
        Mile Maker Photo Gallery
</span>
<table width="100%" border="0" cellspacing="0" cellpadding="5" align="left" height="100%">
<tr valign="top">
  <td width="20" bordercolor="#FDB945" bgcolor="#FDB945" valign="top" background="#fdb945"> 
      
<!-- var needs to be 'plants' 'parts' or 'both' -->
 </td>
<td> 
      <div align="center"> 
        <table width="100%" border="0" cellspacing="0" cellpadding="5" align="left">
          <tr align="left" valign="top" bordercolor="#FDB945"> 
            <td bordercolor="#FDB945" bgcolor="#FFFFFF" valign="middle" style="height: 45px; width: 92%;"> 
              <div align="center" style="text-align: right"><a href="primary_detail.aspx?pn=MileMaker.aspx"><img src="/dev2006/images/mm_logo.jpg" border="0" height="60" width="60"></a></div>
            </td>
              

            <td align="center" bordercolor="#FDB945" style="height: 45px; width: 100%;">&nbsp;
            <tr align="left" bordercolor="#fdb945" valign="top">
                <td bgcolor="#ffffff" bordercolor="#fdb945" valign="middle" style="height: 61px; width: 92%;">
  
<!-- Default image for gallery -->
                    <img src="[URL unfurl="true"]http://www.admasphaltplants.com/images/mmbig_01.jpg"[/URL] name="imgprop" vspace="2" id="imgprop">
                
                </td>
                <td align="center" bordercolor="#fdb945" style="height: 61px; width: 109%;">
                </td>
            </tr>
          
          <tr align="left" valign="top" bordercolor="#FDB945"> 
            <td height="300" bordercolor="#FDB945" bgcolor="#FFFFFF" style="width: 92%"> 
                
              <p align="center"><font face="Arial, Helvetica, sans-serif" size="2" color="#000000">Click 
                on the images to enlarge.</font></p>
              <p align="center">
              <font size="2" face="Arial, Helvetica, sans-serif"><b><font size="1">1</font></b></font>
              
 <!-- Gallery images and links -->   
 
              <a href='javascript:changeimg("/images/mmbig_01.jpg")'><img src="/images/back_100.jpg" width="72" height="90" border="0" align="texttop"></a>
              <a href='javascript:changeimg("/images/mmbig_01-click.jpg")'><img src="/images/back_102.jpg" width="72" height="90" border="0" align="texttop"></a>
              <a href='javascript:changeimg("/images/mmbig_01-down.jpg")'><img src="/images/back_58.jpg" width="72" height="90" border="0" align="texttop"></a>
              <a href='javascript:changeimg("/images/mmbig_01-over.jpg")'><img src="/images/back_79.jpg" width="72" height="90" border="0" align="texttop"></a>
              <a href='javascript:changeimg("/images/mm2.jpg")'><img src="/images/mm2small.jpg" width="72" height="90" border="0" align="texttop"></a>
              <a href='javascript:changeimg("/images/mm3.jpg")'><img src="/images/mm3small.jpg" width="72" height="90" border="0" align="texttop"></a>
              <a href='javascript:changeimg("/images/mm4.jpg")'><img src="/images/mm4small.jpg" width="72" height="90" border="0" align="texttop"></a>
              <a href='javascript:changeimg("/images/mm5.jpg")'><img src="/images/mm5small.jpg" width="72" height="90" border="0" align="texttop"></a>
              <a href='javascript:changeimg("/images/mm9.jpg")'><img src="/images/mm9small.jpg" width="72" height="90" border="0" align="texttop"></a>
       
                          
            </td>
        </tr>
        </table>
        </div>
</td>
</tr>
</table>
</asp:Content>

 

[cLFlaVA]

you will need to create a javascript array of image sources, and then push to the next or the previous image based on the index. there are several examples available online.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BabyJeffy]

Looking into setTimeOut() or even setInterval() to achieve this.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094