10 Replies Latest reply on May 3, 2010 5:21 PM by Ken Binney-GnPIX3

    How to make picture change????

    cptjackson

      My question is that I have a place where I want to put a picture on my webpage. I know how to do that but what if I want the picture to change to a different picture periodically. I have seen this on some pages where when you come back to the webpage after say 5 minutes, there is a different picture in the same location where the previous picture was. I have about 20 photos that I want to rotate on my webpage and have yet to figure out how to get this to work. Please, any help would be greatly appreciated.

       

      Derrick

        • 2. Re: How to make picture change????
          cptjackson Level 1

          Thank you. My coding skills are a little dusty but I will try.

          • 3. Re: How to make picture change????
            Level 4

            Thanks for trying. If you have any trouble then let us know what you've done and provide your code, preferably in an online example.

            • 4. Re: How to make picture change????
              cptjackson Level 1

              iPHP,

                I have been trying different coding but I think I have found at least one of my problems. It seems as though there is already some javascript code in the heading that may be interfering with what I'm trying to do. The code that is already in the page (that was given to me) is the following:

               

              <script type="text/javascript" src="rv4_js/utility.js"></script>
              <script type="text/javascript" src="rv4_js/jquery-1.2.6.min.js"></script>
              <script type="text/javascript" src="rv4_js/superfish.js"></script>
              <script type="text/javascript" src="rv4_js/jquery.hoverIntent.min.js"></script>
              <script type="text/javascript" src="rv4_js/jqueryui.slide.min.js"></script>
              <script type="text/javascript" src="rv4_js/dropDown.js"></script>

               

              Not sure if this is causing a problem but every example I have come across is telling me to put code in the heading section of the html first. Becasue there is already some JavaScript I think that there are conflicts happening.

              • 5. Re: How to make picture change????
                cptjackson Level 1

                I think I may have found one to work but it is not quite giving me the output that I need. The code is as follows but it seems to only rotate through 2 of my photos.

                 

                              <script language="JavaScript">
                // Copyright 1996, Infohiway, Inc. (http://www.infohiway.com)
                // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
                <!--
                function adArray() {
                for (i=0; i*2<adArray.arguments.length; i++) {
                  this[i] = new Object();
                  this[i].src = adArray.arguments[i*2];
                  this[i].href = adArray.arguments[i*2+1];
                }
                this.length = i;
                }
                function getAdNum() {
                dat = new Date();
                dat = (dat.getTime()+"").charAt(8);
                if (dat.length == 1)
                  ad_num = dat%ads.length;
                else
                  ad_num = 0;
                return ad_num;
                }
                var ads = new adArray(
                "rv4_images/12 Feb 10/logo1.JPG",
                "rv4_images/12 Feb 10/logo2.JPG",
                "rv4_images/12 Feb 10/logo3.JPG",
                "rv4_images/12 Feb 10/logo4.JPG",
                "images/banner_3.gif","http://simplythebest.net/scripts/");
                var ad_num = getAdNum();
                document.write('<CENTER><TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0><TR><TD '
                +'ALIGN=CENTER><FONT SIZE=2 FACE=Arial><B>SimplytheBest DHTML Scripts & JavaScripts is sponsored by: '
                +'</FONT></TD><TR></TR><TD><A HREF="'+ads[ad_num].href+'"><IMG SRC="'+ads[ad_num].src+'" '
                +'WIDTH="150" HEIGHT="100" BORDER=0 name=js_ad></A></TD></TR></TABLE></CENTER>');
                link_num = document.links.length-1;
                function rotateSponsor() {
                if (document.images) {
                  ad_num = (ad_num+1)%ads.length;
                  document.js_ad.src = ads[ad_num].src;
                  document.links[link_num].href = ads[ad_num].href;
                  setTimeout("rotateSponsor()",5000);
                }
                }
                setTimeout("rotateSponsor()",5000);

                • 6. Re: How to make picture change????
                  Ken Binney-GnPIX3 Level 4

                  Here is a really simple PHP code snippet to place in the body wherever you want the random pic to appear

                   

                  <img src="images/banners/<?php echo rand(1,6);?>.jpg" alt="Random Image">

                   

                  Notice my six images (all the same size )are in their own folder "banners" which I tucked inside the main images folder.

                  If you have more or less than six images. change the red number to suit.

                   

                  Here it is live http://www.datacarpet.com/

                   

                  The 4 images are actually a single image.  Reload the page to see it in action

                  • 7. Re: How to make picture change????
                    cptjackson Level 1

                    Ken,

                     

                       Thank you but all I get is a box with the words Random Image inside. how far up in the folder hierachy am I supposed to go?

                     

                    Derrick

                    • 8. Re: How to make picture change????
                      Ken Binney-GnPIX3 Level 4

                      First, this will only work after the page is uploaded to a server that handles PHP.

                      If so, pleas post a link.

                       

                      For the site I linked to, my main images folder is in the site root folder, and my "banners" folder is inside the images folder

                      the images must be renamed to:   1.jpg  2.jpg  3.jpg etc., apologies for not mentioning it previously.

                      If you want to talk, Google my phone number.I'll be here until 10pm EST

                      • 9. Re: How to make picture change????
                        cptjackson Level 1

                        Ken,

                          Thank you for all you help. Unfortunately, I don't have access to the server that the site will be put on. It's a web site for the Army so all I have are the files and then once I'm done I will turn them in to be dropped on a server. I will do the leg work and then cross my fingers that it will work. Again, thank you for you help.

                         

                        Derrick

                        • 10. Re: How to make picture change????
                          Ken Binney-GnPIX3 Level 4

                          Hi again -

                           

                          Send me the page and the folder of the random pictures and I'll upload and give you a link