Advanced Search

Results 1 to 4 of 4

Thread: Fade affect for slideshow

  1. #1
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Fade affect for slideshow

    Hi all,

    Can anyone integrate the following fade script:
    http://clagnut.com/sandbox/imagefades/

    To my slide show:
    http://www.dynamicdrive.com/forums/s...5823#post55823

    Thanks.

    Its all right if you can only fade in the images.

  2. #2
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm pretty close. Can anyone finish it off?

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

  3. #3
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Code:

    HTML 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>
    Last edited by tech_support; 10-14-2006 at 05:25 AM.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  4. #4
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a bunch pete.

Bookmarks

Posting Permissions

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