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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2006
    Location
    College Station
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slideshow is fading out but not in

    Hey all,

    I'm installing a slideshow script to rotate through several images, and I want each image to fade out and then the next one to fade back in. The script I found has fade-out, but not fade-in, and I don't know how to get the fade-in part working...

    here's the code:
    Code:
    window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
    
    var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
    
    function so_init()
    {
    	if(!d.getElementById || !d.createElement)return;
    
    	css = d.createElement('link');
    	css.setAttribute('href','slideshow2.css');
    	css.setAttribute('rel','stylesheet');
    	css.setAttribute('type','text/css');
    	d.getElementsByTagName('head')[0].appendChild(css);
    
    	imgs = d.getElementById('rotator').getElementsByTagName('img');
    	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
    	imgs[0].style.display = 'block';
    	imgs[0].xOpacity = .99;
    
    	setTimeout(so_xfade,3000);
    }
    
    function so_xfade()
    {
    	cOpacity = imgs[current].xOpacity;
    	nIndex = imgs[current+1]?current+1:0;
    	nOpacity = imgs[nIndex].xOpacity;
    
    	cOpacity-=.05;
    	nOpacity+=.05;
    
    	imgs[nIndex].style.display = 'block';
    	imgs[current].xOpacity = cOpacity;
    	imgs[nIndex].xOpacity = nOpacity;
    
    	setOpacity(imgs[current]);
    	setOpacity(imgs[nIndex]);
    
    	if(cOpacity<=0)
    	{
    		imgs[current].style.display = 'none';
    		current = nIndex;
    		setTimeout(so_xfade,3000);
    	}
    	else
    	{
    		setTimeout(so_xfade,50);
    	}
    
    	function setOpacity(obj)
    	{
    		if(obj.xOpacity>.99)
    		{
    			obj.xOpacity = .99;
    			return;
    		}
    
    		obj.style.opacity = obj.xOpacity;
    		obj.style.MozOpacity = obj.xOpacity;
    		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
    	}
    }
    and this is the website that I am putting it on:

    http://derbydigitalphoto.com/test/index.php

    Thanks!
    --Daniel

  • #2
    New Coder
    Join Date
    Nov 2006
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try using scriptaculous. You can download it Here. Just unzip and copy all of the .js files to your root directory, or wherever you store you script files. Then add the prototype.js and scriptaculous.js files to your webpage.


    Code:
    /************test.htm************/
    <html>
    <head>
    <script src="prototype.js" type="text/javascript"></script>
    <script src="scriptaculous.js" type="text/javascript"></script>
    <script>
    function fadeOut() {
    	new Effect.Fade('test');  //enter the id of the element you wish to fade
    }
    
    function fadeIn() {
    	new Effect.Appear('test');  //enter the id of the element you wish to fade
    }
    
    // you can also include the actual element as the argument instead of the id.
    // onclick="new Effect.Fade(this);"
    </script>
    </head>
    <body>
    <div style="background:blue; float:none;" id="test">TESTING</div><br>
    <form>
    <input type="button" onclick="fadeOut();" value="Fade Out"> 
    <input type="button" onclick="fadeIn();" value="Fade In">
    </form>
    </body>
    </html>
    Last edited by j9ine; 12-05-2006 at 09:45 PM.

  • #3
    New Coder
    Join Date
    Dec 2006
    Location
    College Station
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So that code goes into my PHP document (the script src and <script> code?


    sorry... I know very little about Javascript right now...


    --Daniel


  •  

    Posting Permissions

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