Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2002
    Location
    Perth WA Australia
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 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
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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>

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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...

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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

  • #5
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    I think they're the names of forms
    look at the source code
    scroll down to the BODY section
    and SEARCH for ss1

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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

  • #8
    New Coder
    Join Date
    Jun 2002
    Location
    N.E. Ohio
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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; 06-20-2002 at 04:20 PM.
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •