SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS slideshow problem.

    Hi,

    I have installed a JS slideshow on my site and have it working nicely. But I have one small(?) issue. Here is the homepage of the slideshow:

    http://www.barelyfitz.com/projects/s...ow/index.php/1

    The slideshow creates a dynamic <select> menu with an option for each slide. As the slide changes, the corresponding option in the menu does as well.

    The problem is when adding a fade effect for firefox browsers. When I add the fade, the select menu no longer changes with the slide.

    Here is the relevant code:

    ($linkbits is a variable containing the info for each slide)

    Code:
    <SCRIPT TYPE="text/javascript">
    <!--
    
    // Create the slideshow object
    ss = new slideshow("ss");
    
    // Set the delay between slides, 1000 = 1 sec
     ss.timeout = 9000;
    
    // By default, all of the slideshow images are prefetched.
    // If you have a large number of slides you can limit the
    // number of images that are prefetched.
    // ss.prefetch = 1;
    
    // By default the slideshow will repeat when you get to the end.
    // ss.repeat = false;
    
    $linkbits
    
    
    //-->
    </SCRIPT>
    
    <DIV ID="slideshow">
    
    <FORM ID="ss_form" NAME="ss_form" ACTION="" METHOD="GET">
    
    <DIV ID="ss_img_div">
    
    <A ID="ss_img_link" class="borderit" HREF="javascript:ss.hotlink()"><IMG ID="ss_img" NAME="ss_img" SRC="/gliggerimages/misc/bg.gif" STYLE="width:480px;filter:progid:DXImageTransform.Microsoft.Fade();" ALT="thiswebsiterules.com"></A>
    
    
    </DIV>
    <div ID="ss_text" style="display:inline; float:left; color: #305C2F; font-size:13px; background-image:url(/images/50percent.png);">
    
    <SCRIPT type="text/javascript">
    <!--
    
    // The contents of this DIV will be overwritten by browsers
    // that support innerHTML.
    //
    // For browsers that do not support innerHTML, we will display
    // a TEXTAREA element to hold the slide text.
    // Note however that if the slide text contains HTML, then the
    // HTML codes will be visible in the textarea.
    
    document.write('<TEXTAREA ID="ss_textarea" NAME="ss_textarea" ROWS="6" COLS="40" WRAP="virtual"><\/TEXTAREA>\n');
    
    ss.textarea = document.ss_form.ss_textarea;
    
    //-->
    </SCRIPT>
    
    </DIV>
    <DIV style="display:inline; float:right; padding-top:4px;" ID="ss_controls">
    <!--
    The following select list will be modified with the slide titles.
    -->
    <SELECT style="position:relative; top:-8px;" ID="ss_select" NAME="ss_select" ONCHANGE="ss.goto_slide(this.selectedIndex)">
      <OPTION>blah
      <OPTION>
      <OPTION>
      <OPTION>
      <OPTION>
    </SELECT>
    
    <a class="borderit" href="javascript:ss.previous()"><img border="0" src="/images/controls/control_rewind_blue.png" alt="Previous" /></a> <a class="borderit" href="javascript:ss.play()"><img border="0" src="/images/controls/control_play_blue.png" alt="Play" /></a> <a class="borderit" href="javascript:ss.pause()"><img border="0" src="/images/controls/control_pause_blue.png" alt="Pause" /></a> <a ID="ss_next" class="borderit" href="javascript:ss.next()"><img border="0" src="/images/controls/control_fastforward_blue.png" alt="Next" /></a>
    
    </DIV>
    
    
    
    </FORM>
    
    </DIV>
    
    
    <SCRIPT TYPE="text/javascript">
    <!--
    
    // Finish defining and activating the slideshow
    
    // Set up the select list with the slide titles
    function config_ss_select() {
      var selectlist = document.ss_form.ss_select;
      selectlist.options.length = 0;
      for (var i = 0; i < ss.slides.length; i++) {
        selectlist.options[i] = new Option();
        selectlist.options[i].text = (i + 1) + '. ' + ss.slides[i].title;
      }
      selectlist.selectedIndex = ss.current;
    }
    
    // If you want some code to be called before or
    // after the slide is updated, define the functions here
    
    ss.pre_update_hook = function() {
      return;
    }
    
    ss.post_update_hook = function() {
      // For the select list with the slide titles,
      // set the selected item to the current slide
      document.ss_form.ss_select.selectedIndex = this.current;
      return;
    }
    
    if (document.images) {
    
    
      // Tell the slideshow which image object to use
      ss.image = document.images.ss_img;
    
      // Tell the slideshow the ID of the element
      // that will contain the text for the slide
      ss.textid = "ss_text";
    
      // Randomize the slideshow?
      // ss.shuffle();
    
      // Set up the select list with the slide titles
      config_ss_select();
    
      // Update the image and the text for the slideshow
      ss.update();
    
      // Auto-play the slideshow
      ss.play();
    
    // Create a function to ramp up the image opacity in Mozilla
    var fadein_opacity = 0.04;
    var fadein_img = ss.image;
    function fadein(opacity) {
      if (typeof opacity != 'undefined') { fadein_opacity = opacity; }
      if (fadein_opacity < 0.99 && fadein_img && fadein_img.style &&
          typeof fadein_img.style.MozOpacity != 'undefined') {
    
        fadein_opacity += .05;
        fadein_img.style.MozOpacity = fadein_opacity;
        setTimeout("fadein()", 50);
      }
    }
    
    // Tell the slideshow to call our function whenever the slide is changed
    ss.post_update_hook = function() { fadein(0.04); }
    
    }
    
    //-->
    </SCRIPT>
    
    
    <SCRIPT TYPE="text/javascript">
    <!--
    
    // Make the slideshow accessible to search engines
    // and non-javascript browsers.
    //
    // The following function is normally left commented out.
    // It is used only to produce some HTML that you can copy
    // into the NOSCRIPT section below.
    // The HTML produced will contain all of the slideshow images,
    // plus the text for each image.
    
    // document.write("<PRE>" + ss.noscript() + "<\/PRE>");
    
    //-->
    </SCRIPT>
    
    <NOSCRIPT>
    
    <!--
    This is a version of the slideshow for search engines
    and non-javascript browsers
    -->
    
    </NOSCRIPT>
    I highlighted the parts I think re important heh.

    I dont know anything about js (or anything for that matter) but I am sure this must be fixable.

    Cheers,
    Ian
    Last edited by hcteks; Jan 15, 2008 at 21:17.

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    up


Bookmarks

Posting Permissions

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