<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>Demostración - Feature List - Slideshow jQuery Plugin</title>
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.featureList-1.0.0.js"></script>

	<style type="text/css">
	
		h3 {
			margin: 0;	
			padding: 7px 0 0 0;
			font-size: 16px;
					}

		div#feature_list {
			width: 750px;
			height: 240px;
			overflow: hidden;
			position: relative;
		}

		div#feature_list ul {
			position: absolute;
			top: 0;
			list-style: none;	
			padding: 0;
			margin: 0;
		}

		ul#pestanyas {
			left: 0;
			z-index: 2;
			width: 320px;
		}

		ul#pestanyas li {
			font-size: 12px;
			font-family: Arial;
		}
		
		ul#pestanyas li img {
			padding: 5px;
			border: none;
			float: left;
			margin: 10px 10px 0 0;
		}

		ul#pestanyas li a {
			color: #222;
			text-decoration: none;	
			display: block;
			padding: 10px;
			height: 60px;
			outline: none;
		}

		ul#pestanyas li a:hover {
			text-decoration: underline;
		}

		ul#pestanyas li a.current {
			background:  url('feature-tab-current.png');
			color: #FFF;
		}

		ul#pestanyas li a.current:hover {
			text-decoration: none;
			cursor: default;
		}

		ul#ver_articulo {
			right: 0;
			width: 463px;
			height: 240px;
			position: relative;
		}

		ul#ver_articulo li {
			position: absolute;
			width: 463px;
			height: 240px;
		}

		ul#ver_articulo li a {
			position: absolute;
			bottom: 10px;
			right: 10px;
			padding: 8px 12px;
			text-decoration: none;
			font-size: 11px;
			color: #FFF;
			background: #000;
			-moz-border-radius: 5px;
		}
		
		ul#ver_articulo li a:hover {
			background: #D33431;
		}
	a {
	font-size: 12px;
	outline-color: #888;
	font-family:Tahoma;
	text-decoration:none;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>
	<script language="javascript">
		$(document).ready(function() {

			$.featureList(
				$("#pestanyas li a"),
				$("#ver_articulo li"), {
					start_item	:	1
				}
			);

			/*
			
			// Alternative

			
			$('#pestanyas li a').featureList({
				ver_articulo			:	'#ver_articulo li',
				start_item		:	1
			});

			*/

		});
	</script>
</head>
<body>
	<div id="content">
		<h1>Feature List</h1>

		<p>Esta es una página de demostración, si quieres conocer las características de este plugin visita <descripcion><a href="http://www.dinvaders.com/feature-list-slideshow-de-contenido-e-imagenes/">este artículo</a></descripcion></p>

		<hr />

		<div id="feature_list">
			<ul id="pestanyas">
				<li>
					<a href="javascript:;">
						<descripcion><span>Título de la primera noticia destacada</span></descripcion>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<descripcion><span>Título de la segunda noticia destacada</span></descripcion>

					</a>
				</li>
				<li>
					<a href="javascript:;">
						<descripcion><span>Título de la tercera noticia destacada</span></descripcion>
					</a>

				</li>
			</ul>
					 <ul id="ver_articulo">

 						 <LI><IMG src="../activos/slideshow/sample1.jpg"> 

                                           	<A href="#">LEER  MÁS</A>                                           </LI>

                                         

 						 <LI><IMG src="../activos/slideshow/sample3.jpg"> 

                                           	<A href="#">LEER MÁS 2</A>                                           </LI>

                                           

                                           <LI><IMG src="../activos/slideshow/sample1.jpg"> 

                                           <A  href="#">LEER  MÁS 3</A> </LI>

                </UL>

		</div>
	</div>
</body>
</html>