Web Analytics Made Easy -
StatCounter Multiple Slidshows - CodingForum

Announcement

Collapse
No announcement yet.

Multiple Slidshows

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

  • Multiple Slidshows

    Hi Gang

    I need to get three slidshows working on the same page.

    each slideshow is to run 4 or 5 images but each slide show will link to only one url each.

    I have tried using the slide show codes in the freescript area and then modifing them to make them all individual. but they refu=se to run together.

    Has anybody got a script that will do this or know of a site that uses multile slideshows on one page so that I can study the code?

    Cheers all
    theGnome

  • #2
    use I frames and remove the frameborder so it looks as if it's part of the page
    in the meta tage of the framed page put a redirect to the next page/slide
    link the images in the html as you normally would

    <iframe src="whatever.htm" width=200 height=200 frameborder=0></iframe>
    FootballHangout.com

    Comment


    • #3
      hey gnome, got your email. Just wokeup. Fought with a cgi script til way too late last night.
      I did tell ya how to do it in the last post, I didn't explain it well?
      I'll try again


      MAIN HTML PAGE:
      <html>
      <head>
      <meta....whatever search engine jazz ya normally put
      </head>
      <body>

      <font face="ComicSans MS">Welcome to Page Whatever</font><br>
      <hr>
      <table width="100%">
      <tr><td>
      <iframe src="show1.htm" width=200 height=200 frameborder=0></iframe>(this line and above line are one line of code)
      </td><td>
      <iframe src="show6.htm" width=200 height=200 frameborder=0></iframe>
      </td><td>
      <iframe src="show11.htm" width=200 height=200 frameborder=0></iframe>
      </td></tr>
      </table>

      <br>
      <font face="Trebuchet MS">Thanks for visiting</font>


      </body>
      </html>

      Show1.htm, Show2.htm, show3...4..

      <html>
      <head>
      <meta http-equiv="refresh" content="show2.htm">
      (show 2 wll redirect to show3, show 3 to show 4 etc)
      </head>
      <body>
      <img src=yourimage.JPG>
      </body>
      </html>

      ****************
      I'm still sleepy, that meta tag doesn't look right to me
      My editor just pastes it in. If yours does the same, do that..don't copy that line of code.
      ****************

      show 4.htm wouldn't redirect to anywhere, that's the last pic
      show5.htm redirects to show 6, show 7 show 8
      show 10 redirects to show 11, show 12.htm show13.htm...
      FootballHangout.com

      Comment


      • #4
        another way?
        sure there's countless ways you can do this
        the "3 slideshows at one time" statement you wrote makes it a little difficult.
        Javascript is pretty quick if you go from slideshow 1 to 2 to 3, back to 1 to 2 to 3 back to 1 to 2 to 3... it'll run thru pretty fast.
        PLUS not sure what you're using this for but chances are your visitor can't watch three things at once
        well here:


        instead of 3 iframes use 3 forms

        the face of the button can be an image so use a giant button
        HTML goodies, Javascript Kit...there are countless tutorials on this, it's just "style"
        name your forms whatever, whatever2, whatever3

        one javascript function

        two global variables
        your 3 array of images
        array(image1,image2,image3.........)
        x=1

        function changin(){
        y=array.length;
        for loop that runs Y amount of times
        (like for i=0, i<y, i++)
        document.formname.buttonname.value=array[i]
        x=x+1;(so now it'll be 2)
        document.formname[x].buttonname.value=array2[i]
        x=x+1;(now it'll be 3)
        document.formname[x].buttonname.value=array3[i]
        x=1(back to 1 as loop is going around again)

        } (loop return)

        x=1,y=1,i=0;(just in case someone runs the script more than once set variables to beginning #)
        return true;

        }

        call the function however you'd like
        OnLoad or with a click
        FootballHangout.com

        Comment


        • #5
          Hi,

          I have been having trouble with multiple slide shows myself. I came across this website a while ago and tried to study the source code but got confused.

          http://www.designerpearloutlet.com/i..._jewelry_store

          in particular this set of code that relates to the slide shows:

          <SCRIPT LANGUAGE="JavaScript">
          <!--
          //Begin ss1
          if (document.images){
          var imgc = new Array();
          imgc[0] = new Image();
          imgc[0].src = "images/hpr26i6a.jpg";
          imgc[1] = new Image();
          imgc[1].src = "images/hprcd15i13.jpg";
          imgc[2] = new Image();
          imgc[2].src = "images/hprcd15i15.jpg";
          imgc[3] = new Image();
          imgc[3].src = "images/hprcd15i09.jpg";
          imgc[4] = new Image();
          imgc[4].src = "images/hprmic14kgw.jpg";
          }
          var z = 0;
          delay1 = 3700;
          function rotate_ss1() {
          if (document.images) {
          document.ss1.src = imgc[z].src;
          (z == (imgc.length - 1)) ? z = 0 : z++;
          window.setTimeout("rotate_ss1()", delay1);
          }
          }
          //window.onload = rotate3;
          // End ss1 -->
          </SCRIPT>
          <SCRIPT LANGUAGE="JavaScript">
          <!--
          //Begin ss2
          if (document.images){
          var imga = new Array();
          imga[0] = new Image();
          imga[0].src = "images/hpr21i25.jpg";
          imga[1] = new Image();
          imga[1].src = "images/hpbcd12i21.jpg";
          imga[2] = new Image();
          imga[2].src = "images/hpr30i37.jpg";
          imga[3] = new Image();
          imga[3].src = "images/hpr23i9a.jpg";
          imga[4] = new Image();
          imga[4].src = "images/hp12061.jpg";
          }
          var n = 0;
          delay2 = 3100;
          function rotate_ss2() {
          if (document.images) {
          document.ss2.src = imga[n].src;
          (n == (imga.length - 1)) ? n = 0 : n++;
          window.setTimeout("rotate_ss2()", delay2);
          }
          }
          //window.onload = change;
          // End ss2 -->
          </SCRIPT>
          <SCRIPT LANGUAGE="JavaScript">
          <!--
          //Begin ss3
          if (document.images){
          var imgb = new Array();
          imgb[0] = new Image();
          imgb[0].src = "images/hpccd12i171.jpg";
          imgb[1] = new Image();
          imgb[1].src = "images/hpcr39i22a.jpg";
          imgb[2] = new Image();
          imgb[2].src = "images/hpcr00i31.jpg";
          imgb[3] = new Image();
          imgb[3].src = "images/hpcr00i01.jpg";
          imgb[4] = new Image();
          imgb[4].src = "images/hpccd12i89.jpg";
          }
          var y = 0;
          delay3 = 3700;
          function rotate_ss3() {
          if (document.images) {
          document.ss3.src = imgb[y].src;
          (y == (imgb.length - 1)) ? y = 0 : y++;
          window.setTimeout("rotate_ss3()", delay3);
          }
          }
          //window.onload = swap;
          // End ss3 -->
          </SCRIPT>
          </HEAD>


          do i have to create a ss1, ss2, and ss3 as seperate pages from the html document? If someone could explain how it works because it is confusing.

          I hope that this site helps you TheGnome.

          Thanks in advance.

          Comment


          • #6
            I think they're the names of forms
            look at the source code
            scroll down to the BODY section
            and SEARCH for ss1
            FootballHangout.com

            Comment


            • #7
              I went and looked, not forms it's right here
              <TD VALIGN="top"><FONT FACE="Arial,Geneva,Helvetica" SIZE="2"><A HREF="metals.htm"><!--<FONT COLOR="#333333"><B>Career/Evening</B></FONT><BR> -->
              <IMG SRC="images/hp_14ksterling_v.gif" ALT="14K/Sterling" WIDTH="28" HEIGHT="176" BORDER="0"><IMG NAME="ss1" SRC="images/hpr26i6a.jpg" ALT="Career" WIDTH="118" HEIGHT="176" BORDER="0" VSPACE="4"></A><BR>
              <BR>

              kinda ugly javascript if ya ask me
              FootballHangout.com

              Comment


              • #8
                4 Slide Shows on Page

                I hope we're talking about the same thing...

                this was the first javascript I ever used. It was so easy that I was completely misled about using javascript!

                I just used IFrames on the page, here's a link:
                http://www.regardless-shorthairs.com/Buck.htm

                Just right click to view source--code is there...

                And here's the code for the "images2/Buck_homepix.htm" page:

                (Remember, I don't claim to know what I'm doing. But this was really easy, and has worked well for me!)

                <HTML> <HEAD>

                <TITLE>Ch. Quick Buck Regardless -- Born to Love...
                </TITLE>


                <LINK rel="stylesheet" type="text/css" href="basic.css" title="style1">
                <!--Place this script in the HEAD section.-->
                <SCRIPT LANGUAGE = "JavaScript">
                function changePage()
                {
                var f = document.forms.navigation;
                var uri = f.pages.options[f.pages.selectedIndex].value;
                newPage =
                // These settings describe the pop-up browser
                // window - you can edit them.
                window.open(uri,"NewPage","height=480,width=640,location=no,scrollbars=yes,menubar=no,toolbar=no,res izable=yes,status=yes");

                }
                </script>
                <SCRIPT LANGUAGE="JavaScript">
                <!-- Begin
                var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
                current = 0;
                function next() {
                if (document.slideform.slide[current+1]) {
                document.images.show.src = document.slideform.slide[current+1].value;
                document.slideform.slide.selectedIndex = ++current;
                }
                else first();
                }
                function previous() {
                if (current-1 >= 0) {
                document.images.show.src = document.slideform.slide[current-1].value;
                document.slideform.slide.selectedIndex = --current;
                }
                else last();
                }
                function first() {
                current = 0;
                document.images.show.src = document.slideform.slide[0].value;
                document.slideform.slide.selectedIndex = 0;
                }
                function last() {
                current = document.slideform.slide.length-1;
                document.images.show.src = document.slideform.slide[current].value;
                document.slideform.slide.selectedIndex = current;
                }
                function ap(text) {
                document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
                rotate();
                }
                function change() {
                current = document.slideform.slide.selectedIndex;
                document.images.show.src = document.slideform.slide[current].value;
                }
                function rotate() {
                if (document.slideform.slidebutton.value == "Stop") {
                current = (current == document.slideform.slide.length-1) ? 0 : current+1;
                document.images.show.src = document.slideform.slide[current].value;
                document.slideform.slide.selectedIndex = current;
                window.setTimeout("rotate()", rotate_delay);
                }
                }
                // End -->

                </SCRIPT>

                </head>

                <BODY BACKGROUND="Walnut.jpg"" width=500
                <center>
                <form name=slideform>
                <table cellspacing=1 cellpadding=4 bgcolor="transparent">
                <tr><td align=center bgcolor="transparent">
                <font color="#ffe4b5"><b></b></font>
                </td></tr>

                <tr><td align=center bgcolor="transparent" width=300 height=226>
                <img src="Buck_Portrait3.jpg" name="show">
                </td></tr>

                <tr><td align=center bgcolor="transparent">
                <select name="slide" onChange="change();">
                <option value="Buck_Portrait4.jpg">Buck, '02
                <option value="Buck_Portrait.jpg">Buck, '98
                <option value="Buck_Running.jpg">Winter, '96
                <option value="Buck_Teddy.jpg">Baby Buck--4 weeks old
                <option value="Buck_Portrait3.jpg">Buck, '99
                <option value="Freida_Buck.jpg">Buck & Freida, '02
                <option value="Buck_Portrait2.jpg">Buck, '01
                </td></tr>

                <tr><td align=center bgcolor="transparent">
                <input type="button" style="background-color: transparent; color: #ffe4b5; border-left: 5px outset #ffe4b5; border-right: 3px groove #ffe4b5; border-top: 3px groove #ffe4b5; border-bottom: 4px outset #ffe4b5" onClick="first();" value="|<<" title="Beginning">

                <input type=button style="background-color: transparent; color: #ffe4b5; border-left: 5px outset #ffe4b5; border-right: 3px groove #ffe4b5; border-top: 3px groove #ffe4b5; border-bottom: 4px outset #ffe4b5" <input type=button onClick="previous();" value="<<" title="Previous">

                <input type=button name="slidebutton" style="background-color: transparent; color: #ffe4b5; border-left: 5px outset #ffe4b5; border-right: 5px inset #ffe4b5; border-top: 3px groove #ffe4b5; border-bottom: 4px outset #ffe4b5"onClick="ap(this.value);" value="Start" title="AutoPlay">

                <input type=button style="background-color: transparent; color: #ffe4b5; border-left: 3px groove #ffe4b5; border-right: 5px groove #ffe4b5; border-top: 3px groove #ffe4b5; border-bottom: 4px outset #ffe4b5" onClick="next();" value=">>" title="Next">

                <input type=button style="background-color: transparent; color: #ffe4b5; border-left: 3px groove #ffe4b5; border-right: 5px groove #ffe4b5; border-top: 3px groove #ffe4b5; border-bottom: 4px outset #ffe4b5" <input type=button onClick="last();" value=">>|" title="End">
                </form></center>
                </td></tr></table>
                </BODY></HTML>
                Last edited by Judy; Jun 20, 2002, 11:20 AM.
                How come this stuff seems so simple when you guys do it? It takes me three days to figure how to ask my questions half-way intelligently!
                Judy

                Comment

                Working...
                X