Web Analytics Made Easy - StatCounter Multiple Slidshows - CodingForum

Announcement

Collapse
No announcement yet.

Multiple Slidshows

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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
    Tags: None
  • #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.

          Freshwater Pearl Jewelry, Bridal and Wedding Jewelry at Designer Pearl Outlet
          http://www.designerpearloutlet.com/index.htm?source=overture_jewelry_store
          Freshwater Pearl Jewelry. Elegant bridal and wedding jewelry, alluring evening and fine career jewelry, fun child fashion jewelry, 14k gold and sterling silver accents on pearl necklaces, bracelets, earrings in classic & casual styles. The perfect fashion accessory for yourself, or as a great gift. Choose from over 100 styles of freshwater pearls in black, white, pink, gray at affordable prices.


          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

                Previous template Next
                Working...
                X