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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Apr 2003
    Location
    New York
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slide Show help : /

    Hi Everyone,

    I'm trying to add a slide show to a message board but I don't really know how to. On my message board, I have a picture on the very middle top of the page and I wanted it to run as a slide show. I've looked into certain sites to find HTML codes for that but since I don't really comprehend those codes, I can't seem to see where there might be an error when I apply certain info to the codes. Can someone kindly help me with that? Thank you!!

    Here is the codes that I have: (if you have other easy codes for slide shows, I'd greatly appreciate that as well)
    ------------------------------------------------------------
    //-->Beginning of slide show-->>

    <html>

    <head>

    <!--
    Set up the caption font in the following style.
    Place the style script in the head of the page.
    //-->

    <style>
    .Caption {
    font-family: Arial;
    font-weight: bold;
    color:_____ #FFFFFF;
    }
    </style>

    <!--
    Place the following script in the head of the page.
    Follow the set-up instructions within the script.
    //-->

    <script>

    // (C) 2002 www.CodeLifter.com
    // http://www.codelifter.com
    // Free for all users, but leave in this header.

    // ==============================
    // Set the following variables...
    // ==============================

    // Set the slideshow speed (in milliseconds)
    var SlideShowSpeed = 3000;

    // Set the duration of crossfade (in seconds)
    var CrossFadeDuration = 3;

    var Picture = new Array(); // don't change this
    var Caption = new Array(); // don't change this

    // Specify the image files...
    // To add more images, just continue
    // the pattern, adding to the array below.
    // To use fewer images, remove lines
    // starting at the end of the Picture array.
    // Caution: The number of Pictures *must*
    // equal the number of Captions!

    Picture[1]_ = '3T_N1b.bmp';
    Picture[2]_ = 'Taj_N1b.bmp';
    Picture[3]_ = 'Taryll_N1b.bmp';
    Picture[4]_ = 'TJ_N2b.bmp';


    // Specify the Captions...
    // To add more captions, just continue
    // the pattern, adding to the array below.
    // To use fewer captions, remove lines
    // starting at the end of the Caption array.
    // Caution: The number of Captions *must*
    // equal the number of Pictures!

    Caption[1]_ = "The 3T's.";
    Caption[2]_ = "Taj Jackson.";
    Caption[3]_ = "Taryll Jackson.";
    Caption[4]_ = "T.J. Jackson.";


    // =====================================
    // Do not edit anything below this line!
    // =====================================

    var tss;
    var iss;
    var jss = 1;
    var pss = Picture.length-1;

    var preLoad = new Array();
    for (iss = 1; iss < pss+1; iss++){
    preLoad[iss] = new Image();
    preLoad[iss].src = Picture[iss];}

    function runSlideShow(){
    if (document.all){
    document.images.PictureBox.style.filter="blendTrans(duration=2)";
    document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
    document.images.PictureBox.filters.blendTrans.Apply();}
    document.images.PictureBox.src = preLoad[jss].src;
    if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
    if (document.all) document.images.PictureBox.filters.blendTrans.Play();
    jss = jss + 1;
    if (jss > (pss)) jss=1;
    tss = setTimeout('runSlideShow()', SlideShowSpeed);
    }

    </script>

    </head>

    <!--
    Add the onload=runSlideShow() event call to the body tag.
    //-->

    <body onload=runSlideShow() bgcolor=#000000>

    <!--
    The following table holds the images and captions.
    Place the table in your page where you want the slideshow
    to appear._ Follow the instructions for each table cell.
    //-->

    <table border=0 cellpadding=0 cellspacing=0">
    _ <tr>
    ___ <!--
    ___ The next table cell holds the images.
    ___ Set cell and image width and height the same.
    ___ The img src must have name=PictureBox in its
    ___ tag._ Usually the first image in the Picture
    ___ array in the script is used here.
    ___ //-->
    ___ <td width=350 height=280>
    ___ <img src="http://www.xsorbit4.com/users/tttkatia/Attachment/3T_N1b.bmp" name=[1][2][3][4]=350 height=280>
    ____ </td>
    _ </tr>
    _ <tr>
    ___ <!--
    ___ The next table cell holds the captions.
    ___ This table cell must have id=CaptionBox and
    ___ class=Caption in its tag. The default caption
    ___ shows whilst loading in all browsers; NS4
    ___ will show only the default caption, throughout.
    ___ //-->
    ___ <td id=CaptionBox class=Caption align=center bgcolor=#CCCC66>
    ___ The 3T Lounge Forum.
    ___ </td>
    _ </tr>
    </table>

    </body>

    </html>


    <<--!End of slide Show-->>
    ---------------------------------------------------------

    There are instructions in this too as you can see. It had mentioned something about preloading the images...Can someone explain that? I want to use pictures that already are linked to a website to make my slide show....possible or not?

    Any help is appreciated. Thank you! : )

    Sincerely,
    Katia

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've got a slideshow script that's easy, but, I haven't yet incorporated IE's visual transitions. Is that something you really want? If so, maybe I can stick it in today
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #3
    New to the CF scene
    Join Date
    Apr 2003
    Location
    New York
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Hi Beetle,

    I would appreciate that very much thank you. If it's not too much to ask today would be great but of course, no rush . Thanks again!

    Sincerely,
    Katia

  • #4
    Banned
    Join Date
    Mar 2003
    Posts
    224
    Thanks
    0
    Thanked 0 Times in 0 Posts
    just name an image and set intervals to go through an array and change it.

    img[1] =
    img[1] =

    etc..


    thne

    for (i=0;img.lenth;i++){
    slideshow.src = img[i]
    }


    <img id="slideshow">


    right?

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Piece of cake

    http://www.peterbailey.net/dhtml/ss_with_filters.htm

    Only needed to add about 10 lines of code.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #6
    New to the CF scene
    Join Date
    Apr 2003
    Location
    New York
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Thank you very much! I'm looking into it now....remember, I don't really know HTML that much, lol...so those codes look a bit confusing to me...I'll let you know if I get it to work. Thanks again!

    Sincerely,
    Katia

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Make sure to download both js files, and feel free post here about getting your own show running.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    New to the CF scene
    Join Date
    Apr 2003
    Location
    New York
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi again Beetle,

    I want to run the slideshow on a message board and someone told me that I can't....can you check this link and tell me if i can or can't? lol Thanks again...

    http://www.xsorbit4.com/users/tttkatia//index.cgi

    Sincerely,
    Katia

    PS. The pic at the very top is the pic that I want to run as a slide show...along with 3 other pics (which are not shown since I can't get to run the slide show yet)

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't see why you can't. How much control do you have over the source-code in the page? Can you give the image an id?

    Who told you that you can't?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #10
    New to the CF scene
    Join Date
    Apr 2003
    Location
    New York
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know how much control I have really...I've used some other codes and they don't all work. The tech people of that site told me they use cgi/perl language. How do I find out if i can give an image an id? coz i don't know if i can or can't...

    My fiance told me that I can't use the slideshow there, maybe he doesn't understand what I want to do, lol...but oh well .

    Thanks again for your help...

    Sincerely,
    Katia

  • #11
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, if you can edit the HTML output, then this will work. I see the other slideshow code in there so I get the impression that you can...
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #12
    New to the CF scene
    Join Date
    Apr 2003
    Location
    New York
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Um, I don't mean to sound annoying but can you post the codes here for me? I check the Microsoft site you gave me and I don't really know which one to use. All i want are the codes for a slide show that runs automatically ...If it's not too much to ask, putting the codes here would be really really really helpful . Thanks a million!

    Sincerely,
    Katia

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, first you need to download these two JS files

    1) slideshow.class.js
    2) timer.class.js

    Save and upload them to your webserver.

    Then, include them into the page
    Code:
    <script type="text/javascript" src="path/to/file/slideshow.class.js"></script>
    <script type="text/javascript" src="path/to/file/timer.class.js"></script>
    Then, give the <img> in the HTML an ID. Whatever ID you'd like, such as "ssPic"

    Then, create a <script> block and a function to initialize the slideshow. I abitrarily use init()
    Code:
    <script type="text/javascript">
    function init()
    {
        var ssData = [
            ['3T_N1b.bmp', 'The 3T\\'s.'],
            ['Taj_N1b.bmp', 'Taj Jackson.'],
            ['Taryll_N1b.bmp', 'Taryll Jackson.'],
            ['TJ_N2b.bmp', 'T.J. Jackson.']
            ];
        var ss = new SlideShow( 'ssPic', '', '', '', '/users/tttkatia/', ssData, 1, 1 );
        ss.addFilter( 'progid:DXImageTransform.Microsoft.Fade(duration=2)' );
        ss.play( 5000 );
    }
    </script>
    Note #1: the 5th parameter is the base URL for the images. I stuck this in, but it's wrong, as your images aren't located there. You will need to put in the correct URL.

    Note #2: For the Fade transition, the duration=2 is the duration of the fading in seconds.

    Note #3: ss.play( 5000 ); is what starts the slideshow. 5000 is the delay between slides in milliseconds, so what you see here is equivalent to 5 seconds.

    Note #4: Using these values, the transition will take 2 seconds, and the time between slides is 5, so each slide will be fully visible for only 3.

    Lastly, in the <script> tag, put this
    Code:
    onload = init;
    OR, add this to the body tag
    Code:
    <body onload="init()">
    That should do it
    Last edited by beetle; 04-04-2003 at 08:58 PM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #14
    New to the CF scene
    Join Date
    Apr 2003
    Location
    New York
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want to thank you very much for your help Beetle!! I'm sure this will work....it doesn't look too complicated, haha . I will do so later when I go home coz I'm currently at work so I'll download the files later and I'll let you how the settings went. Again, thanks a million!

    Sincerely,
    Katia


  •  

    Posting Permissions

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