Results 1 to 9 of 9

Thread: Untimate Fading Slideshow - transparent gifs

  1. #1
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Untimate Fading Slideshow - transparent gifs

    Ultimate Fadein Slideshow (v1.51)

    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    I have to fade in and out gifs with transparent backgrounds.
    The script works fine provided I set the var fadebgcolor="", except it leaves the previous gif 100% visible behind the new one.
    What I need to do is fade out the previous gif at the same time as fading in the new one.

    Any ideas how to do this please?

    Ron
    Last edited by ddadmin; 11-24-2007 at 12:07 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The fadebgcolor should be set to an explicit color to prevent the previous image from showing through. This is because the script basically rotates two overlapping layers. Is there a reason why you can't just do that?

  3. #3
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,
    Yes because the gifs have transparent backgrounds and the main page background texture has to show through.

    Ron

  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

    Then you need to style the background image into the slide show's 'layers' (they are actually divisions) in such a way as to coincide with the background image of the page. Depending upon how complex an image it is, this will work (in your stylesheet, for one slide show):

    Code:
    #master0 div {
    background-image:url(whatever.gif);
    }
    If the image is too complex and the default positioning of it is off when using the above simple background-image value, left and top coordinates may be used, generally these can be guessed at and then fine tuned via trial and error:

    Code:
    #master0 div {
    background-image:url(whatever.gif) 200px 150px;
    }
    Negative values may be used. If you want more help:

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  5. #5
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John,

    Yes it's a bit of a complex one really.
    The background is fixed and the rest of the site scrolls.
    At the moment the background is just a repeated pattern, but I'm planning on making a larger repeating photograph or graphic for it.

    It's at www.smallholders.org

    Can't see an easy way around this yet.

    Ron

  6. #6
    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

    First, get rid of this (red), you aren't using it and it is preventing the slide show from working in most browsers:

    Code:
    			<script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages, 140, 117, 0, 6000, 1, "")
    new fadeshow(fadeimages2, 140, 117, 0, 6000, 0)
     
    </script>
    Just add to your style section:

    Code:
    <style type="text/css">
      body { 
      background-image: url("images/lgren051.jpg");
      background-position: 0% 0%;
      background-repeat: repeat;
      background-attachment: fixed
       }
    #master0 div {
      background-image: url("images/lgren051.jpg");
    }
    </style>
    - John
    ________________________

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

  7. #7
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's brilliant John.
    Many thanks.
    One day I'll get the hang of this Javascript.
    Too busy with php, mysql, and all that stuff at the mo.

    Thanks again.

    Ron

  8. #8
    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

    I noticed a few other things with your modified version of the script. For what you are doing, you would probably be happier with:

    Code:
    new fadeshow(fadeimages, 140, 117, 0, 6000, 1)
    instead of:

    Code:
    new fadeshow(fadeimages, 140, 117, 0, 6000, 1, "")
    That is, unless you really want the random display.

    Now I see that you have played with initial opacity and fade rate, but the way you did it seems to be making things a little choppier than they need to be.

    Where you have:

    Code:
    this.degree=0.1 //initial opacity degree (1%)
    it should be:

    Code:
    this.degree=0 //initial opacity degree (1%)
    for:

    Code:
    obj.degree+=1
    2 should do:

    Code:
    obj.degree+=2
    And I think you missed this one:

    Code:
    fadeshow.prototype.resetit=function(){
    this.degree=10
    var crossobj=iebrowser? iebrow . . .
    which should also be 0 for what you are going for:

    Code:
    fadeshow.prototype.resetit=function(){
    this.degree=0
    var crossobj=iebrow . . .
    - John
    ________________________

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

  9. #9
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks again John.

    Yes I admit to playing with it trying to see what did what.
    And many times forgot to change it back afterwards.

    Much better now.

    Ron

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
  •