File Manager

Current Path : /webspace/www.promiel.be/html/modules/jQuery/libraries/plugins/easyslider/sample/
Upload File :
Current File : /webspace/www.promiel.be/html/modules/jQuery/libraries/plugins/easyslider/sample/01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy Slider jQuery Plugin Demo</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider.packed.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider();
	});
</script>
<meta name="description" content="Simple easy-to-use jQuery plugin for sliding images and content">
</meta>

<style>
body {
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
h1{
	font-size:180%;
	font-weight:normal;
	}
h2{
	font-size:160%;
	font-weight:normal;
	}	
h3{
	font-size:140%;
	font-weight:normal;
	}	
img{border:none;}
pre{
	display:block;
	font:12px "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	width:500px;
	}		

/* Easy Slider */

	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider, #slider li{ 
		/* 
			define width and height of container element and list item (slide)
			list items must be the same size as the slider area
		*/ 
		width:696px;
		height:241px;
		overflow:hidden; 
		}
	span#prevBtn{}
	span#nextBtn{}					

/* // Easy Slider */

</style>
</head>
<body>

	<h1>Easy Slider jQuery Plugin Demo</h1>
	
	<h2>Easy Slider for images - non styled version with default settings</h2>
	
	<div id="slider">
		<ul>				
			<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>			
		</ul>
	</div>
	
	<h3>Usage</h3>
	
<pre>$(document).ready(function(){	
	$("#slider").easySlider();
});</pre>
	
	<p><a href="http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider" title="read more about this jquery plugin">back to the article</a></p>
	
	<p><strong>Easy Slider</strong> jQuery Plugin is brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a> and supported by <a href="http://templatica.com">Css Templates</a> by Templatica</p>


</body>
</html>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-783567-1";
urchinTracker();
</script>

File Manager Version 1.0, Coded By Lucas
Email: hehe@yahoo.com