Announcement

Collapse
No announcement yet.

HTML slideshow

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • HTML slideshow

    Here's a piece of JavaScript I came across that will allow you to build a slideshow inside an HTML document. Just edit the image names to suit (works with GIF, JPEG and PNG) - place the images in the same directory as the HTML file. The crossfade effect is very nice. It's probably not compatible with version 4 or earlier browsers - just a word of warning there.

    Use the HTML file you create inside AMS's Web Object for a snazzy slideshow. Still a workaround, sure, but it works!

    ----------------
    <SCRIPT LANGUAGE="JavaScript">

    <!-- Begin
    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed = 5000;
    // Duration of crossfade (seconds)
    var crossFadeDuration = 3;
    // Specify the image files
    var Pic = new Array();
    // to add more images, just continue
    // the pattern, adding to the array below

    Pic[0] = 'choc_cream_cheese_cake.jpg'
    Pic[1] = 'apple_pie.jpg'
    Pic[2] = 'key_lime_pie.jpg'
    Pic[3] = 'carolina_trifle.jpg'

    // do not edit anything below this line
    var t;
    var j = 0;
    var p = Pic.length;
    var preLoad = new Array();
    for (i = 0; i < p; i++) {
    preLoad[i] = new Image();
    preLoad[i].src = Pic[i];
    }
    function runSlideShow() {
    if (document.all) {
    document.images.SlideShow.style.filter="blendTrans (duration=2)";
    document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)";
    document.images.SlideShow.filters.blendTrans.Apply ();
    }
    document.images.SlideShow.src = preLoad[j].src;
    if (document.all) {
    document.images.SlideShow.filters.blendTrans.Play( );
    }
    j = j + 1;
    if (j > (p - 1)) j = 0;
    t = setTimeout('runSlideShow()', slideShowSpeed);
    }
    // End -->
    </script>
    ----------------------

    Remember, of course, to put this script before your body tag, but after the opening head tag in your HTML file.
    Eric Darling
    eThree Media
    http://www.ethreemedia.com

  • #2
    Re: HTML slideshow

    Cool...

    Corey Milner
    Creative Director, Indigo Rose Software

    Comment


    • #3
      Sounds great Eric...but I couldn't make it work. The way I put it was:

      <html>
      <head>
      <title>Slideshow1</title>
      <meta **********="Content-Type" content="text/html; charset=iso-8859-8">
      </head>
      <SCRIPT LANGUAGE="JavaScript">

      <!-- Begin
      // Set slideShowSpeed (milliseconds)
      var slideShowSpeed = 5000;
      // Duration of crossfade (seconds)
      var crossFadeDuration = 3;
      // Specify the image files
      var Pic = new Array();
      // to add more images, just continue
      // the pattern, adding to the array below

      Pic[0] = 'BAUM1.JPG'
      Pic[1] = 'BAUM2.JPG'
      Pic[2] = 'BAUM3.JPG'
      Pic[3] = 'BAUM4.JPG'
      Pic[4] = 'BAUM5.JPG'
      Pic[5] = 'BAUM6.JPG'
      Pic[6] = 'BAUM7.JPG'

      // do not edit anything below this line
      var t;
      var j = 0;
      var p = Pic.length;
      var preLoad = new Array();
      for (i = 0; i < p; i++) {
      preLoad[i] = new Image();
      preLoad[i].src = Pic[i];
      }
      function runSlideShow() {
      if (document.all) {
      document.images.SlideShow.style.filter="blendTrans (duration=2)";
      document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)";
      document.images.SlideShow.filters.blendTrans.Apply ();
      }
      document.images.SlideShow.src = preLoad[j].src;
      if (document.all) {
      document.images.SlideShow.filters.blendTrans.Play( );
      }
      j = j + 1;
      if (j > (p - 1)) j = 0;
      t = setTimeout('runSlideShow()', slideShowSpeed);
      }
      // End -->
      </script>
      <body bgcolor="#FFFFFF" text="#000000">
      Plain text
      </body>
      </html>

      And of course, I had the images in the same folder as the htm file.
      Anything wrong?

      Thanks
      Yossi

      Comment


      • #4
        That's really nifty Eric.

        Yossik, I haven't tried this out yet, but I noticed that you have your closing head tag before the script. Try moving it after the script but before the body.

        If that still doesn't work, you may need to add the code to display your first picture, within the body tag.

        Comment


        • #5
          Hi. Another way is to just increment a variable in the URL and use a recursive meta-refresh tag. That's how I created the "View all as slideshow" slideshow in our screen gallery:

          http://www.indigorose.com/sf/screenshots.php

          Works good, gives the user speed control, and it's sooooo simple. I also saw a really good free .mxp extension for Dreamweaver once which created slideshows in just a few seconds via point and click. I've been using more and more Flash/Dreamweaver extensions lately and I must say they are real time savers, especially for Dreamweaver.

          So much so in fact that I have vowed to place higher priority from now on for learning the extension systems of all software I use.

          Comment


          • #6
            Thanks Jim.
            Tried that too, even inserted the first picture inside the html code...still doesn't work.

            Thanks
            Yossi

            Comment


            • #7
              Checkout the stuff Here for a variety of 'html' slideshows. Each of the links provides a small demo of the effect.

              Comment

              Working...
              X