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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Fade In Fade Out Gallery

    Hi

    Could someone help me create a script for my photo gallery. My page is similar to this gallery- http://www.stunicholls.myby.co.uk/menu/gallery.html

    What i would like is to fade the full size image in and out when people click on the different thumbnails. Ive tried looking for this but only could find fading when the images are in a certain order!!

    Any help appreciated!!

    vorl

  • #2
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    hi ranger56

    thanks for the reply!
    i read the instructions and it said i could apply a fade-wipe effect during transition.
    i would prefer if it could fadeout and in by blending the image in and out. Is this possible??

    thanks

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image Fade (23-07-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    var zxcSpeed=1;
    
    var zxcIFU,zxcFD,zxcLok,zxcCnt,zxcTO,zxcOp;
    var zxcFAry=new Array();
    
    function zxcInitFadeDisplay(zxcm,zxct){
     zxcm=document.getElementById(zxcm);
     zxcimgs=document.getElementById(zxct).getElementsByTagName('IMG');
     for (zxc0=0;zxc0<zxcimgs.length;zxc0++){
      zxcimgs[zxc0].nu=zxc0;
      zxcimgs[zxc0].onclick=function(){ zxcFade(this.nu); }
      zxcFAry[zxc0]=document.createElement('IMG');
      zxcFAry[zxc0].style.position='absolute';
      zxcFAry[zxc0].style.width=zxcm.offsetWidth+'px';
      zxcFAry[zxc0].style.height=zxcm.offsetHeight+'px';
      zxcFAry[zxc0].style.zIndex=0;
      zxcFAry[zxc0].src=zxcimgs[zxc0].src;
      zxcOpacity(zxcFAry[zxc0],0);
      zxcm.appendChild(zxcFAry[zxc0]);
     }
     if (!zxcOp){ zxcFAry[0].style.zIndex=1; }
    
    }
    
    
    function zxcFade(zxcnu){
     if (zxcLok&&zxcOp){ return; }
     zxcFU=zxcFAry[zxcnu];
     zxcFU.style.zIndex=1;
     if (zxcFD){ zxcFD.style.zIndex=0; }
     if (!zxcOp){ zxcFD=zxcFU; }
     zxcCnt=0;
     if (zxcFU!=zxcFD&&zxcOp){ zxcLok=true; zxcFadeDo(); }
    }
    
    
    function zxcFadeDo(){
     zxcCnt+=zxcSpeed;
     if (zxcFD){ zxcOpacity(zxcFD,100-zxcCnt); }
     zxcOpacity(zxcFU,zxcCnt);
     if (zxcCnt<100){ zxcTO=setTimeout("zxcFadeDo()",10); }
     else {
     zxcOpacity(zxcFU,100);
     if (zxcFD){ zxcOpacity(zxcFD,0); }
      zxcFD=zxcFU;
      zxcLok=false;
     }
    }
    
    
    function zxcOpacity(obj,op){
     if (obj.style.MozOpacity!=null){ zxcOp=true; obj.style.MozOpacity=(op/100)-.001; }
     else if (obj.style.opacity!=null){ zxcOp=true; obj.style.opacity=(op/100)-.001; }
     else if (obj.style.filter!=null){ zxcOp=true; obj.style.filter = 'alpha(opacity='+op+')';	}
    }
    
    
    //-->
    </script>
    
    </head>
    
    
    <body onload="zxcInitFadeDisplay('Main','Thumbs');" >
    <div  id="Main" style="position:relative;width:200px;height:200px;" >
    </div>
    <br>
    <span id="Thumbs" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=50 height=50 >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=50 height=50 >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=50 height=50 >
    <br>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width=50 height=50 >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width=50 height=50 >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width=50 height=50 >
    </span>
    
    
    
    </body>
    
    </html>

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    OMG thanks vwphillips ive been searching for that everywhere!!

    is there a way to speed it up?
    doesnt matter if there isnt, its a awesome script!!

    thanks again

    vorl

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    var zxcSpeed=1;

    increase the speed

    only a quicky,

    say if additional features required

    see

    http://www.vicsjavascripts.org.uk/Mu...howEffects.htm
    Last edited by vwphillips; 07-23-2005 at 10:48 PM.

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    sorry vwphillips one last question

    im thinking of just having the main image area and then 5 circles. I still want the blend fade but to view the image I want to click on these circles to view the images instead of the thumbs.

    can i do this with this script?

    thanks

    vorl

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image Fade (23-07-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    var zxcSpeed=1;
    
    var zxcIFU,zxcFD,zxcLok,zxcCnt,zxcTO,zxcOp;
    var zxcFAry=new Array();
    
    function zxcInitFadeDisplay(zxcm,zxct){
     zxcm=document.getElementById(zxcm);
     zxcimgs=document.getElementById(zxct).getElementsByTagName('IMG');
     for (zxc0=0;zxc0<zxcimgs.length;zxc0++){
      zxcimgs[zxc0].nu=zxc0;
      zxcimgs[zxc0].onclick=function(){ zxcFade(this.nu); }
      zxcFAry[zxc0]=document.createElement('IMG');
      zxcFAry[zxc0].style.position='absolute';
      zxcFAry[zxc0].style.width=zxcm.offsetWidth+'px';
      zxcFAry[zxc0].style.height=zxcm.offsetHeight+'px';
      zxcFAry[zxc0].style.zIndex=0;
      zxcFAry[zxc0].src=zxcimgs[zxc0].title.split('^')[0];
      zxcFAry[zxc0].title=zxcimgs[zxc0].title.split('^')[1];
      zxcimgs[zxc0].title=zxcimgs[zxc0].title.split('^')[1];
      zxcOpacity(zxcFAry[zxc0],0);
      zxcm.appendChild(zxcFAry[zxc0]);
     }
     if (!zxcOp){ zxcFAry[0].style.zIndex=1; }
    
    }
    
    
    function zxcFade(zxcnu){
     if (zxcLok&&zxcOp){ return; }
     zxcFU=zxcFAry[zxcnu];
     zxcFU.style.zIndex=1;
     if (zxcFD){ zxcFD.style.zIndex=0; }
     if (!zxcOp){ zxcFD=zxcFU; }
     zxcCnt=0;
     if (zxcFU!=zxcFD&&zxcOp){ zxcLok=true; zxcFadeDo(); }
    }
    
    
    function zxcFadeDo(){
     zxcCnt+=zxcSpeed;
     if (zxcFD){ zxcOpacity(zxcFD,100-zxcCnt); }
     zxcOpacity(zxcFU,zxcCnt);
     if (zxcCnt<100){ zxcTO=setTimeout("zxcFadeDo()",10); }
     else {
     zxcOpacity(zxcFU,100);
     if (zxcFD){ zxcOpacity(zxcFD,0); }
      zxcFD=zxcFU;
      zxcLok=false;
     }
    }
    
    
    function zxcOpacity(obj,op){
     if (obj.style.MozOpacity!=null){ zxcOp=true; obj.style.MozOpacity=(op/100)-.001; }
     else if (obj.style.opacity!=null){ zxcOp=true; obj.style.opacity=(op/100)-.001; }
     else if (obj.style.filter!=null){ zxcOp=true; obj.style.filter = 'alpha(opacity='+op+')';	}
    }
    
    
    //-->
    </script>
    
    </head>
    
    
    <body onload="zxcInitFadeDisplay('Main','Thumbs');" >
    <div  id="Main" style="position:relative;width:200px;height:200px;" >
    </div>
    <br>
    <span id="Thumbs" >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif^Zero" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/One.gif^One" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Two.gif^Two" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <br>
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Three.gif^Three" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Four.gif^Four" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Five.gif^Five" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    </span>
    
    
    
    </body>
    
    </html>

  • #9
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    hi vic

    how do i set the initial image when the the page is loaded? Icant seem to do it!

    thanks vorl

    last question- promise!!

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image Fade (23-07-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    var zxcSpeed=1;
    
    var zxcIFU,zxcFD,zxcLok,zxcCnt,zxcTO,zxcOp;
    var zxcFAry=new Array();
    
    function zxcInitFadeDisplay(zxcm,zxct,zxci){
     zxcm=document.getElementById(zxcm);
     zxcimgs=document.getElementById(zxct).getElementsByTagName('IMG');
     for (zxc0=0;zxc0<zxcimgs.length;zxc0++){
      zxcimgs[zxc0].nu=zxc0;
      zxcimgs[zxc0].onclick=function(){ zxcFade(this.nu); }
      zxcFAry[zxc0]=document.createElement('IMG');
      zxcFAry[zxc0].style.position='absolute';
      zxcFAry[zxc0].style.width=zxcm.offsetWidth+'px';
      zxcFAry[zxc0].style.height=zxcm.offsetHeight+'px';
      zxcFAry[zxc0].style.zIndex=0;
      zxcFAry[zxc0].pl=new Image();
      zxcFAry[zxc0].pl.src=zxcimgs[zxc0].title.split('^')[0];
      zxcFAry[zxc0].src=zxcFAry[zxc0].pl.src;
      zxcFAry[zxc0].title=zxcimgs[zxc0].title.split('^')[1];
      zxcimgs[zxc0].title=zxcimgs[zxc0].title.split('^')[1];
      zxcOpacity(zxcFAry[zxc0],0);
      zxcm.appendChild(zxcFAry[zxc0]);
     }
     if (!zxcOp){ zxcFAry[0].style.zIndex=1; }
     if (zxci){
      if (typeof(zxci)=='number'){
       if (zxci<zxcimgs.length){
        zxcOpacity(zxcFAry[zxci],100);
       }
      }
     }
    }
    
    
    function zxcFade(zxcnu){
     if (zxcLok&&zxcOp){ return; }
     zxcFU=zxcFAry[zxcnu];
     zxcFU.style.zIndex=1;
     if (zxcFD){ zxcFD.style.zIndex=0; }
     if (!zxcOp){ zxcFD=zxcFU; }
     zxcCnt=0;
     if (zxcFU!=zxcFD&&zxcOp){ zxcLok=true; zxcFadeDo(); }
    }
    
    
    function zxcFadeDo(){
     zxcCnt+=zxcSpeed;
     if (zxcFD){ zxcOpacity(zxcFD,100-zxcCnt); }
     zxcOpacity(zxcFU,zxcCnt);
     if (zxcCnt<100){ zxcTO=setTimeout("zxcFadeDo()",10); }
     else {
     zxcOpacity(zxcFU,100);
     if (zxcFD){ zxcOpacity(zxcFD,0); }
      zxcFD=zxcFU;
      zxcLok=false;
     }
    }
    
    
    function zxcOpacity(obj,op){
     if (obj.style.MozOpacity!=null){ zxcOp=true; obj.style.MozOpacity=(op/100)-.001; }
     else if (obj.style.opacity!=null){ zxcOp=true; obj.style.opacity=(op/100)-.001; }
     else if (obj.style.filter!=null){ zxcOp=true; obj.style.filter = 'alpha(opacity='+op+')';	}
    }
    
    
    //-->
    </script>
    
    </head>
    
    
    <body onload="zxcInitFadeDisplay('Main','Thumbs',2);" >
    <div  id="Main" style="position:relative;width:200px;height:200px;" >
    </div>
    <br>
    <span id="Thumbs" >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif^Zero" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/One.gif^One" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Two.gif^Two" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <br>
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Three.gif^Three" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Four.gif^Four" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Five.gif^Five" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    </span>
    <br>
    <br>
    how do i set the initial image when the the page is loaded? Icant seem to do it!<br>
    &lt;body onload="zxcInitFadeDisplay('*IDMain*','*IDThumbs*',*InitImg*);" ><br>
    where:
    *IDMain*   = the id name of the element to display the main image           (string)<br>
    *IDThumbs* = the id name of the element to containing the image information (string)<br>
    *InitImg*  = optional -the image number (in *IDThumbs*) to display on load  (digit)<br>
    <br>
    I have also added image preload<br>
    
    
    </body>
    
    </html>
    last question- promise!!
    Ask away,

    but on the forum please not pm (except for project work)

  • #11
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    hi vic

    understood. thanks.

    i was using it and it totally works- THANKS How do i select the image zero.gif as the load image. ive tried setting the body onload to '0' but doesnt work.

    thanks

    vorl

  • #12
    Regular Coder
    Join Date
    Jul 2005
    Location
    LA, California
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i know this topic is a little old, but i had a question on this script, can i have a random image be displayed when the page is loaded, then when you click the thumbs, it fads into the next
    i am using this code
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    // Image Fade (23-07-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk

    var zxcSpeed=1;

    var 
    zxcIFU,zxcFD,zxcLok,zxcCnt,zxcTO,zxcOp;
    var 
    zxcFAry=new Array();

    function 
    zxcInitFadeDisplay(zxcm,zxct,zxci){
     
    zxcm=document.getElementById(zxcm);
     
    zxcimgs=document.getElementById(zxct).getElementsByTagName('IMG');
     for (
    zxc0=0;zxc0<zxcimgs.length;zxc0++){
      
    zxcimgs[zxc0].nu=zxc0;
      
    zxcimgs[zxc0].onclick=function(){ zxcFade(this.nu); }
      
    zxcFAry[zxc0]=document.createElement('IMG');
      
    zxcFAry[zxc0].style.position='absolute';
      
    zxcFAry[zxc0].style.width=zxcm.offsetWidth+'px';
      
    zxcFAry[zxc0].style.height=zxcm.offsetHeight+'px';
      
    zxcFAry[zxc0].style.zIndex=0;
      
    zxcFAry[zxc0].pl=new Image();
      
    zxcFAry[zxc0].pl.src=zxcimgs[zxc0].title.split('^')[0];
      
    zxcFAry[zxc0].src=zxcFAry[zxc0].pl.src;
      
    zxcFAry[zxc0].title=zxcimgs[zxc0].title.split('^')[1];
      
    zxcimgs[zxc0].title=zxcimgs[zxc0].title.split('^')[1];
      
    zxcOpacity(zxcFAry[zxc0],0);
      
    zxcm.appendChild(zxcFAry[zxc0]);
     }
     if (!
    zxcOp){ zxcFAry[0].style.zIndex=1; }
     if (
    zxci){
      if (
    typeof(zxci)=='number'){
       if (
    zxci<zxcimgs.length){
        
    zxcOpacity(zxcFAry[zxci],100);
       }
      }
     }
    }


    function 
    zxcFade(zxcnu){
     if (
    zxcLok&&zxcOp){ return; }
     
    zxcFU=zxcFAry[zxcnu];
     
    zxcFU.style.zIndex=1;
     if (
    zxcFD){ zxcFD.style.zIndex=0; }
     if (!
    zxcOp){ zxcFD=zxcFU; }
     
    zxcCnt=0;
     if (
    zxcFU!=zxcFD&&zxcOp){ zxcLok=truezxcFadeDo(); }
    }


    function 
    zxcFadeDo(){
     
    zxcCnt+=zxcSpeed;
     if (
    zxcFD){ zxcOpacity(zxcFD,100-zxcCnt); }
     
    zxcOpacity(zxcFU,zxcCnt);
     if (
    zxcCnt<100){ zxcTO=setTimeout("zxcFadeDo()",10); }
     else {
     
    zxcOpacity(zxcFU,100);
     if (
    zxcFD){ zxcOpacity(zxcFD,0); }
      
    zxcFD=zxcFU;
      
    zxcLok=false;
     }
    }


    function 
    zxcOpacity(obj,op){
     if (
    obj.style.MozOpacity!=null){ zxcOp=trueobj.style.MozOpacity=(op/100)-.001; }
     else if (
    obj.style.opacity!=null){ zxcOp=trueobj.style.opacity=(op/100)-.001; }
     else if (
    obj.style.filter!=null){ zxcOp=trueobj.style.filter 'alpha(opacity='+op+')';    }
    }


    //-->
    </script>

    </head>


    <body onload="zxcInitFadeDisplay('Main','Thumbs',2);" >
    <div  id="Main" style="position:relative;width:200px;height:200px;" >
    </div>
    <br>
    <span id="Thumbs" >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif^Zero" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/One.gif^One" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Two.gif^Two" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <br>
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Three.gif^Three" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Four.gif^Four" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    <img title="http://www.vicsjavascripts.org.uk/StdImages/Five.gif^Five" src="http://www.vicsjavascripts.org.uk/StdImages/Tick1.gif" width=50 height=50 >
    </span>
    <br>
    <br>
    how do i set the initial image when the the page is loaded? Icant seem to do it!<br>
    &lt;body onload="zxcInitFadeDisplay('*IDMain*','*IDThumbs*',*InitImg*);" ><br>
    where:
    *IDMain*   = the id name of the element to display the main image           (string)<br>
    *IDThumbs* = the id name of the element to containing the image information (string)<br>
    *InitImg*  = optional -the image number (in *IDThumbs*) to display on load  (digit)<br>
    <br>
    I have also added image preload<br>


    </body>

    </html> 
    thanks vic
    Last edited by Al_90; 10-18-2005 at 02:04 AM.
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    There are 3 kinds of ppl those who can count and those who cant
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    Script-Megafest.com Coming Oh so very soon


  •  

    Posting Permissions

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