Ultimate Fade-in slideshow V2.4 Opacity

[jwilly1]

1) Ultimate Fade-in slideshow V2.4

2) http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Is there a way to display each image in the slide show with opacity.
I would like the images to be about 50% transparent but there seems to be background colors which are stopping this.

[jscheuer1]

There are two things going on. There is a background color, yes. But that doesn't prevent the images from being 50% opaque. It just prevents bleed through of the image underneath in situations where the images are of varying sizes or have transparent or semi-transparent sections. And there is the scripted opacity which brings each foreground division to 100% opacity at the end of each transition.

If all you want is 50% opacity on the images and no background to prevent them from bleeding into one another, you can add this style to the head of your page:

<style type="text/css">
#fadeshow1 .gallerylayer {
	background-color: transparent !important;
}
</style>

where fadeshow1 is the wrapperid for the slideshow. Be sure to use the important keyword as shown to override the scripted background color. If your images aren't already at 50% opacity, add this rule:

#fadeshow1 .gallerylayer img {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

Edit: But many people who ask this type of question really want the background behind the slideshow to show through and/or around each image without bleed through of the images. If you want that, it can probably be arranged, but it's more complicated.

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.

And please answer these questions:

What is your objective?

Do you want the background behind the slideshow to show through, or do you want just the previous/next images to show through?

Or is it something else?

Please be specific.

[jwilly1]

Thanks for the quick response and your suggestions.

You guessed correct. What I really need is the background behind the slideshow to show through without the bleed through of the images in the slide show.

If the script can be modified for this that would be great.

[jscheuer1]

It can in many cases, most actually. But I really need to see the page to tell the best way to go about it:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[jwilly1]

It's still in development but I have uploaded a test page.
The images are png's at 60% opacity.

http://www.virtual-realty.com.au/test/index-2.html

Cheers,

John

[jscheuer1]

OK, download this script:

Attachment 4241

Put it in the same folder as the fadeslideshow.js file (the js folder).

Then on your page where you have:

<script type="text/javascript" src="js/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: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [390, 475], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/km_products/10041.png"],
		["images/km_products/15213.png"],
		["images/km_products/17515_Detail_1.png"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

</script>

Replace that with:

<script type="text/javascript" src="js/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" src="js/positionbackground.js">

// Position Background Script (c)2011 John Davenport Scheuer
// For Ultimate Fade in Slideshow 2.x
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use

</script>
<script type="text/javascript">

fadeSlideShow.positionbackground({backgroundparent: '#kmTable', delayslideshow: mydelay, supressalerts: true});

function mydelay(){
	window.mygallery=new fadeSlideShow({
		wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
		dimensions: [390, 475], //width/height of gallery in pixels. Should reflect dimensions of largest image
		imagearray: [
			["images/km_products/10041.png"],
			["images/km_products/15213.png"],
			["images/km_products/17515_Detail_1.png"] //<--no trailing comma after very last image element!
		],
		displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
		persist: false, //remember last viewed slide and recall within same session?
		fadeduration: 1000, //transition duration (milliseconds)
		descreveal: "ondemand",
		togglerid: ""
	});
}
</script>

There are many options, but it's all setup for that page. If you have any questions, let me know. If there's a problem, put up a demo so I can see it.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[jwilly1]

Brillant, thanks John. Works like a treat.
Thanks very much for your efforts, the opacity feature will really come in handy.

Cheers,

John