YUI3 Slider Fade Image

Using YUI3 Slider widget to control changing the opacity of a photo. View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>YUI3 Sortable List</title>
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssfonts/fonts-min.css&amp;3.1.1/build/cssreset/reset-min.css" />
		<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
		<style type="text/css">
			body {
   				margin: 20px;
   			}
		</style>
	</head>
	<body>
		<div id="photo">
			<img src="http://farm5.static.flickr.com/4060/4516224096_3d4dbb7ed1_o.jpg" alt="buddy glasses" width="500" height="375" />
		</div>
		<div id="slider"></div>
		<script type="text/javascript">
			/* <![CDATA[ */
			//create a YUI instance with the node and slider modules
			YUI().use('node','slider',function(Y){
				
				//add the yui3-skin-sam class to body
				Y.one('body').addClass('yui3-skin-sam');
				
				var photo = Y.one('#photo img'); //node instance of the photo
				
				//create a new Slider object
				var slider = new Y.Slider({
					length:500,
					value:100,
					min:0,
					max:100
				});
				
				slider.render('#slider');
				
				//every time the slider moves change the photo's opacity
				slider.on('thumbMove',function(){
					//divide slider's value by 100, because opacity can be 0 to 1
					var val = slider.getValue()/100;
					photo.setStyle('opacity',val);
				});
			});
			/* ]]> */
		</script>
	</body>
</html>
This entry was posted in Uncategorized. Bookmark the permalink.