Results 1 to 4 of 4

Thread: Adding a fade-in effect to a simple slideshow

  1. #1
    Join Date
    Jul 2008
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Adding a fade-in effect to a simple slideshow

    http://www.corinnesilva.com/new/veterans.php
    I am using a very simple slideshow script from codelifter.com - http://www.codelifter.com/main/javas...lideshow4.html
    It does pretty much everything I need it to do (particularly allowing me to have a long description/caption next to the image).
    In a perfect world, the slides would fade between each other as I click through them (at the moment it does that in IE only). Is there a bit of javascript I can add to make this happen?

    And while I'm looking for a perfect slideshow - is there a way to have an image counter (preferably in the table cell between the next and previous arrows).

    Any help gratefully received.

    Thanks.

    Jude

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

  3. #3
    Join Date
    Jul 2008
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Yes I'm aware of Swiss Army Slideshow but I'm such a novice that I don't know how to tweak stuff to get the things I want. I tried it out and didn't know how to move the buttons or the captions. I know you've updated the code but I'm baffled by the style hooks and what to do with them. Is there a tutorial? Should I post this on the DD forum?

    Jude x

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by judeabb View Post
    I know you've updated the code but I'm baffled by the style hooks and what to do with them. Is there a tutorial? Should I post this on the DD forum?
    Yes, if you want more help, post in the DD scripts help section. The demo page for Swiss Army has a tutorial of the configuration options.

    The updated script:

    http://home.comcast.net/~jscheuer1/side/files/swiss.js

    also has these added style hooks:

    • #outer$ - outer division containing the show images.
    • #master$ - division directly nested in #outer$, contains the two divisions that hold the tables that hold the images.
    • #canvas$_0 - one of the two divisions that holds a table that holds the images.
    • #canvas$_1 - the other of the two divisions that holds a table that holds the images.
    • #desc$ - outer division containing the descriptions (holds the description prefix text, if used, and the below description span).
    • #imgdsc$ - span that holds the descriptions.
    • #counter$ - outer division holding the counter.
    • #thecnt$ - span updated with actual image counter.
    • #controls$ - outer division for the controls, if using images for buttons, this is actually a table.
    • #prev$ - input button for previous image.
    • #gostp$ - input button that starts or stops the slide show (a toggle).
    • #next$ - input button for next image.
    • #goto$ - text input for jumpto feature.
    • #go$ - input button "GO" button for jumpto feature.


    Now each slideshow on your page has a number. The first one is 0, the second one is 1 and so on. If you only have one slideshow, it's 0. So to style the description's outer container for it, use a style rule like (for example):

    Code:
    #desc0 {
     position: relative;
     top: - 5px;
    }
    - John
    ________________________

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

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
  •