Fade affect for slideshow

**ak7861** · 10-13-2006, 09:37 PM

Hi all,

Can anyone integrate the following fade script:
http://clagnut.com/sandbox/imagefades/

To my slide show:
http://www.dynamicdrive.com/forums/s...5823#post55823

Thanks.

Its all right if you can only fade in the images.

**ak7861** · 10-14-2006, 01:40 AM

I'm pretty close. Can anyone finish it off?

Code:

document.write("<style type='text/css'>#slideimg0 {visibility:hidden;} #slideimg1{visibility:hidden;} #slideimg2 {visibility:hidden;}</style>");

function initImage(imgObject) {
	image = document.getElementById(imgObject);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imgObject,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}

//Browser check
var DHTML = (document.getElementById || document.all || document.layers);
if ( !DHTML ) alert('Your browser is not capable of displaying DHTML');
function getObj(name) {
	if (document.getElementById) {
		this.style = document.getElementById(name).style;
	} else
	if (document.all) {
		this.style = document.all[name].style;
	} else
	if (document.layers) {
		this.style = document.layers[name];
	}
}

//Switch elements visible or hidden
function visib(objName, flag) {
	x = new getObj(objName);
	x.style.visibility = (flag) ? 'visible' : 'hidden';
}

//Switch next element visible and previous hidden.
var curImg = 0; // index of the array entry
var lastImg = 0;

function changeSlide ( change ) {
	if (!DHTML) return;
	curImg += change;
	
	if ( curImg < 0 ) curImg = slides.length-1;
	else
	if ( curImg >= slides.length ) curImg = 0;

	visib(slides[lastImg], false);
	visib(slides[curImg], true);
	lastImg = curImg;
        if (curImg==0) initImage('slideimg0');
        if (curImg==1) initImage('slideimg1');
        if (curImg==2) initImage('slideimg2');

}

var sec = 1 //Auto-Slide Intervals
var stopped = 0
var auto = setInterval("changeSlide(1)",sec*6000)

function stopSlide()	{

	if (stopped==0)	{
	stopped==1
	clearInterval(auto)
	}
}
//Array containing all element names (== pictures)
slides = new Array(
	'slide0',
	'slide1',
	'slide2')

**tech_support** · 10-14-2006, 05:18 AM

Code:

HTML Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Previous | Next blah blah blah b</title>

<style type="text/css">
.slide {
   position: absolute;
   visibility : hidden;
}
#slide0 {
   visibility : visible;
}
 </style>
<script type="text/javascript">
//Browser check
var DHTML = (document.getElementById || document.all || document.layers);
if ( !DHTML ) alert('Your browser is not capable of displaying DHTML');
function getObj(name) {
	if (document.getElementById) {
		this.style = document.getElementById(name).style;
	} else
	if (document.all) {
		this.style = document.all[name].style;
	} else
	if (document.layers) {
		this.style = document.layers[name];
	}
}

//Switch elements visible or hidden
function visib(objName, flag) {
	x = new getObj(objName);
	x.style.visibility = (flag) ? 'visible' : 'hidden';
}

//Switch next element visible and previous hidden.
var curImg = 0; // index of the array entry
var lastImg = 0;

function changeSlide ( change ) {
	if (!DHTML) return;
	curImg += change;
	if ( curImg < 0 ) curImg = slides.length-1;
	else
		if ( curImg >= slides.length ) curImg = 0;

	visib(slides[lastImg], false);
	visib(slides[curImg], true);
	fadeIn(slides[curImg],0)
	lastImg = curImg;
}

var sec = 3 //Auto-Slide Intervals
var stopped = 0
var auto = setInterval("changeSlide(1)",sec*1000)
setTimeout("changeSlide(1)",100)

function stopSlide()	{

	if (stopped==0)	{
	stopped==1
	clearInterval(auto)
	}
}
//Array containing all element names (== pictures)
slides = new Array(
	'slide0',
	'slide1',
	'slide2')
	
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
</script>
</head>

<body>
<a href="javascript:stopSlide();changeSlide(-1);" class="ftm_next">Previous</a>&nbsp;|&nbsp;<a href="javascript:stopSlide();changeSlide(1)" class="ftm_next">Next</a>
<span id="slide0" class="slide" style="width: 380px;">blah blah</span>
<span id="slide1" class="slide" style="width: 380px;">blah blah blah</span>
<span id="slide2" class="slide" style="width: 380px;">blah blah blah blah</span>
</body>

</html>

**ak7861** · 10-14-2006, 05:33 AM

Thanks a bunch pete.

Thread: Fade affect for slideshow

Thread Tools

Search Thread

Fade affect for slideshow

Bookmarks

Bookmarks

Posting Permissions