How to Make Pictures Move on My Web Page

An easy way to bring pictures to life on your website is to add a slide show. A picture slide show causes the pictures to move along on your web page instead of remaining stationary. In order to add moving pictures to your site, you need to embed the correct code. There are third party websites, such as Slide, FlickR and PhotoShow that will provide your with slide show codes. The downside of using such sites is that their advertising will be displayed to those who view your pictures. By creating your own HTML code you don't have to worry about third party ads.

Things You'll Need

  • Pictures
  • HTML editor

Instructions

    • 1

      Log in to the control panel of your website.

    • 2

      Open your site's “File Directory.” Verify that all of the pictures you want to move on your page have been uploaded into the directory. Depending upon your website host, there may be a special “Media” or “Images” folder inside of the file directory that is specifically for your pictures. If your pictures are not uploaded, you easily can upload them by clicking the “Upload” button.

    • 3

      Write down the filename for all of the uploaded pictures you want to use on your page. The filename should be written exactly as it appears in your file directory. For example, picture1.jpg, picture2.jpg, and picture3.jpg.

    • 4

      Locate the page inside of your “File Directory” that you want to place the moving pictures on. Select the option to “Edit” the page. This will launch the HTML editor for the page.

    • 5

      Place all of the following code inside of the HTML editor. Be sure to edit the picture names to reflect the names of your pictures.

      <!-- configurable script -->
      <script type=\"text/javascript\">
      theimage = new Array()
      GO

      // You can replace the picture names with the names of your actual pictures. If you don't need all of the images, you can delete the extra lines.
      // Format: theimage[...]=[image URL, link URL, name/description]
      theimage[0]=[\"http://www.picture1.jpg\&quot;, \"\", \"Picture 1\"]
      GO
      theimage[1]=[\"http://www.picture2.jpg\&quot;, \"\", \"Picture 2\"]
      GO
      theimage[2]=[\"http://www.picture3.jpg\&quot;, \"\", \"Picture 3\"]
      GO
      theimage[3]=[\"http://www.picture4.jpg\&quot;, \"\", \"Picture 4\"]
      GO
      theimage[4]=[\"http://www.picture5.jpg\&quot;, \"\", \"Picture 5\"]
      GO

      ///// Plugin variables

      playspeed=3000;// You can increase the playspeed to make the pictures move faster. You can decrease the playspeed to make the pictures move slower ms
      //#####
      //key that holds where in the array currently are
      i=0
      GO

      //###########################################
      window.onload=function(){

      //preload images into browser
      preloadSlide()
      GO

      //set the first slide
      SetSlide(0)
      GO

      //autoplay
      PlaySlide()
      GO
      }

      //###########################################
      function SetSlide(num) {
      //too big
      i=num%theimage.length
      GO
      //too small
      if(i<0)i=theimage.length-1
      GO

      //switch the image
      document.images.imgslide.src=theimage[i][0]
      GO

      //if they want name of current slide
      document.getElementById('slidebox').innerHTML=theimage[i][2]
      GO

      }

      //###########################################
      function PlaySlide() {
      if (!window.playing) {
      PlayingSlide(i+1)
      GO
      if(document.slideshow.play){
      document.slideshow.play.value=\" Stop \"
      GO
      }
      }
      else {
      playing=clearTimeout(playing)
      GO
      if(document.slideshow.play){
      document.slideshow.play.value=\" Play \"
      GO
      }
      }
      // if you have to change the image for the \"playing\" slide
      if(document.images.imgPlay){
      setTimeout('document.images.imgPlay.src=\"'+imgStop+'\"',1)
      GO
      imgStop=document.images.imgPlay.src
      }
      }

      //###########################################
      function PlayingSlide(num) {
      playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed)
      GO
      }

      //###########################################
      function preloadSlide() {
      for(k=0;k<theimage.length;k++) {
      theimage[k][0]=new Image().src=theimage[k][0]
      GO
      }
      }

      </script>

      <!-- slide show HTML -->
      <form name=\"slideshow\">

      <table border=\"1\" cellpadding=\"2\" cellspacing=\"0\">
      <tr>
      <td align=\"center\">
      <a href=\"#\" onmouseover=\"this.href=theimage[i][1];return false\">
      <script type=\"text/javascript\">
      document.write('<img name=\"imgslide\" id=\"imgslide\" src=\"'+theimage[0][0]+'\" border=\"0\">')
      </script>
      </a>
      </td>
      </tr>
      <tr>
      <td align=\"center\"><div id=\"slidebox\"></div></td>
      </tr>
      </table>

      </form>
      <!-- end of slide show HTML -->

    • 6

      Click the “Save” and “Publish” option to save your changes to the page.

Related Searches

References

Resources

  • Photo Credit children pictures image by Vladimir Kirienko from Fotolia.com

You May Also Like

Related Ads

View Blog Post

Enter the Geek Vs Geek Giveaway and Win a Roku!