Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image fade in/out for image gallery

    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

  • #2
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Untested, use 'clearFade_FadeInOut()' as a front end instead of 'fadeInAndOut()' to launch the process:

    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •