Results 1 to 2 of 2

Thread: Slideshow background not transparent, timing off

  1. #1
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slideshow background not transparent, timing off

    1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

    3) Describe problem: I have been using this script for a long time and love it. I recently have been tasked with enlarging the slideshow - which is fine - and cascading a background behind it. The reason being the company I work for wants to put transparent png's in the slideshow and use the backgrounds behind them as the image backgrounds to make it seem as the background extends 100% width. The background would also change depending on the image in the slideshow. My issue is twofold:

    1)I have successfully managed to rotate the background images using the built-in onslide function. I have a simple script where the function uses the index value that is passed through to rotate through a loop of backgroundImages. However, there is a delay between when the slideshow image switches, and when this backgroundImage switches.The fade itself is also not very smooth. Is there any way to remove the delay and smooth the transition?

    2)I have tried to remove the background colors from the slideshow itself, as using a transparent PNG shows a full black background. I have found three instances in the script where the background is called as black; Removing at least the first two, on lines 48 and 54, removes the background as i would like - however, the images in the slideshow then stack up so that at all times, the current image and the most recent previous image also show up.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    You need background, otherwise there is bleed through. Usually that request (transparent background) isn't accompanied by a request to rotate backgrounds. Regardless, the solution is the same. If you want a background image, it has to be assigned to the .gallerylayer divs. There are two of those, the markup generated by the script is like so:

    HTML Code:
    <div id="fadeshow1" style="position: relative; visibility: visible; background-attachment: scroll; background-repeat: repeat; background-image: none; background-position: 0% 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: black; overflow-x: hidden; overflow-y: hidden; width: 250px; height: 180px;">
      <div class="gallerylayer" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-attachment: scroll; background-repeat: repeat; background-image: none; background-position: 0% 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: black; z-index: 1000; opacity: 1;">
        <img src="../dynamicindex4/pool.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: none;">
        <img src="../dynamicindex4/cave.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: inline; margin-left: 0px; margin-top: 0px;">
        <img src="../dynamicindex4/fruits.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: none;">
        <img src="../dynamicindex4/dog.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: none;">
      </div>
      <div class="gallerylayer" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-attachment: scroll; background-repeat: repeat; background-image: none; background-position: 0% 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: black; opacity: 1; z-index: 999;">
        <img src="../dynamicindex4/pool.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: inline; margin-left: 0px; margin-top: 0px;">
        <img src="../dynamicindex4/cave.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: none;">
        <img src="../dynamicindex4/fruits.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: none;">
        <img src="../dynamicindex4/dog.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: none;">
      </div>
      <img src="loading.gif" style="position: absolute; left: 98px; top: 35px; display: none;">
    </div>
    In my browser the code in the above block gets wrapped, which is unfortunate, it's clearer without that. But try to notice the two .gallerylayer divs. They're both almost the same. Their contents are about the same as well. The only differences are in style, these govern which layer is in the foreground at any given time, what degree of opacity that layer has, and which image within that layer and the layer 'beneath it' (the current background layer) is being displayed.

    If we want it to look like the background image behind the slideshow itself is showing through, we set the the background of each of these layers to that same image. To get it to line up with the background image behind the slideshow we use the background position. Depending upon the layout, this can be set and forgotten, or needs to be recalculated as the page is resized if that moves the slideshow in relation to the overall background.

    That can all be set in overriding css style, without editing the script. If recalculation of position is required, that can be done by adding some script code, again, without editing the main script. But that only takes care of #2 from your post. For #1 you need an onbeforeslide function. The script doesn't have that. However, I made a unit that can add extra buttons to the slideshow:

    http://www.dynamicdrive.com/forums/e...e-in-slideshow

    You don't need to use its extra buttons capability, but the unit also adds an onbeforeslide function that can be used in the same way as the current onslide function is used.

    Now, I'm not certain if this onbeforeslide capability requires certain settings or not. I would have to play with it. And the overriding style you would need would have to customized to the page as far as positioning goes, as would any added script code to position on the fly if that's required.

    So, if you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

    That is, put up a demo of what you described in your post with the bleed through and transition of the backgrounds happening, even though they're happening at the wrong time. I can use it to make the changes I outlined above.

    The only thing I'm not certain of is:

    The fade itself is also not very smooth
    I'm not sure what you mean by that, nor of what might be causing it. If you mean the fade in general, even without the modifications you've already made, the length of that can be adjusted using the fadeduration property of the on page part of the script. If you mean that the fade is jerky, that's governed by the browser, the OS, and the computer. Browser mostly, but the other two are factors. Some combinations are just smoother at javascript animation than others. In most cases, unless the browser and/or OS and equipment are old, the fade transition is pretty smooth. Adding in a background transition might cause some browsers to be less smooth.
    Last edited by jscheuer1; 04-09-2013 at 06:14 AM.
    - John
    ________________________

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

Similar Threads

  1. Ultimate Fade-In Slideshow: Background NOT transparent
    By avenue47 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 09-22-2012, 05:03 AM
  2. Ultimate Fade-In Slideshow timing
    By Puckspeare in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-21-2011, 04:07 AM
  3. Ultimate Fade-in Slideshow v2.4 Timing Issues
    By krislynch in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-22-2010, 03:07 AM
  4. Replies: 1
    Last Post: 12-11-2010, 05:41 AM
  5. how to slow down fade timing in ultimate slideshow?
    By tarkin789 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-05-2008, 06:55 AM

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
  •