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

Thread: Ultimate Fade-In Slideshow : png problem

  1. #1
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-In Slideshow : png problem

    1) Script Title: Ultimate Fade-In Slideshow ( v 2.4 )

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

    3) Describe problem: Using png instead of jpg -
    Hi Guys, can you help with a little problem I'm having with the slideshow script - I need to use png's with transparent backgrounds for the images instead of jpg's , as the fade in images are positioned on an image background. If the background was a solid color I'd be fine ! Is there a code snippet I need to put in the js to recognize the png's and not have a black background appear in place of the transparency ? The current test page here - www.eyenesspartners.com/andys/9.htm , the offending images bottom right.
    Thanks !

  2. #2
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I'm having the same problem. Is there any way to fix this?

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

    In Smivvy's case the background image is all one solid color except at its edges where the slideshow is not and shouldn't be. So for that, it's easy. Just set the background color override in style for that show to match that of the image's main color:

    Code:
    <style type="text/css">
    #fadeshow1, #fadeshow1 .gallerylayer {
    	background-color: #eaebea!important;
    }
    </style>
    Put that in the head of the page or put its rule in an existing stylesheet. The !important keyword is required to prevent the script from switching it back to black.

    For Aimkat, it might be as simple, though a different color probably. But likely there's a more complex background image that needs to be positioned to match up with one beneath it. Each layer and the show itself needs background. Otherwise slides with transparent sections will cause bleed through. Unless those transparent sections are in exactly the same spot in each image that is.

    Sometimes the layout is too fluid to permit positioning like I'm mentioning. So to see if it could even work, and to give more than just general suggestions if it can:

    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

  4. #4
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I wish mine was simple enough to just change the background color, but I have an image in the background that I want to show through the slide show. Here's a link to the still-in-progress site I'm working on: http://74.52.114.162/~newworld/

  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

    Replace this in pages.css:

    Code:
    /** Fadeshow Slide Show **/
    
    #fadeshow1 {
    	background-color: transparent!important;
    }
    with:

    Code:
    /** Fadeshow Slide Show **/
    
    #fadeshow1, #fadeshow1 .gallerylayer {
    	width: 980px;
    	height: 250px;
    	background: transparent url(images/bkgd.jpg) center -207px !important;
    }
    - John
    ________________________

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

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

    Aimkat (12-13-2010)

  7. #6
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks John !

    Thank you for the fix ! Could I use the transparent fix if I was using the same image rollover on a different background of, say, a swirled effect ? Or if the rollover was positioned over the edge of the faded background image, say further to the left ?
    Last edited by Smivvy; 12-13-2010 at 01:48 AM. Reason: addition

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

    I'd say probably no, probably not the same fix. It could. Something similar though most likely, as long as the layout doesn't preclude it from working. What the:

    Code:
    #fadeshow1, #fadeshow1 .gallerylayer {
    	width: 980px;
    	height: 250px;
    	background: transparent url(images/bkgd.jpg) center -207px !important;
    }
    does is set as a background image for the target division and the two script generated gallery layer divisions as the same image that is behind the slideshow. In addition to that it positions said background to line up with the image behind the show.

    If everything else is the same, it could work simply by substituting the new image. But if the layout changes or if the image is different in some consequential way, additional tweaks/changes to the style rules may be required to get everything to line up again. And if things change too much with the overall layout, it might not be possible at all with a different or even the same background image.
    - John
    ________________________

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

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

    Default All good John !

    Hey, thanks for the prompt reply. I reckon that I can work with your fix and not worry about moving the image to the left. My client has a new layout submitted and the moving of the image will not be a problem. Just thought that a reply and the subsequent thank you would be appreciated - so - thanks !!
    Appreciate your input and help.
    Smivvy.

  10. #9
    Join Date
    Oct 2008
    Posts
    12
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Replace this in pages.css:

    Code:
    /** Fadeshow Slide Show **/
    
    #fadeshow1 {
    	background-color: transparent!important;
    }
    with:

    Code:
    /** Fadeshow Slide Show **/
    
    #fadeshow1, #fadeshow1 .gallerylayer {
    	width: 980px;
    	height: 250px;
    	background: transparent url(images/bkgd.jpg) center -207px !important;
    }
    That worked great. Thank you so much!

  11. #10
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    I have exactly the same problem. I use the fader on a div tag which is placed over a background and my pictures have a transparent frame. I tried to apply the code suggested in the post but it doesn't work.

    This is the html code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="Style/home.css">
    
     <script type="text/javascript" src="Lib/Fader/jquery.min.js"></script>
    	<script type="text/javascript" src="Lib/Fader/fadeslideshow.js">
    	  /***********************************************
    	  * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    	  * This notice MUST stay intact for legal use
    	  * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    	  ***********************************************/
    	</script>
    	
    	<script type="text/javascript">
    	  var mygallery = new fadeSlideShow({
    	    wrapperid: "fader",
    	    dimensions: [366, 241],
    	    imagearray: [
    			["http://www.bla.es/Tests/NewWeb/Pics/slideshowhg.png"],
    			["http://www.bla.es/Tests/NewWeb/Pics/slideshow1.png"],
    			["http://www.bla.es/Tests/NewWeb/Pics/slideshow2.png"],
    			["http://www.bla.es/Tests/NewWeb/Pics/slideshow2.png"],
    			["http://www.bla.es/Tests/NewWeb/Pics/slideshow3.png"],
    			["http://www.bla.es/Tests/NewWeb/Pics/slideshow4.png"],
    			["http://www.bla.es/Tests/NewWeb/Pics/slideshow5.png"],
    			["http://www.bla.es/Tests/NewWeb/Pics/slideshow6.png"]
    		],
    	    displaymode: { type: 'auto', pause: 2500, cycles: 0, wraparound: false },
    	    persist: false,
    	    fadeduration: 700,
    	    descreveal: "always",
    	    togglerid: ""
    	  })
    	</script>
    
    </head>
    <body>
    <div class="main">
    	<div class="topBorder"></div>
    	<div id="fader"></div>
    </div>
    	
    </body>
    </html>
    and the last try of css:

    Code:
    #fader{
    width: 366px;
    height: 241px;
    background-image: url(../Pics/slideshowhg.png) !important;
    background-repeat:no-repeat !important;
    background-color: transparent !important;
    margin-left: 264px !important;
    }
    I also tried it the css all in one line using the background attribute.

    Any ideas how to get rid of the black square? Thanks.
    Last edited by jscheuer1; 12-27-2010 at 06:08 PM. Reason: format code

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
  •