Help with a slide show

Discussion in 'Javascript' started by ATS, Nov 28, 2005.

  1. ATS

    ATS Guest

    I'm trying to set up a slide show on a web page using Javascript. Here is
    the code I have so far:

    <script language="javascript">

    alert("**in test area 1");

    slides = new Array();
    slides[0] = new Image();
    slides[1] = new Image();
    slides[0].scr = "Bag_W4S.jpg";
    slides[1].scr = "Coat_W2S.jpg";

    j = 0;

    alert("**in test area 2");

    Function runSlides()
    {
    document.images.slides.src = slides[j].src;
    j = j + 1;
    if (document.all)
    {
    document.images.slides.style.filter="blendTrans(duration=2)";
    document.images.slides.filters.blendTrans.Apply();
    }
    if (document.all)
    {
    document.images.slides.filters.blendTrans.Play();
    }
    if (j >= 1)
    {
    j=0;
    }
    t = setTimeout('runSlides()', 5000);
    }
    </script>

    <link href="lwespirit.css" rel="stylesheet" type="text/css" />

    </head>

    <body onload="runSlides();">
    <div align="center" class="style1">
    <h2><img src="boostertopbanner.jpg" alt="Banner" width="600" height="120"
    /></h2>
    <h2>Lincoln-Way East Spirit Wear</h2>
    </div>

    <img src="Hat2_G2S.jpg" alt="LWE Spiritwear" width="100" height="75"
    name="slides" id="slides" />

    There seems to be a basic problem as the two "test" alerts never happen. If
    they did, does the code look correct? I would greatly appreciate any help
    as this is due VERY shortly and I just wanted to add this extra touch.

    Where can I find out what the "blendTrans," "style.filter" v. "filters" and
    questions like that?

    Lee
     
    ATS, Nov 28, 2005
    #1
    1. Advertising

  2. ATS

    ATS Guest

    I found the first mistake. The problem now is I don't get a translation
    between the pictures.

    Any help would be appreciated.

    Lee
     
    ATS, Nov 28, 2005
    #2
    1. Advertising

  3. ATS

    Mick White Guest

    ATS wrote:

    > I found the first mistake. The problem now is I don't get a translation
    > between the pictures.
    >
    > Any help would be appreciated.
    >
    > Lee
    >
    >

    First, take care of your syntax errors:
    scr >> src
    Function >> function
    Mick
     
    Mick White, Nov 28, 2005
    #3
  4. ATS

    RobG Guest

    ATS wrote:
    > I'm trying to set up a slide show on a web page using Javascript. Here is
    > the code I have so far:
    >
    > <script language="javascript">


    Language is deprecated, type is required:

    <script type="text/javascript">

    >
    > alert("**in test area 1");
    >
    > slides = new Array();


    Even global variables should be declared with the 'var' keyword (thought
    it's not absolutely required) and an initialiser is shorter. It also
    isn't a good idea to have a global variable called 'slides' and an image
    named 'slides', it's too easy to get them confused. Re-name the slides
    array to something like:

    var slideArray = [];


    > slides[0] = new Image();
    > slides[1] = new Image();
    > slides[0].scr = "Bag_W4S.jpg";


    Image objects have a src attribute, not scr:

    slideArray[0] = new Image();
    slideArray[0].src = "Bag_W4S.jpg";
    slideArray[1] = new Image();
    slideArray[1].src = "Coat_W2S.jpg";


    > slides[1].scr = "Coat_W2S.jpg";


    again ------^^^

    But it's probably better to put the image src attributes in an array and
    load from there:

    var slideSrcArray = ['Bag_W4S.jpg', 'Coat_W2S.jpg'];
    var slideArray = [];
    for (var i=0, len=slideSrcArray.length; i<len; ++i){
    slideArray = new Image();
    slideArray.src = slideSrcArray;
    }

    Now you just add/remove images in the src array and the slideshow is
    modified.


    >
    > j = 0;


    It's not good to use counters as global variables, it's very easy to get
    them mixed up with what should be local variables. Below shows how to
    keep it local.


    >
    > alert("**in test area 2");
    >
    > Function runSlides()

    --^

    Fix the syntax error and pass j to the function:

    function runSlides(j)
    {
    var j = j || 0;


    Just in case j isn't passed to the function.


    > {
    > document.images.slides.src = slides[j].src;


    You need to set the new src later in the script.

    > j = j + 1;


    ++j or j+=1 would be better, but not needed (see below)

    > if (document.all)


    Why test for document.all when what you really want to test for is
    support for filters and style object:

    var imgObj = document.images.slides;
    var imgFilter;
    if ( (imgFilter = imgObj.style)
    && (imgFilter = filters)

    > {
    > document.images.slides.style.filter="blendTrans(duration=2)";
    > document.images.slides.filters.blendTrans.Apply();
    > }


    Here is where you need to set the new src.

    imgObj.src = slideArray[j].src;


    > if (document.all)
    > {
    > document.images.slides.filters.blendTrans.Play();



    Test for filters, not document.all - do you *know* whether all browsers
    with (detectable) support document.all also support IE's filters?

    if (imgObj.filters){
    imgObj.filters.blendTrans.Play();
    }


    > }
    > if (j >= 1)
    > {
    > j=0;
    > }


    Set j depending on the length of your images array:

    j = ++j % slideArray.length;


    > t = setTimeout('runSlides()', 5000);


    t is only needed if you intend stopping the slideshow.

    [...]

    > There seems to be a basic problem as the two "test" alerts never happen. If


    That indicates basic syntax errors that stop the script from running at
    all. Use Firefox/Mozilla/Netscape and use the JavaScript console to
    find errors.


    > they did, does the code look correct? I would greatly appreciate any help
    > as this is due VERY shortly and I just wanted to add this extra touch.


    There's a working version below. IE users will see the fade transition,
    other users will just see the images swap from one to the next.


    >
    > Where can I find out what the "blendTrans," "style.filter" v. "filters" and
    > questions like that?


    MSDN:

    <URL:
    http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/filter.asp
    >


    <URL:
    http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp >



    <head>
    <title></title>
    <script type="text/javascript">

    var slideSrcArray = ['a.jpg','b.gif'];
    var slideArray = [];
    for (var i=0, len=slideSrcArray.length; i<len; ++i){
    slideArray = new Image();
    slideArray.src = slideSrcArray;
    }

    function runSlides( j )
    {
    var j = j || 0;
    var imgObj = document.images && document.images.slides;
    if (!imgObj) return;
    if ( imgObj.style && imgObj.filters ) {
    imgObj.style.filter = "blendTrans(duration=2)";
    imgObj.style.filter = "blendTrans(duration=crossFadeDuration)";
    imgObj.filters.blendTrans.Apply();
    }

    imgObj.src = slideArray[j].src;

    if (imgObj.filters){
    imgObj.filters.blendTrans.Play();
    }

    j = ++j % slideArray.length;
    setTimeout('runSlides(' + j + ')', 3000);
    }
    </script>
    </head>
    <body onload="runSlides();">

    <img src="b.gif" alt="LWE Spiritwear" width="100" height="75"
    name="slides" id="slides">

    </body>


    --
    Rob
     
    RobG, Nov 29, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?UnVkeQ==?=

    How to build a slide show?

    =?Utf-8?B?UnVkeQ==?=, May 5, 2005, in forum: ASP .Net
    Replies:
    7
    Views:
    538
    Brian Cryer
    May 9, 2005
  2. =?Utf-8?B?UnVkeQ==?=

    Slide show and Sql

    =?Utf-8?B?UnVkeQ==?=, May 10, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    589
    Lucas Tam
    May 10, 2005
  3. akshar108 via DotNetMonster.com

    get all word of slide through aspose.slide

    akshar108 via DotNetMonster.com, Oct 30, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    629
    akshar108 via DotNetMonster.com
    Oct 30, 2007
  4. Gerald Bauer
    Replies:
    0
    Views:
    298
    Gerald Bauer
    Aug 26, 2008
  5. banyan

    Slide-in & slide-out Scroller Help!

    banyan, Nov 16, 2005, in forum: Javascript
    Replies:
    0
    Views:
    145
    banyan
    Nov 16, 2005
Loading...

Share This Page