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 11 of 11
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    A simple to use Unobtrusive FadeShow Object

    fadeShow is an unobtrusive object that creates a fading picture show out of image paths set in an unordered list.


    The 3 step setup is:
    1) add a single style to the document:
    Code:
    .fadeShow {list-style:none;visibility:hidden;}
    2) add the script to the page's head:
    Code:
    <script type="text/javascript" src="fadeShow.js"></script>
    3) add an ul element with the image paths as li content for each fade show you want to display on the page.
    Code:
    <ul class="fadeShow">
    <li>http://lh4.ggpht.com/_GjeAsK5J5Mg/RkIg0saPRzI/AAAAAAAAABE/1hP1Byi4__k/s288/archipelago1600.jpg</li>
    <li>http://3.bp.blogspot.com/_C8dXT_HAQSs/SrJPAShNp3I/AAAAAAAAAJs/CpLmVZyTIiA/s400/chikusei1600.jpg</li>
    <li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg08aPR0I/AAAAAAAAABM/yqKrgdmS9C0/s288/arctica1600.jpg</li>
    <li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg3MaPR6I/AAAAAAAAAB8/5ECTk3laxlo/s288/coalescence1600.jpg</li>
    </ul>

    All IMAGES IN THE SAME fadeShow NEED TO BE THE SAME SIZE.


    That's it. Your ready to roll.

    ===========================================

    Here are some particulars and the object code:

    On the first load of the page, you'll notice a visual adjustment of the elements as the first image loads.

    You can avoid this adjustment in IE, Chrome, and FF (in Quirks mode) if you supply the width and height to each fadeshow ul as an inline style:
    Code:
    <ul class="fadeShow" style="width:288;height:218;">
    <li>http://lh4.ggpht.com/_GjeAsK5J5Mg/RkIg0saPRzI/AAAAAAAAABE/1hP1Byi4__k/s288/archipelago1600.jpg</li>
    <li>http://3.bp.blogspot.com/_C8dXT_HAQSs/SrJPAShNp3I/AAAAAAAAAJs/CpLmVZyTIiA/s400/chikusei1600.jpg</li>
    <li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg08aPR0I/AAAAAAAAABM/yqKrgdmS9C0/s288/arctica1600.jpg</li>
    <li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg3MaPR6I/AAAAAAAAAB8/5ECTk3laxlo/s288/coalescence1600.jpg</li>
    </ul>
    The same inline styling will work the same for IE and Chrome with a html5 doctype <!DOCTYPE html> , but in FF the visual adjusment returns.


    Here's the code for the fadeShow object, slightly annotated:

    Code:
    var fadeShow=(function(){
    	var _getCoords = function(el){
    		var coords = { x: 0, y: 0, w: el.offsetWidth, h:el.offsetHeight };
    		while (el) {
    			coords.x += el.offsetLeft;
    			coords.y += el.offsetTop;
    			el = el.offsetParent;
    		}
    		return coords;
    	}
    	var _animOpacity = function(ob){							//alpha animation
    		this.obA=ob;
    		this.opacity = 1;
    		var me = this;									//me is a tether reference to the current object
    		this.fade=function(){								//incremental fade
    			me.opacity+=me.fadeValue;
    			if(window.attachEvent){
    				me.obA.style.filter="alpha(opacity="+me.opacity*100+")";
    			}else{
    				me.obA.style.opacity=me.opacity;
    			}
    		}
    		this.setValue=function(n){ // is scaled to unity (for 100 enter 1)		//directly set fade value
    			me.opacity = n;
    			if(window.attachEvent){
    				me.obA.style.filter="alpha(opacity="+me.opacity*100+")";
    			}else{
    				me.obA.style.opacity=me.opacity;
    			}
    		}
    		this.anim = function(fadeValue,speed,fnc){					//animation
    			if(isNaN(fadeValue)||fadeValue==0){return}
    			if(isNaN(speed)||speed==0){return}
    			if(fnc!=null){me.fnc=fnc}
    			me.fadeValue=fadeValue;
    			me.speed=speed;
    			if(fadeValue>0){
    				(function(){							//do a fadein
    					me.s = function(){
    						me.fade()
    						if(me.opacity<1){
    							setTimeout(me.s,speed);
    						}else{
    							if(me.fnc!=null){me.fnc()}
    						}
    					}
    					setTimeout(me.s,me.speed)
    				})();
    			}else{
    				(function(){							//do a fadeout
    					me.s = function(){
    						me.fade()
    						if(me.opacity>0){
    							setTimeout(me.s,me.speed);
    						}else{
    							if(me.fnc!=null){me.fnc()}
    						}
    					}
    					setTimeout(me.s,me.speed);
    				})();
    			}			
    		}
    	}
    	var _init = function(){
    		var d = document.getElementsByTagName("ul")
    		var l = d.length;
    		for(var i=l-1;i>-1;i--){
    			(function(){
    				var im = [];
    				im[0] = new Image();						//frontscreen
    				im[1] = new Image();						//backscreen
    				im.a=[];							//image path container
    				var e = d[i];
    				if(e.className.indexOf("fadeShow")>-1){					//class check ul elements
    					var k = e.children
    					for(var j=0;j<k.length;j++){
    						im.a.push(k[j].innerHTML);			//stores image paths
    					}
    					im.w = parseInt(e.style.width);
    					im.h = parseInt(e.style.height);
    				}
    				im[0].src=im.a[0];						//assign inital forescreen image
    				if(im.a.length>1){
    					im[1].src=im.a[1];					//assign initial backscreen image if any
    				}
    				d[i].style.visibility="visible";
    				(function(){
    					var d = document.createElement("div");			//create fadeshow container
    					d.style.position="relative";				//configure fadeshow
    
    					if(!isNaN(im.w)){
    						d.style.width=im.w+"px";				//user set inline width/height;
    						d.style.height=im.h+"px";
    					}else{
    						//INITIAL DIMS ARE SET TO 0!
    						d.style.width=im[0].width+"px";				//this will set correctly on reload or when
    						d.style.height=im[0].height+"px";			//the user refreshes or browses back to the page.
    	
    						//CLUNKY SOLUTION - DIMS SET AFTER 1ST IMG LOAD
    						if(im[0].width<1)
    							(function(d){						//set the dimensions of the container after the
    								var d = d;					//first image has loaded and its dimensions are.
    								im[0].onload=function(){			//avilable/
    									d.style.width=this.width+"px";
    									d.style.height=this.height+"px";
    								}
    							})(d);
    					}
    					delete im.w;
    					delete im.h;
    					im[0].style.position="absolute";
    					im[1].style.position="absolute";
    					if(document.all){					//install fadeshow
    						e.replaceNode(d);
    					}else{
    						var p = e.parentNode;
    						p.replaceChild(d,e);
    					}
    					d.appendChild(im[1]);					//add frontscreen to fadeshow container
    					d.appendChild(im[0]);					//add backscreen to fadeshow container
    					im.a0 = new _animOpacity(im[0]);			//create and add animations
    					im.a1 = new _animOpacity(im[1]);
    					im.a0.setValue(1);
    					im.a1.setValue(0);
    					var me = im;						//ref to the tortured array
    					im.delay=4500+Math.floor(Math.random()*1000);		//the image swap frequency
    					im.cnt=0;
    					im.s=function(){					//The fadeshow for this object
    						//me.testDims();
    						me.cnt++;
    						me.cnt%=me.a.length;				//clamp upper limit of cnt to the number of images
    						me[1].src=me.a[me.cnt];
    						me.a0.anim(-.02,10);				//a0 is alpha animation for forescreen (alpha anim speed=10)		
    						me.a1.anim(.02,10,function(){			//a1 is alpha animation for backscreen (alpha anim speed=10)
    							me[0].src=im[1].src;
    							me.a0.setValue(1);			//fully turn on image at end of animation cycle
    							me.a1.setValue(0);			//fully turn off image at end of animation cycle
    							setTimeout(me.s,me.delay);		//set time to start the next cycle
    						});
    					}
    					setTimeout(im.s,im.delay);				//start it in motion
    				})();
    			})();
    		}
    	}
    	return {
    		init:function(){_init()}
    	}
    })();
    
    /* 
    |  Just load the FadeShow object into the page at startup and you're 
    |  ready to go.
    |
    |  You can remove this clunky initialzation, just remember to call
    |  fadeShow.init after the document body is avilable.
    +------------------------------------------------------------------------------*/
    var clunkyload=(window.attachEvent)?window.attachEvent("onload",fadeShow.init):
    	(window.addEventListener)?window.addEventListener("load",fadeShow.init,true):
    	window.onload=fadeShow.init;
    delete clunkyload


    And here's a simple example of the fadeShow Object use in Quirks mode:

    Code:
    <html>
    <head>
    <title>
    Fade Show Example Use
    </title>
    <style type='text/css'>
    body {color:#fff;background:#000;}
    .fadeShowText {text-align:center;color:#000;}
    .fadeShow {list-style:none;visibility:hidden; /*don't forget this style*/}
    .fleft {float:left;}
    .fclear {clear:both;margin-top:50px;}
    .padwhite {padding:20px;background:white;}
    .photo {margin-right:20px;}
    hr {margin-top:20px;margin-bottom:20px;}
    </style>
    <!-- requires fadeShow.js -->
    <script type="text/javascript" src="fadeShow.js"></script>
    <script type="text/javascript">
    </script>
    </head>
    <body>
    <h1>Fade Show Object Example Use</h1>
    
    <h2>A Simple Fade Show</h2><!-- You make a fade show like this. Thats all there is to it -->
    <!-- fade show #1 -->
    <ul class="fadeShow" style="width:288;height:218;">
    <li>http://lh4.ggpht.com/_GjeAsK5J5Mg/RkIg0saPRzI/AAAAAAAAABE/1hP1Byi4__k/s288/archipelago1600.jpg</li>
    <li>http://3.bp.blogspot.com/_C8dXT_HAQSs/SrJPAShNp3I/AAAAAAAAAJs/CpLmVZyTIiA/s400/chikusei1600.jpg</li>
    <li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg08aPR0I/AAAAAAAAABM/yqKrgdmS9C0/s288/arctica1600.jpg</li>
    <li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg3MaPR6I/AAAAAAAAAB8/5ECTk3laxlo/s288/coalescence1600.jpg</li>
    </ul>
    
    <hr>
    <h2>A Fade Show Strip</h2><!-- a simple fadeshow strip -->
    <div class="fleft padwhite">
    <div>
    	<!-- fade show #2 --> 
    	<ul class="fadeShow" style="width:288;height:218;">
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIgz8aPRxI/AAAAAAAAAA0/Je067sXm7eQ/s288/cosmogony1600.jpg</li>
    	<li>http://lh3.ggpht.com/_GjeAsK5J5Mg/RkIg3caPR7I/AAAAAAAAACE/KpoHtNRCTGU/s288/endlessblue1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIgz8aPRwI/AAAAAAAAAAs/E8GIPK4K20k/s288/fluorescence61600.jpg</li>
    	<li>http://2.bp.blogspot.com/_sbzItYeiSnA/SYTlt_pYswI/AAAAAAAAABo/cpikhnAOd_Q/s320/idyll1600.jpg</li>
    	</ul>
    </div>
    <div class="fadeShowtext">Fade Show #2</div>
    </div>
    
    <div class="fleft padwhite">
    <div>
    	<!-- fade show #3 --> 
    	<ul class="fadeShow" style="width:288;height:218;">
    	<li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg1MaPR1I/AAAAAAAAABU/XPi6Tz_lVu4/s288/lastlight1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg28aPR5I/AAAAAAAAAB0/aR01jnPTmj8/s288/novembersnow1600.jpg</li>
    	<li>http://1.bp.blogspot.com/_C8dXT_HAQSs/SrJO_qVOzvI/AAAAAAAAAJk/WJuW10TxV30/s400/orthohedron1600.jpg</li>
    	<li>http://1.bp.blogspot.com/_OO5qJBFsovU/SZ-nAlFp_GI/AAAAAAAAAE4/ikfj8W3jv9Y/s400/satori1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg38aPR9I/AAAAAAAAACU/lCtDRxurX8c/s288/vigil1600.jpg</li>
    	</ul>
    </div>
    <div class="fadeShowtext">Fade Show #3</div>
    </div>
    <br class="fclear"/>
    
    <hr>
    <h2>Fade Show Photos</h2><!-- simple fadeshow photos -->
    <div class="fleft padwhite photo">
    <div>
    	<!-- fade show #4 --> 
    	<ul class="fadeShow" style="width:288;height:218;">
    	<li>http://lh3.ggpht.com/_GjeAsK5J5Mg/RkIg3caPR7I/AAAAAAAAACE/KpoHtNRCTGU/s288/endlessblue1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIgz8aPRxI/AAAAAAAAAA0/Je067sXm7eQ/s288/cosmogony1600.jpg</li>
    	<li>http://2.bp.blogspot.com/_sbzItYeiSnA/SYTlt_pYswI/AAAAAAAAABo/cpikhnAOd_Q/s320/idyll1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIgz8aPRwI/AAAAAAAAAAs/E8GIPK4K20k/s288/fluorescence61600.jpg</li>
    	</ul>
    </div>
    <p class="fadeShowtext">Fade Show #4</p>
    </div>
    
    <div class="fleft padwhite photo">
    <div>
    	<!-- fade show #5 --> 
    	<ul class="fadeShow" style="width:288;height:218;">
    	<li>http://1.bp.blogspot.com/_C8dXT_HAQSs/SrJO_qVOzvI/AAAAAAAAAJk/WJuW10TxV30/s400/orthohedron1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg38aPR9I/AAAAAAAAACU/lCtDRxurX8c/s288/vigil1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg28aPR5I/AAAAAAAAAB0/aR01jnPTmj8/s288/novembersnow1600.jpg</li>
    	<li>http://1.bp.blogspot.com/_OO5qJBFsovU/SZ-nAlFp_GI/AAAAAAAAAE4/ikfj8W3jv9Y/s400/satori1600.jpg</li>
    	<li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg1MaPR1I/AAAAAAAAABU/XPi6Tz_lVu4/s288/lastlight1600.jpg</li>
    	</ul>
    </div>
    <p class="fadeShowtext">Fade Show #5</p>
    </div>
    <br class="fclear"/>
    
    <hr>
    
    <p> provided by rdspoons </p>
    </body>
    </html>

    provided by rdspoons 08/30/10

  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rdspoons View Post
    fadeShow is an unobtrusive object that creates a fading picture show out of image paths set in an unordered list.


    The 3 step setup is:
    1) add a single style to the document:
    Code:
    .fadeShow {list-style:none;visibility:hidden;}
    2) add the script to the page's head:
    Code:
    <script type="text/javascript" src="fadeShow.js"></script>
    3) add an ul element with the image paths as li content for each fade show you want to display on the page.
    Code:
    <ul class="fadeShow">
    <li>http://lh4.ggpht.com/_GjeAsK5J5Mg/RkIg0saPRzI/AAAAAAAAABE/1hP1Byi4__k/s288/archipelago1600.jpg</li>
    <li>http://3.bp.blogspot.com/_C8dXT_HAQSs/SrJPAShNp3I/AAAAAAAAAJs/CpLmVZyTIiA/s400/chikusei1600.jpg</li>
    <li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg08aPR0I/AAAAAAAAABM/yqKrgdmS9C0/s288/arctica1600.jpg</li>
    <li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg3MaPR6I/AAAAAAAAAB8/5ECTk3laxlo/s288/coalescence1600.jpg</li>
    </ul>

    All IMAGES IN THE SAME fadeShow NEED TO BE THE SAME SIZE.


    That's it. Your ready to roll.

    ===========================================

    Here are some particulars and the object code:

    On the first load of the page, you'll notice a visual adjustment of the elements as the first image loads.

    You can avoid this adjustment in IE, Chrome, and FF (in Quirks mode) if you supply the width and height to each fadeshow ul as an inline style:
    Code:
    <ul class="fadeShow" style="width:288;height:218;">
    <li>http://lh4.ggpht.com/_GjeAsK5J5Mg/RkIg0saPRzI/AAAAAAAAABE/1hP1Byi4__k/s288/archipelago1600.jpg</li>
    <li>http://3.bp.blogspot.com/_C8dXT_HAQSs/SrJPAShNp3I/AAAAAAAAAJs/CpLmVZyTIiA/s400/chikusei1600.jpg</li>
    <li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg08aPR0I/AAAAAAAAABM/yqKrgdmS9C0/s288/arctica1600.jpg</li>
    <li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg3MaPR6I/AAAAAAAAAB8/5ECTk3laxlo/s288/coalescence1600.jpg</li>
    </ul>
    The same inline styling will work the same for IE and Chrome with a html5 doctype <!DOCTYPE html> , but in FF the visual adjusment returns.


    Here's the code for the fadeShow object, slightly annotated:

    Code:
    var fadeShow=(function(){
    	var _getCoords = function(el){
    		var coords = { x: 0, y: 0, w: el.offsetWidth, h:el.offsetHeight };
    		while (el) {
    			coords.x += el.offsetLeft;
    			coords.y += el.offsetTop;
    			el = el.offsetParent;
    		}
    		return coords;
    	}
    	var _animOpacity = function(ob){							//alpha animation
    		this.obA=ob;
    		this.opacity = 1;
    		var me = this;									//me is a tether reference to the current object
    		this.fade=function(){								//incremental fade
    			me.opacity+=me.fadeValue;
    			if(window.attachEvent){
    				me.obA.style.filter="alpha(opacity="+me.opacity*100+")";
    			}else{
    				me.obA.style.opacity=me.opacity;
    			}
    		}
    		this.setValue=function(n){ // is scaled to unity (for 100 enter 1)		//directly set fade value
    			me.opacity = n;
    			if(window.attachEvent){
    				me.obA.style.filter="alpha(opacity="+me.opacity*100+")";
    			}else{
    				me.obA.style.opacity=me.opacity;
    			}
    		}
    		this.anim = function(fadeValue,speed,fnc){					//animation
    			if(isNaN(fadeValue)||fadeValue==0){return}
    			if(isNaN(speed)||speed==0){return}
    			if(fnc!=null){me.fnc=fnc}
    			me.fadeValue=fadeValue;
    			me.speed=speed;
    			if(fadeValue>0){
    				(function(){							//do a fadein
    					me.s = function(){
    						me.fade()
    						if(me.opacity<1){
    							setTimeout(me.s,speed);
    						}else{
    							if(me.fnc!=null){me.fnc()}
    						}
    					}
    					setTimeout(me.s,me.speed)
    				})();
    			}else{
    				(function(){							//do a fadeout
    					me.s = function(){
    						me.fade()
    						if(me.opacity>0){
    							setTimeout(me.s,me.speed);
    						}else{
    							if(me.fnc!=null){me.fnc()}
    						}
    					}
    					setTimeout(me.s,me.speed);
    				})();
    			}			
    		}
    	}
    	var _init = function(){
    		var d = document.getElementsByTagName("ul")
    		var l = d.length;
    		for(var i=l-1;i>-1;i--){
    			(function(){
    				var im = [];
    				im[0] = new Image();						//frontscreen
    				im[1] = new Image();						//backscreen
    				im.a=[];							//image path container
    				var e = d[i];
    				if(e.className.indexOf("fadeShow")>-1){					//class check ul elements
    					var k = e.children
    					for(var j=0;j<k.length;j++){
    						im.a.push(k[j].innerHTML);			//stores image paths
    					}
    					im.w = parseInt(e.style.width);
    					im.h = parseInt(e.style.height);
    				}
    				im[0].src=im.a[0];						//assign inital forescreen image
    				if(im.a.length>1){
    					im[1].src=im.a[1];					//assign initial backscreen image if any
    				}
    				d[i].style.visibility="visible";
    				(function(){
    					var d = document.createElement("div");			//create fadeshow container
    					d.style.position="relative";				//configure fadeshow
    
    					if(!isNaN(im.w)){
    						d.style.width=im.w+"px";				//user set inline width/height;
    						d.style.height=im.h+"px";
    					}else{
    						//INITIAL DIMS ARE SET TO 0!
    						d.style.width=im[0].width+"px";				//this will set correctly on reload or when
    						d.style.height=im[0].height+"px";			//the user refreshes or browses back to the page.
    	
    						//CLUNKY SOLUTION - DIMS SET AFTER 1ST IMG LOAD
    						if(im[0].width<1)
    							(function(d){						//set the dimensions of the container after the
    								var d = d;					//first image has loaded and its dimensions are.
    								im[0].onload=function(){			//avilable/
    									d.style.width=this.width+"px";
    									d.style.height=this.height+"px";
    								}
    							})(d);
    					}
    					delete im.w;
    					delete im.h;
    					im[0].style.position="absolute";
    					im[1].style.position="absolute";
    					if(document.all){					//install fadeshow
    						e.replaceNode(d);
    					}else{
    						var p = e.parentNode;
    						p.replaceChild(d,e);
    					}
    					d.appendChild(im[1]);					//add frontscreen to fadeshow container
    					d.appendChild(im[0]);					//add backscreen to fadeshow container
    					im.a0 = new _animOpacity(im[0]);			//create and add animations
    					im.a1 = new _animOpacity(im[1]);
    					im.a0.setValue(1);
    					im.a1.setValue(0);
    					var me = im;						//ref to the tortured array
    					im.delay=4500+Math.floor(Math.random()*1000);		//the image swap frequency
    					im.cnt=0;
    					im.s=function(){					//The fadeshow for this object
    						//me.testDims();
    						me.cnt++;
    						me.cnt%=me.a.length;				//clamp upper limit of cnt to the number of images
    						me[1].src=me.a[me.cnt];
    						me.a0.anim(-.02,10);				//a0 is alpha animation for forescreen (alpha anim speed=10)		
    						me.a1.anim(.02,10,function(){			//a1 is alpha animation for backscreen (alpha anim speed=10)
    							me[0].src=im[1].src;
    							me.a0.setValue(1);			//fully turn on image at end of animation cycle
    							me.a1.setValue(0);			//fully turn off image at end of animation cycle
    							setTimeout(me.s,me.delay);		//set time to start the next cycle
    						});
    					}
    					setTimeout(im.s,im.delay);				//start it in motion
    				})();
    			})();
    		}
    	}
    	return {
    		init:function(){_init()}
    	}
    })();
    
    /* 
    |  Just load the FadeShow object into the page at startup and you're 
    |  ready to go.
    |
    |  You can remove this clunky initialzation, just remember to call
    |  fadeShow.init after the document body is avilable.
    +------------------------------------------------------------------------------*/
    var clunkyload=(window.attachEvent)?window.attachEvent("onload",fadeShow.init):
    	(window.addEventListener)?window.addEventListener("load",fadeShow.init,true):
    	window.onload=fadeShow.init;
    delete clunkyload


    And here's a simple example of the fadeShow Object use in Quirks mode:

    Code:
    <html>
    <head>
    <title>
    Fade Show Example Use
    </title>
    <style type='text/css'>
    body {color:#fff;background:#000;}
    .fadeShowText {text-align:center;color:#000;}
    .fadeShow {list-style:none;visibility:hidden; /*don't forget this style*/}
    .fleft {float:left;}
    .fclear {clear:both;margin-top:50px;}
    .padwhite {padding:20px;background:white;}
    .photo {margin-right:20px;}
    hr {margin-top:20px;margin-bottom:20px;}
    </style>
    <!-- requires fadeShow.js -->
    <script type="text/javascript" src="fadeShow.js"></script>
    <script type="text/javascript">
    </script>
    </head>
    <body>
    <h1>Fade Show Object Example Use</h1>
    
    <h2>A Simple Fade Show</h2><!-- You make a fade show like this. Thats all there is to it -->
    <!-- fade show #1 -->
    <ul class="fadeShow" style="width:288;height:218;">
    <li>http://lh4.ggpht.com/_GjeAsK5J5Mg/RkIg0saPRzI/AAAAAAAAABE/1hP1Byi4__k/s288/archipelago1600.jpg</li>
    <li>http://3.bp.blogspot.com/_C8dXT_HAQSs/SrJPAShNp3I/AAAAAAAAAJs/CpLmVZyTIiA/s400/chikusei1600.jpg</li>
    <li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg08aPR0I/AAAAAAAAABM/yqKrgdmS9C0/s288/arctica1600.jpg</li>
    <li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg3MaPR6I/AAAAAAAAAB8/5ECTk3laxlo/s288/coalescence1600.jpg</li>
    </ul>
    
    <hr>
    <h2>A Fade Show Strip</h2><!-- a simple fadeshow strip -->
    <div class="fleft padwhite">
    <div>
    	<!-- fade show #2 --> 
    	<ul class="fadeShow" style="width:288;height:218;">
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIgz8aPRxI/AAAAAAAAAA0/Je067sXm7eQ/s288/cosmogony1600.jpg</li>
    	<li>http://lh3.ggpht.com/_GjeAsK5J5Mg/RkIg3caPR7I/AAAAAAAAACE/KpoHtNRCTGU/s288/endlessblue1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIgz8aPRwI/AAAAAAAAAAs/E8GIPK4K20k/s288/fluorescence61600.jpg</li>
    	<li>http://2.bp.blogspot.com/_sbzItYeiSnA/SYTlt_pYswI/AAAAAAAAABo/cpikhnAOd_Q/s320/idyll1600.jpg</li>
    	</ul>
    </div>
    <div class="fadeShowtext">Fade Show #2</div>
    </div>
    
    <div class="fleft padwhite">
    <div>
    	<!-- fade show #3 --> 
    	<ul class="fadeShow" style="width:288;height:218;">
    	<li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg1MaPR1I/AAAAAAAAABU/XPi6Tz_lVu4/s288/lastlight1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg28aPR5I/AAAAAAAAAB0/aR01jnPTmj8/s288/novembersnow1600.jpg</li>
    	<li>http://1.bp.blogspot.com/_C8dXT_HAQSs/SrJO_qVOzvI/AAAAAAAAAJk/WJuW10TxV30/s400/orthohedron1600.jpg</li>
    	<li>http://1.bp.blogspot.com/_OO5qJBFsovU/SZ-nAlFp_GI/AAAAAAAAAE4/ikfj8W3jv9Y/s400/satori1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg38aPR9I/AAAAAAAAACU/lCtDRxurX8c/s288/vigil1600.jpg</li>
    	</ul>
    </div>
    <div class="fadeShowtext">Fade Show #3</div>
    </div>
    <br class="fclear"/>
    
    <hr>
    <h2>Fade Show Photos</h2><!-- simple fadeshow photos -->
    <div class="fleft padwhite photo">
    <div>
    	<!-- fade show #4 --> 
    	<ul class="fadeShow" style="width:288;height:218;">
    	<li>http://lh3.ggpht.com/_GjeAsK5J5Mg/RkIg3caPR7I/AAAAAAAAACE/KpoHtNRCTGU/s288/endlessblue1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIgz8aPRxI/AAAAAAAAAA0/Je067sXm7eQ/s288/cosmogony1600.jpg</li>
    	<li>http://2.bp.blogspot.com/_sbzItYeiSnA/SYTlt_pYswI/AAAAAAAAABo/cpikhnAOd_Q/s320/idyll1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIgz8aPRwI/AAAAAAAAAAs/E8GIPK4K20k/s288/fluorescence61600.jpg</li>
    	</ul>
    </div>
    <p class="fadeShowtext">Fade Show #4</p>
    </div>
    
    <div class="fleft padwhite photo">
    <div>
    	<!-- fade show #5 --> 
    	<ul class="fadeShow" style="width:288;height:218;">
    	<li>http://1.bp.blogspot.com/_C8dXT_HAQSs/SrJO_qVOzvI/AAAAAAAAAJk/WJuW10TxV30/s400/orthohedron1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg38aPR9I/AAAAAAAAACU/lCtDRxurX8c/s288/vigil1600.jpg</li>
    	<li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg28aPR5I/AAAAAAAAAB0/aR01jnPTmj8/s288/novembersnow1600.jpg</li>
    	<li>http://1.bp.blogspot.com/_OO5qJBFsovU/SZ-nAlFp_GI/AAAAAAAAAE4/ikfj8W3jv9Y/s400/satori1600.jpg</li>
    	<li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg1MaPR1I/AAAAAAAAABU/XPi6Tz_lVu4/s288/lastlight1600.jpg</li>
    	</ul>
    </div>
    <p class="fadeShowtext">Fade Show #5</p>
    </div>
    <br class="fclear"/>
    
    <hr>
    
    <p> provided by rdspoons </p>
    </body>
    </html>

    provided by rdspoons 08/30/10
    A detailed introduction, you are a master!

  • #3
    New Coder
    Join Date
    Aug 2010
    Location
    FL
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    I figured i'd post my own implementation of image rotation here. check it out: http://codebyter.com/post.php?code&id=11

    let me know if u have any questions or anything.

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    @codebyter:

    That page has many errors:

    http://validator.w3.org/check?uri=ht...Inline&group=0

    and it isn't "unobtrusive."

    See,
    http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

    Separation of behavior from markup

    Traditionally, JavaScript often was placed inline together with an HTML document's markup. For example, the following is a typical implementation of JavaScript form validation when written inline:

    <input type="text" name="date" onchange="validateDate()" />

    Adherents to "Unobtrusive Javascript" argue that the purpose of markup is to describe a document's structure, not its programmatic behavior and that combining the two negatively impacts a site's maintainability for similar reasons that combining content and presentation does. They also argue that inline event handlers are harder to use and maintain, when one needs to set several events on a single element or when one is using event delegation. Nor can they be used with custom events.
    JavaScript has no place within the <body>, not if you want to describe it as unobtrusive.

    The page causes my Firefox version 3.6.8 to lock, then it shuts-down with an error dialog, "Firefox is not responding," when I attempt to close the window using the top right-hand X.
    Last edited by Sciliano; 09-01-2010 at 10:57 PM.

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Ugg_uk,
    Thanks for taking time to comment.
    I think your too kind.

    codebyter,
    Thanks for leaving a comment. Very nice result in IE (I've not tried it yet in other browsers) from the code in your link. Thanks for the link.

    Sciliano,
    First, thanks for taking the time for your comments.
    I agree with one of your statements but I disagree on another.

    1) That page has many errors - Yes, there will be validation errors for the listed example, I really though that fact was noted by the Quirks mode label I put above the example, although the fadeShow object itself can be used in a validating page.

    I think its only right to point out the above Quirks mode example in reality has only 1 validation error (no document declaration) and 6 pretty standard warnings for Quirks mode. The many errors you report seems to be based on trying to validate this page - the codingforums page. Irregardless, presenting non-validating pages in Quirks mode is neither unknown nor uncommon. Here are some current examples that you will find don't validate as of this post:
    http://www.google.com/
    http://www.google.com/firefox?client...en-US:official
    and
    https://developer.mozilla.org/en/HTML
    https://developer.mozilla.org/en/JavaScript
    etc.

    To answer the question can the example code validate? - the answer is yes, just take it out of Quirks mode by replacing the <html> tag with
    Code:
    <!DOCTYPE HTML>
    <html xml:lang="en-US" lang="en-US" dir="ltr">
    The result with be validating code with 4 warnings, and FF will display a visual adjustment of the images as described above in the particulars and object code section..

    You can get the example down to one warning (you will always have one warning validating HTML5 as of this post) by adding the following meta tag in the head:
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >


    2) and it isn't "unobtrusive." - Here I disagree, it is unobtrusive. I'm not sure what your looking at to provide the following statement: JavaScript has no place within the <body>, not if you want to describe it as unobtrusive as there is no code in the body. The only code in the page is the calling code in the head. The fadeShow itself can be kept in as external script as stated in the 1,2,3 step instructions at the top of the page describe.

    3) The page causes my Firefox version 3.6.8 to lock - Unfortunately I can't say anything about that as I have not tried it with 3.6.8(the latest version as this posting). I do know it works on earlier versions of FF along with Chrome, Windows Safari, and IE.

    Note -I think there is a valid argument that hasn't been made that image paths were used - not images, and the initial style hides the ul's. The fadeShow object itself can easily be adjusted to work with images instead of paths.

    Anyway, it's very good to have criticism. Again thanks for taking the time to look and comment.
    Last edited by rdspoons; 09-01-2010 at 11:46 PM.

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    My omission, rdspoons.

    My comments were directed toward the post by codebyter, not yours.

    I will edit my previous post.

  • #7
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Sciliano,

    Thanks for your clarification. I mistook codbyter in the url (http://validator.w3.org/check?uri=ht...Inline&group=0) for codingforums. My mistake. Also, I've only looked at the functional result of codbyters code in one browser (IE) which looked good to me. I did not do cross-browser testing on codebyters code, and as such, I can not really say more than I did in my original reply to codbyter, although I'll adjust my remark to indicate I only viewed the code in IE.

    Thanks,
    Last edited by rdspoons; 09-01-2010 at 11:27 PM.

  • #8
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Iwas playing around with this slideshow, thanks for posting this. I have a couple of questions regarding its use on a web page:

    1. How can you speed up the frame rate of the slide show, what are the lines of code and values to be adjusted?

    2. I am having trouble placing the location of the slideshow to be anywhere else besides the upper left corner. I tried to put it into a DIV and while it sits there, it acts like it doesn't occupy any space on the DIV area. This means that the text or picture I had placed below the Slide/fadeshow automatically appears right on top or below the slideshow, they basically sit on top of each other. How can I place the slide show either above or below other code/objects on the page?

    Thank you,
    Any info would be appreciated.

  • #9
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    update for delay speed and positioning

    Tactician,


    1) Allowing the user to set their own delay speed for the image swaps

    step 1:
    locate and remove or comment-out the following line in fadeshow.js

    im.delay=4500+Math.floor(Math.random()*1000); //the image swap frequency


    step 2(a):
    locate the following code segment in fadeshow.js:
    Code:
    			(function(){
    				var im = [];
    				im[0] = new Image();						//frontscreen
    				im[1] = new Image();						//backscreen
    				im.a=[];							//image path container
    				var e = d[i];
    				if(e.className.indexOf("fadeShow")>-1){					//class check ul elements
    					var k = e.children
    					for(var j=0;j<k.length;j++){
    						im.a.push(k[j].innerHTML);			//stores image paths
    					}
    					im.w = parseInt(e.style.width);
    					im.h = parseInt(e.style.height);
    				}

    step 2(b):
    and adjust it by adding code so it reads:
    Code:
    			(function(){
    				var im = [];
    				im[0] = new Image();						//frontscreen
    				im[1] = new Image();						//backscreen
    				im.a=[];							//image path container
    				var e = d[i];
    				if(e.className.indexOf("fadeShow")>-1){					//class check ul elements
    					var k = e.children
    					for(var j=0;j<k.length;j++){
    						im.a.push(k[j].innerHTML);			//stores image paths
    					}
    					im.w = parseInt(e.style.width);
    					im.h = parseInt(e.style.height);
    
    					if(e.getAttribute("delay")!=null){
    						im.delay = e.getAttribute("delay");
    					}else
    						im.delay = 4500+Math.floor(Math.random()*1000);  //any default value here
    				}
    Now the user can add a desired delay to a fadeshow ul as follows:
    Code:
    <ul class="fadeShow" style="width:288;height:218;" delay="2000">
    <li>http://lh4.ggpht.com/_GjeAsK5J5Mg/RkIg0saPRzI/AAAAAAAAABE/1hP1Byi4__k/s288/archipelago1600.jpg</li>
    <li>http://3.bp.blogspot.com/_C8dXT_HAQSs/SrJPAShNp3I/AAAAAAAAAJs/CpLmVZyTIiA/s400/chikusei1600.jpg</li>
    <li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg08aPR0I/AAAAAAAAABM/yqKrgdmS9C0/s288/arctica1600.jpg</li>
    <li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg3MaPR6I/AAAAAAAAAB8/5ECTk3laxlo/s288/coalescence1600.jpg</li>
    </ul>
    The default value of 4500+Math.floor(Math.random()*1000) will be set on all fadeshow objects that do not contain a delay attribute.



    2) Positioning a fadeshow:
    You can put the fadeshow inside of any block positioning container in the normal page flow,
    and it will lay where the page flow dictates for the container.

    -or-

    You can place the fadeshow inside of an absolutely positioned container to place it anywhere on the page.
    The absolute positioning takes the fadeshow out of the pages normal flow.

    Example markup in the page:
    Code:
    <div  id="fadeshow0">
    <ul class="fadeShow" style="width:288;height:218;" delay="2000">
    <li>http://lh4.ggpht.com/_GjeAsK5J5Mg/RkIg0saPRzI/AAAAAAAAABE/1hP1Byi4__k/s288/archipelago1600.jpg</li>
    <li>http://3.bp.blogspot.com/_C8dXT_HAQSs/SrJPAShNp3I/AAAAAAAAAJs/CpLmVZyTIiA/s400/chikusei1600.jpg</li>
    <li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg08aPR0I/AAAAAAAAABM/yqKrgdmS9C0/s288/arctica1600.jpg</li>
    <li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg3MaPR6I/AAAAAAAAAB8/5ECTk3laxlo/s288/coalescence1600.jpg</li>
    </ul>
    </div>
    in a style block:
    Code:
    #fadeshow0 {
    	position:absolute;
    	left:500px;top:40px;
    }
    You can construct and style the positioning container as you like to get the reult you desire.

    Example markup to add a simple header and footer for a fadeshow
    Code:
    <div  id="fadeshow0">
    <div class='fsheader'>A header text</div>
    <ul class="fadeShow" style="width:288;height:218;" delay="2000">
    <li>http://lh4.ggpht.com/_GjeAsK5J5Mg/RkIg0saPRzI/AAAAAAAAABE/1hP1Byi4__k/s288/archipelago1600.jpg</li>
    <li>http://3.bp.blogspot.com/_C8dXT_HAQSs/SrJPAShNp3I/AAAAAAAAAJs/CpLmVZyTIiA/s400/chikusei1600.jpg</li>
    <li>http://lh5.ggpht.com/_GjeAsK5J5Mg/RkIg08aPR0I/AAAAAAAAABM/yqKrgdmS9C0/s288/arctica1600.jpg</li>
    <li>http://lh6.ggpht.com/_GjeAsK5J5Mg/RkIg3MaPR6I/AAAAAAAAAB8/5ECTk3laxlo/s288/coalescence1600.jpg</li>
    </ul>
    <div class='fsfooter'>A footer text</div>
    </div>
    in a style block:
    Code:
    #fadeshow0 {
    	position:absolute;
    	left:500px;top:40px;
    }
    #fadeshow0 div {
    	text-align:center;
    }
    .fsheader {
    	font-size:1.2em;
    	text-transform:uppercase;
    }
    .fsfooter div {
    	font-size:.8em;
    }
    To correct for the images 'floating' right -
    Adjust the fadeshow.js code to internally position the images inside of a fadeshow object:
    Code:
    					im[0].style.position="absolute";
    					im[1].style.position="absolute";
    to read
    Code:
    					im[0].style.position="absolute";
    					im[1].style.position="absolute";
    					im[0].style.top = "0px";
    					im[0].style.left = "0px";
    					im[1].style.top = "0px";
    					im[1].style.left = "0px";


    Do use a doctype in the page markup to get the best results, such as <!doctype html>

    Hope that helps.
    Last edited by rdspoons; 05-23-2012 at 08:56 PM.

  • #10
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    See, my application listed on HotScripts, here:

    Multiple Fading Slideshows

  • #11
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A forward, pause, rewind button for the fadeshow

    Thanks for all the info everyone, it's working good mostly.
    I am however having issues with certain CSS styles and ULs with the fadeshow appearance. Sometimes alignments get all messed up.

    However, anyone have any basic code for making Forward, Pause and Rewind buttons for the fadeshow, so one can pick the photos they want to look at?

    Also, would custom/stock art be required for the buttons?


  •  

    Tags for this Thread

    Posting Permissions

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