Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Table of rotating pictures HELP!

    Im trying to edit a homepage for a friend of mine. He wants the page to have a table of 12 total pictures that randomly rotate on refresh.

    i found this code that refreshes the pictures:
    Code:
    <script type="text/javascript">
    <!--
    var rand=Math.round(Math.random()*1);
    var img=new Array(2);
    
    
    img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
    img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;
    
    document.write("<img src=\"" + img[rand] + "\" />");
    //-->
    </script>
    and to come up with the tables i made this code:

    Code:
    <table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="500" bordercolor="#FFCC00">
    <tbody>
    <tr>
    <td><script type="text/javascript">
    <!--
    var rand=Math.round(Math.random()*1);
    var img=new Array(2);
    
    img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
    img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;
    
    document.write("<img src=\"" + img[rand] + "\" />");
    //-->
    </script></td>
    <td><script type="text/javascript">
    <!--
    var rand=Math.round(Math.random()*1);
    var img=new Array(2);
    
    img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" ;
    img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" ;
    
    document.write("<img src=\"" + img[rand] + "\" />");
    //-->
    </script></td>
    </tr>
    <tr>
    <td><script type="text/javascript">
    <!--
    var rand=Math.round(Math.random()*1);
    var img=new Array(2);
    
    img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" ;
    img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" ;
    
    document.write("<img src=\"" + img[rand] + "\" />");
    //-->
    </script></td>
    <td><script type="text/javascript">
    <!--
    var rand=Math.round(Math.random()*1);
    var img=new Array(2);
    
    img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" ;
    img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" ;
    
    document.write("<img src=\"" + img[rand] + "\" />");
    //-->
    </script></td>
    <td><br /></td>
    </tr>
    <tr>
    <td><script type="text/javascript">
    <!--
    var rand=Math.round(Math.random()*1);
    var img=new Array(2);
    
    img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" ;
    img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" ;
    
    document.write("<img src=\"" + img[rand] + "\" />");
    //-->
    </script></td>
    <td><script type="text/javascript">
    <!--
    var rand=Math.round(Math.random()*1);
    var img=new Array(2);
    
    img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" ;
    img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" ;
    
    document.write("<img src=\"" + img[rand] + "\" />");
    //-->
    </script></td>
    <td><br /></td>
    </tr>
    </tbody>
    </table>
    but if you see the home page here:

    http://celulardepot.squarespace.com

    you can see that something is DEFINITLY wrong lol
    please help me! =D

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <table id="tst">
      <tr>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" /></td>
      </tr>
      <tr>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" /></td>
      </tr>
    </table>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Random(id){
     var table=document.getElementById(id),imgs=table.getElementsByTagName('IMG'),ary=[],z0=0,z1=0;
     for (;z0<imgs.length;z0++){
      ary[z0]=imgs[z0].src;
     }
     ary=ary.shuffle(ary);
     for (;z1<imgs.length;z1++){
      imgs[z1].src=ary[z1];
     }
    }
    
    Array.prototype.shuffle=function(ary){
      for (var r,t,z0=0;z0<ary.length;z0++){
       r=Math.floor(Math.random()*ary.length);
       t=ary[z0];
       ary[z0]=ary[r];
       ary[r]=t;
      }
      return ary;
     }
    
    
    Random('tst')
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    reggiefilho (12-20-2011)

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <table id="tst">
      <tr>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" /></td>
      </tr>
      <tr>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" /></td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" /></td>
      </tr>
    </table>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Random(id){
     var table=document.getElementById(id),imgs=table.getElementsByTagName('IMG'),ary=[],z0=0,z1=0;
     for (;z0<imgs.length;z0++){
      ary[z0]=imgs[z0].src;
     }
     ary=ary.shuffle(ary);
     for (;z1<imgs.length;z1++){
      imgs[z1].src=ary[z1];
     }
    }
    
    Array.prototype.shuffle=function(ary){
      for (var r,t,z0=0;z0<ary.length;z0++){
       r=Math.floor(Math.random()*ary.length);
       t=ary[z0];
       ary[z0]=ary[r];
       ary[r]=t;
      }
      return ary;
     }
    
    
    Random('tst')
    /*]]>*/
    </script>
    
    </body>
    
    </html>

    Thank you very much for the quick reply!
    I added your code and replaced my pictures and it worked for the 2 rows 3 columns perfectly!
    But as soon as I changed it to 3 rows 4 columns it went downhill again :/

    here's what i got now:
    Code:
    <table id="tst">
    <tbody>
    <tr>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" alt="" /></td>
    </tr>
    <tr>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" alt="" /></td>
    </tr>
    <tr>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" alt="" /></td>
    </tr>
    <tr>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" alt="" /></td>
    </tr>
    </tbody>
    </table>
    <p><script type="text/javascript">
    /*<![CDATA[*/
    
    function Random(id){
     var table=document.getElementById(id),imgs=table.getElementsByTagName('IMG'),ary=[],z0=0,z1=0;
     for (;z0<imgs.length;z0++){
      ary[z0]=imgs[z0].src;
     }
     ary=ary.shuffle(ary);
     for (;z1<imgs.length;z1++){
      imgs[z1].src=ary[z1];
     }
    }
    
    Array.prototype.shuffle=function(ary){
      for (var r,t,z0=0;z0<ary.length;z0++){
       r=Math.floor(Math.random()*ary.length);
       t=ary[z0];
       ary[z0]=ary[r];
       ary[r]=t;
      }
      return ary;
     }
    
    
    Random('tst')
    /*]]>*/
    </script></p>
    Thanks again for your help! I really appreciate it! God bless



    * EDIT

    Wow, i refreshed the page and it worked.. Thank you!!!! You really saved me! Thanks again, God bless! =D
    Last edited by reggiefilho; 12-20-2011 at 06:12 PM. Reason: After refreshing page, it worked

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oh, one last thing.. is there a way i can set a specific width and height parameter? thank you!

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #tst IMG {
      width:150px;height:150px;
    }
    
    /*]]>*/
    </style></head>
    
    <body bgcolor="red">
    <table id="tst">
    <tbody>
    <tr>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" alt="" /></td>
    </tr>
    <tr>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" alt="" /></td>
    </tr>
    <tr>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" alt="" /></td>
    </tr>
    <tr>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" alt="" /></td>
    <td><img src="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" alt="" /></td>
    </tr>
    </tbody>
    </table>
    <p><script type="text/javascript">
    /*<![CDATA[*/
    
    function Random(id){
     var table=document.getElementById(id),imgs=table.getElementsByTagName('IMG'),ary=[],z0=0,z1=0;
     for (;z0<imgs.length;z0++){
      ary[z0]=imgs[z0].src;
     }
     ary=ary.shuffle(ary);
     for (;z1<imgs.length;z1++){
      imgs[z1].src=ary[z1];
     }
    }
    
    Array.prototype.shuffle=function(ary){
      for (var r,t,z0=0;z0<ary.length;z0++){
       r=Math.floor(Math.random()*ary.length);
       t=ary[z0];
       ary[z0]=ary[r];
       ary[r]=t;
      }
      return ary;
     }
    
    
    Random('tst')
    /*]]>*/
    </script></p>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •