Ultimate Fade-in slideshow (v2.1)-cant get bkgrd to be transparent

[rkk]

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

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

3) Describe problem: cant get bkgrd to be transparent

currently its has a black bkgrd which wont disappear regardless of what i do
http://www.engagedesign.com/headshots.html

#fadeshow1 .gallerylayer img {border: 1px solid white!important; background-color:transparent!important;}

.headshot_gallery1 { position:absolute; top:155px; left:50px; background-color:transparent!important;}

<div class="headshot_gallery1" id="fadeshow1"></div>

[jscheuer1]

OK, a few changes -

Add this style to your stylesheet:

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

Edit the fadeslideshow.js file around line 154:

		setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background

to look like so:

		setting.$gallerylayers.eq(setting.fglayer).css({zIndex: 999, opacity: 0}) //foreground layer becomes background

Increase the height of the show by 1 (from the on page initialization):

<script type="text/javascript">

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [460, 377], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.engagedesign.com/images/headshots/corporate/corporate_headshots_richelle8592.jpg", "", "", ""],
		["images/headshots/corporate/corporate_headshots_0194.jpg", "", "", ""],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow1toggler"/*,
	onslide: function(a, b){this.setting.$gallerylayers.eq(this.setting.fglayer? 0 : 1).animate({opacity: 0});}*/
})

</script>

Other tweaks my become desirable, but for now this looks pretty good in a local mock up.

[rkk]

thanks it worked....i have been trying to get all images to align vertically to the top, ive tried placing valign="top" and vertical-align: top but nothing happens...does it need to be changed in the .js file

[jscheuer1]

No, and personally I'm not sure that would look good, but it would depend to a degree upon your actual images once you get them all configured. In any case, to get that effect - all images aligned to the top of the slide show, use this overriding style:

#fadeshow1 .gallerylayer img {margin-top: 0!important;}

where fadeshow1 is the wrapperid for the slide show.

[rkk]

great that worked...wouldnt have thought to use margin-top...the reason i want them aligned to the top is i have text to the right of the slide show and for visual consistancy i wanted the top of the images to line up with the top of the text

[jscheuer1]

Yes, the margin-top: 0; isn't an obvious choice, and ordinarily (with just your average markup) wouldn't achieve the desired result. However, since this script centers the images within itself via calculating the height and width of the image, subtracing (respectively) from the height and width of the show and dividing the result by two to form the vertical (top) and horizontal (left) (respectively again) margins, the only good way to get the images to the top is to force the top margin to 0.

[scotch33]

hello,

I am having the same problem with the fader - the background color stays black. I have followed the instructions as aabove but all it has done is make the background momentarily transparent)

Code in the css is :

#homepagepicture {
width: 508px;
height: 350px;
background-image: url(look/slideshow/back.gif);
background-color:transparent!important;
}

code in the javascript is as the instructions.

page where the fade is causing me problems is http://www.northampton.start-card.co.uk/

Any advice greatly appreciated

[jscheuer1]

Add this style:

#homepagepicture .gallerylayer {
        background-color:transparent!important;
}

[scotch33]

that's done it - cheers!