PDA

View Full Version : 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/showthread.php?p=55823#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?


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>

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