Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Background color for Ultimate Fade-in slideshow

  1. #1
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Background color for Ultimate Fade-in slideshow

    Hi,

    I discovered the Ultimate Fade-in slideshow script today and have been playing with it. One minor "problem" is that the background of the image is black when it first loads. Since my page is white it's not as nice as if the background of the image was white. I've tried to set the background color of the DIV to white but that didn't help so my guess is that this is somewhere in the js code.

    Any ideas on how/where to fix this?

    Best regards,

    Arnor Baldvinsson

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    You may use overriding style to do this, ex:

    Code:
    <style type="text/css">
    #fadeshow1, #fadeshow1 .gallerylayer {
     background-color: white!important;
    }
    </style>
    Where fadeshow1 is the wrapperid/id for the container/target division for the slide show.
    - John
    ________________________

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

  3. #3
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John We'll try that

    Best regards,

  4. #4
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I am having the same exact problem as the OP, and the fix that John suggested is not working for me. What am I doing wrong?

    The site is here: http://upticon.com/

    The slideshow is just below the banner and navigation and consists of a series of quotes.

    The code looks like this:

    HTML:
    Code:
    <div id="quotes">
    <div id="quotes-padding"></div><!--this is just some empty space-->
    <div id="fadeshow1"></div><!--this is the js slideshow script-->
    </div><!--end quotes-->
    CSS:
    Code:
    #quotes {
    margin:0;
    padding:0;
    background:#ffffff url(images/quote-box-bg.jpg) 0 0 no-repeat;
    width:900px;
    height:200px;
    border:0;
    }
    
    #quotes-padding {
    margin:0;
    padding:0;
    height: 38px;
    }
    
    #fadeshow1 {
    border: 0;
    margin: 0 auto;
    padding:0;
    background-color: #ffffff !important;
    }
    Any suggestions? Thanks in advance!!

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

    Default

    I also saw this same exact question asked and answered here: http://www.dynamicdrive.com/forums/s...ad.php?t=49799

    ...with the same answer, and it also worked for them, but not working for me. I'm probably doing something obviously wrong, so hopefully you guys can correct my mistake. THANK YOU!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    You are not using the fix. Yes, you have:

    Code:
    #fadeshow1 {
    border: 0;
    margin: 0 auto;
    padding:0;
    background-color: #ffffff !important;
    }
    But that is not what I suggested. You can keep that if you like though, as it does do part of the job, and simply add (highlighted) after it:

    Code:
    #fadeshow1 {
    border: 0;
    margin: 0 auto;
    padding:0;
    background-color: #ffffff !important;
    }
    #fadeshow1 .gallerylayer {
     background-color: white!important;
    }
    - John
    ________________________

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

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    brookeln (11-17-2009)

  8. #7
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by jscheuer1 View Post
    But that is not what I suggested. You can keep that if you like though, as it does do part of the job, and simply add (highlighted) after it:

    Code:
    #fadeshow1 {
    border: 0;
    margin: 0 auto;
    padding:0;
    background-color: #ffffff !important;
    }
    #fadeshow1 .gallerylayer {
     background-color: white!important;
    }
    Thank you for pointing out my mistake - it now works. Much appreciated!

  9. #8
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Apologies for the months-old bump to this thread, however, how would I make the background transparent?

    I have a few different sized images and don't want any specific background except for the background that's on the site I'm making it for.

    Thanks.


    Edit: I'm using version 2.4
    Last edited by rbridgeman; 07-12-2010 at 09:18 PM. Reason: Added version.

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by rbridgeman View Post
    Apologies for the months-old bump to this thread, however, how would I make the background transparent?

    I have a few different sized images and don't want any specific background except for the background that's on the site I'm making it for.

    Thanks.


    Edit: I'm using version 2.4
    You can't do that as easily. You would think at first glance that making the background transparent would simply show whatever is behind the slide show.

    However, the slide show proper (not counting the descriptions and and controls, if any) is made up of three divisions of equal size, two of which are absolutely positioned on top of each other, each of which contain the entire array of the images. Both of these are contained in the third division. Most of this is all constructed by the script, so you don't see it in the HTML markup for the page.

    The fading effect is achieved by bringing one of the two contained divisions to prominence (higher z-index) and fading it in. After it fades in, the covered one is faded out and has its z-index lowered. It's a little more complicated than that. But that's the basic concept.

    If the background is transparent, and the images are of differing sizes (as in your case) and/or have transparent regions that don't match up, there will be bleed through of the faded out image.

    You can attempt to set the background to that of the site. If it's a solid color, you can do that as already discussed in this thread, and there's no problem.

    I suspect though that your site's background is more complex, involving at least a background image.

    If that's the case, you can set the same background image in the css for these three divisions that I've been mentioning. But unless your overall layout for the page and for the slide show stay in sync at various window sizes, it will be impossible to line up exactly for all possible window sizes.

    Also, if the background for the site is even more complex than just a background-image, it can get even more complex or even impossible.

    On the bright side, if it's just a background image, and one that will mesh well with itself regardless of its orientation, things are fairly simple.

    So, what do you have as the site background?

    In any case, for a background image you can do (in your stylesheet):

    Code:
    #fadeshow1, #fadeshow1 .gallerylayer {
     background: white url(background.jpg) 50px 25px !important;
    }
    where fadeshow1 is the wrapperid for the show, background.jpg is the image (include its path there too if different than the page's), 50px is the left offset for the background and 25px is the top offset. Use these last two items to get it to line up with the existing site background if possible.

    As I say there are situations where this will be nearly if not entirely impossible.

    There are other slide shows that fade that will not have this degree of difficulty in using a transparent background.

    If you want more help:

    Please post a link to a 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

  11. #10
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks, John for the lengthy reply.

    The site I'd be adding it to is (in place of the featured painting):
    http://www.beckmanart.com

    Edit: I might just add a background image as suggested and similar to the existing background by not identical. That could still likely achieve a good effect and not be entirely dominated by a single color.

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
  •