...

View Full Version : Image fade in/out for image gallery



sparks80
07-10-2005, 02:21 AM
Hi,

I have a web page I am currently developing which contains both a small gallery of thumbnails and a full size image on the same page. When the user clicks on one of the thumbnails then the full size image appears.

I am trying to write a script that will fade in the image each time it changes so that the transition is less harsh, and would ideally like it to be as cross-platform friendly as possible.

My attempts at this so far have been mostly centred around using the IE alpha and Mozilla -moz-opacity properties. I have had some degree of success, however things start to go wrong when the a thumbnail is clicked before the previous transition is complete.

I currently have two DIV structures, which contain the images to fade in and out respectively. This script executes correctly only when the current transition is allowed to finish completely.


function fadeInAndOut(divID_fadeout, divID_fadein) {

// fade out the first image (divID_fadeout)
if (opac_out > 2) {
opac_out-=fade_step;
if (document.all) {
document.getElementById(divID_fadeout).style.filter = "alpha(opacity=" + opac_out + ")";
} else {
document.getElementById(divID_fadeout).style.MozOpacity = opac_out/100;
}
}

// fade in the second image (divID_fadein)
if (opac_in < 98) {
opac_in+=fade_step;
if (document.all) {
document.getElementById(divID_fadein).style.filter = "alpha(opacity=" + opac_in + ")";
} else {
document.getElementById(divID_fadein).style.MozOpacity = opac_in/100;
}
}

//continue until image fade transition is complete
if ((opac_in < 98) && (opac_out > 2)) {
setTimeout('fadeInAndOut(\''+divID_fadeout+'\',\''+divID_fadein+'\')', fade_delay);
}
}


Any help you can give would be greatly appreciated,

Mark

jscheuer1
07-10-2005, 04:20 AM
Untested, use 'clearFade_FadeInOut()' as a front end instead of 'fadeInAndOut()' to launch the process:


<script type="text/javascript">

var fadeInOut

function fadeInAndOut(divID_fadeout, divID_fadein) {

// fade out the first image (divID_fadeout)
if (opac_out > 2) {
opac_out-=fade_step;
if (document.all) {
document.getElementById(divID_fadeout).style.filter = "alpha(opacity=" + opac_out + ")";
} else {
document.getElementById(divID_fadeout).style.MozOpacity = opac_out/101; //changed to 101 for Mozilla Flicker Bug
}
}

// fade in the second image (divID_fadein)
if (opac_in < 98) {
opac_in+=fade_step;
if (document.all) {
document.getElementById(divID_fadein).style.filter = "alpha(opacity=" + opac_in + ")";
} else {
document.getElementById(divID_fadein).style.MozOpacity = opac_in/101; //changed to 101 for Mozilla Flicker Bug
}
}

//continue until image fade transition is complete
if ((opac_in < 98) && (opac_out > 2)) {
fadeInOut=setTimeout('fadeInAndOut(\''+divID_fadeout+'\',\''+divID_fadein+'\')', fade_delay);
}
}

//front end to clear previous cycle
function clearFade_FadeInOut(param1, param2){
clearTimeout(fadeInOut)
fadeInAndOut(param1, param2)
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum