Results 1 to 3 of 3

Thread: Adding line of HTML to slideshow to show "Picture 1 of xxx" etc

  1. #1
    Join Date
    Oct 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Adding line of HTML to slideshow to show "Picture 1 of xxx" etc

    1) Script Title: Preloaded Slideshow Script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...eloadslide.htm

    3) Describe problem:
    I would like to be able to add a line of text below the picture that says, for example, "Image 1 of 100" and have it change automatically when the user clicks the Previous or Next button. It already has it showing in the status bar but I'd like it to be on the actual webpage instead... Any help?

    Thanks in advance!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    Find this function and add the red parts:

    Code:
    function ShowSlide(Direction) {
    var ddiv=document.getElementById? document.getElementById('ddiv') : document.all['ddiv'];
       if (SlideReady) {
          NextSlide = CurrentSlide + Direction;
          // THIS WILL DISABLE THE BUTTONS (IE-ONLY)
          document.SlideShow.Previous.disabled = (NextSlide == 0);
          document.SlideShow.Next.disabled = (NextSlide == 
    (Slides.length-1));    
     if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
                document.images['Screen'].src = Slides[NextSlide].src;
                CurrentSlide = NextSlide++;
                Message = 'Picture ' + (CurrentSlide+1) + ' of ' + 
    Slides.length;
                self.defaultStatus = Message;
                ddiv.innerHTML = Message;
                if (Direction == 1) CacheNextSlide();
          }
          return true;
       }
    }
    Add this to the body markup:

    Code:
    <form name="SlideShow">
    <table>
    <tr>
       <td colspan=2><img name="Screen" width=140 height=225></td>
    </tr>
    <tr>
        <td colspan="2"><div id="ddiv"></div></td>
    </tr>
    <tr>
       <td><input type="button" name="Previous" 
    value=" << "
    onClick="ShowSlide(-1)"></td>
       <td align="right"><input type="button" name="Next"
    value=" >> " onClick="ShowSlide(1)"></td>
    </table>
    </form>
    Last edited by jscheuer1; 10-10-2006 at 09:57 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, it works great!!!

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
  •