<?
	session_start();
	$Id=$_SESSION['id_admin'];
	$Nombre = $_SESSION['nombre'];
?>
<!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>3C Patin Club</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="./slideshow/jquery.featureList-1.0.0.js"></script>

<script type="text/javascript">

function showDiv ( elemID )

{

var elem = document.getElementById ( elemID ) ;

elem.style.position = 'relative' ;

elem.style.left = '0px' ;

}



function hideDiv ( elemID )

{

var elem = document.getElementById ( elemID ) ;

elem.style.position = 'absolute' ;

elem.style.left = '-4000px' ;

}



function toggleDivOL( elemID )

{

var elem = document.getElementById ( elemID ) ;

/*returns true if everything is ok*/

return ( ( elem.style.position != 'absolute' ? hideDiv ( elemID ) : showDiv ( elemID ) ) ) ;

}

</script>

<link href="activos/header/forms.css" rel="stylesheet" type="text/css" />

<link href="activos/css/shop.css" rel="stylesheet" type="text/css" />
<link href="activos/css/estilos.css" rel="stylesheet" type="text/css" />

<link href="activos/css/columna-izq.css" rel="stylesheet" type="text/css" />

<link href="activos/css/columna-derecha.css" rel="stylesheet" type="text/css" />

<link href="activos/scroll/estilos-eventos.css" rel="stylesheet" type="text/css">

<link href="activos/scroll/estilos-tienda.css" rel="stylesheet" type="text/css">

<link href="activos/css/menu.css" rel="stylesheet" type="text/css">

	<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('./slideshow/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(f

				$("#pestanyas li a"),

				$("#ver_articulo li"), {

					start_item	:	1

				}

			);



			/*

			

			// Alternative



			

			$('#pestanyas li a').featureList({

				ver_articulo			:	'#ver_articulo li',

				start_item		:	1

			});



			*/



		});

	</SCRIPT>
	
<script type="text/javascript">

  $(document).ready(function() {

        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.

        $('#carousel_ul li:first').before($('#carousel_ul li:last')); 

        

        

        //when user clicks the image for sliding right        

        $('#right_scroll img').click(function(){

        

            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '

            var item_width = $('#carousel_ul li').outerWidth() + 10;

            

            //calculae the new left indent of the unordered list

            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

            

            //make the sliding effect using jquery's anumate function '

            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    

                

                //get the first list item and put it after the last list item (that's how the infinite effects is made) '

                $('#carousel_ul li:last').after($('#carousel_ul li:first')); 

                

                //and get the left indent to the default -210px

                $('#carousel_ul').css({'left' : '-210px'});

            }); 

        });

        

        //when user clicks the image for sliding left

        $('#left_scroll img').click(function(){

            

            var item_width = $('#carousel_ul li').outerWidth() + 10;

            

            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */

            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;

            

            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    

            

            /* when sliding to left we are moving the last item before the first list item */            

            $('#carousel_ul li:first').before($('#carousel_ul li:last')); 

            

            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */

            $('#carousel_ul').css({'left' : '-210px'});

            });

            

            

        });

  });

</script>





<script type="text/javascript">

  $(document).ready(function() {

        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.

        $('#tienda_ul li:first').before($('#tienda_ul li:last')); 

        

        

        //when user clicks the image for sliding right        

        $('#right_scroll2 img').click(function(){

        

            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '

            var item_width = $('#tienda_ul li').outerWidth() + 10;

            

            //calculae the new left indent of the unordered list

            var left_indent = parseInt($('#tienda_ul').css('left')) - item_width;

            

            //make the sliding effect using jquery's anumate function '

            $('#tienda_ul:not(:animated)').animate({'left' : left_indent},500,function(){    

                

                //get the first list item and put it after the last list item (that's how the infinite effects is made) '

                $('#tienda_ul li:last').after($('#tienda_ul li:first')); 

                

                //and get the left indent to the default -210px

                $('#tienda_ul').css({'left' : '-210px'});

            }); 

        });

        

        //when user clicks the image for sliding left

        $('#left_scroll2 img').click(function(){

            

            var item_width = $('#tienda_ul li').outerWidth() + 10;

            

            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */

            var left_indent = parseInt($('#tienda_ul').css('left')) + item_width;

            

            $('#tienda_ul:not(:animated)').animate({'left' : left_indent},500,function(){    

            

            /* when sliding to left we are moving the last item before the first list item */            

            $('#tienda_ul li:first').before($('#tienda_ul li:last')); 

            

            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */

            $('#tienda_ul').css({'left' : '-210px'});

            });

            

            

        });

  });

</script>

<script type="text/javascript">

<!--

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</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 id="banner"><script src="http://h1.flashvortex.com/display.php?id=2_1317835643_20991_688_0_728_90_10_1_6" type="text/javascript"></script></div>
		<script src="http://cdn.wibiya.com/Toolbars/dir_1047/Toolbar_1047957/Loader_1047957.js" type="text/javascript"></script><noscript><a href="http://www.wibiya.com/">Web Toolbar by Wibiya</a></noscript>
	</div>
</body>
</html>