PDA

View Full Version : Ultimate Fade-In Slideshow : png problem



Smivvy
12-07-2010, 09:54 PM
1) Script Title: Ultimate Fade-In Slideshow ( v 2.4 )

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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 !

Aimkat
12-09-2010, 05:36 PM
I'm having the same problem. Is there any way to fix this?

jscheuer1
12-09-2010, 06:01 PM
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:


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

Aimkat
12-09-2010, 06:22 PM
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/

jscheuer1
12-10-2010, 01:36 AM
Replace this in pages.css:


/** Fadeshow Slide Show **/

#fadeshow1 {
background-color: transparent!important;
}

with:


/** Fadeshow Slide Show **/

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

Smivvy
12-13-2010, 01:47 AM
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 ?

jscheuer1
12-13-2010, 02:24 AM
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:


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

Smivvy
12-13-2010, 08:44 AM
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.

Aimkat
12-13-2010, 04:18 PM
Replace this in pages.css:


/** Fadeshow Slide Show **/

#fadeshow1 {
background-color: transparent!important;
}

with:


/** 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! :)

almoes
12-27-2010, 09:52 AM
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:


<!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:


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

jscheuer1
12-27-2010, 06:21 PM
This:



#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;
}

Should be:


#fader, #fader .gallerylayer {
width: 366px;
height: 241px;
background-image: url(../Pics/slideshowhg.png) !important;
background-repeat:no-repeat !important;
background-color: transparent !important;
margin-left: 264px !important;
}

That might be a typo on slideshowhg.png. Typically that would be a b, not an h. Upper and lower case matter on the web as well, is it Pics or pics, something else? Is the rest of the path and filename correct?

The margin might not belong there once we bring in the gallerylayers. A separate selector for just #fader might be required for that:


#fader, #fader .gallerylayer {
width: 366px;
height: 241px;
background-image: url(../Pics/slideshowhg.png) !important;
background-repeat:no-repeat !important;
background-color: transparent !important;
}

#fader {
margin-left: 264px !important;
}

The background-image might need to be positioned.

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.

almoes
12-28-2010, 08:17 AM
Thanks a lot it works now. I missed to apply the css to #fader.gallerylayer. I somehow thought it applied only to the code of the person that started the post.