Results 1 to 7 of 7

Thread: Fade background in slide show

  1. #1
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fade background in slide show

    1) Script Title: Ultimate Fade in Slide show

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

    3) Describe problem: not really a problem per se, but a query....the script works fine for me, but is it possible to change the "var fadebgcolor" variable to say a textured background (jpg image) such as I have on all my pages? Since not all the images are identically sized, the background is evident and intrusive on some of them.

    thanks

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Yes you can. Just replace highlighted with the image you want:
    Code:
    var fadebgcolor="white"
    And change the highlighted:
    Code:
    document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
    to background-image

    You could also subtitute it with background, for further reading:
    http://www.w3schools.com/css/css_background.asp

    See if it helps.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Found a little error in your script rangana.
    Code:
    var fadebgcolor="white"
    Would have to be this:
    Code:
    var fadebgcolor="url('white')"
    But the highlighted would stilll be an image.
    Jeremy | jfein.net

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Yes, good call

    It's roughly 9pm here in the Philippines, and I guess I should sleep.
    Sidenote, see this link:
    http://dynamicdrive.com/forums/showthread.php?t=32953

    You might be able to help the OP.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

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

    You can also add a background image to the show by setting it in your stylesheet, ex:

    Code:
    #master0 div {
    background-image:url('whatever.jpg');
    }
    This would be for the the first slide show on a page. If using more than one, the second would be #master1, the next #master2, and so on.

    Often when using a background image with this script, you will want to use the background positioning property to get it to line up with your existing background image.

    One other thing, if you go with rangana's method (editing the script), there are actually three places it needs to be edited, not just the two rangana mentions.

    However, the style approach I mentioned is easier in most cases.
    - John
    ________________________

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

  6. #6
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    You can also add a background image to the show by setting it in your stylesheet, ex:

    Code:
    #master0 div {
    background-image:url('whatever.jpg');
    }
    This would be for the the first slide show on a page. If using more than one, the second would be #master1, the next #master2, and so on.

    Often when using a background image with this script, you will want to use the background positioning property to get it to line up with your existing background image.

    One other thing, if you go with rangana's method (editing the script), there are actually three places it needs to be edited, not just the two rangana mentions.

    However, the style approach I mentioned is easier in most cases.
    Where would I insert this in the script I have? (rank noobie that I am) and do I have to do anything else to make it work.......basically want the background of the fadeshow to be the same as the main page background

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

    It doesn't go in the script. It's css style. You can put it in the head of your page, right before the script, ex:

    HTML Code:
    <style type="text/css">
    #master0 div {
    background-image:url('whatever.jpg');
    }
    </style>
    
    <script type="text/javascript">
          
    /***********************************************
    * Ultimate Fade-In Slideshow (v1.51):  Dynamic Drive (http://www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
     
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["photo . . .
    For more information on what you can do with background and style, see:

    http://www.eskimo.com/~bloo/indexdot...colorbg/bg.htm

    or your favorite css reference.
    - 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
  •