ok v_v ....
La pagina php donde esta la lista: Código PHP:
<head>
<title>Scrollable view</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/scrollable-view.css"/>
<script src="js/jquery.pack.js"></script>
<script src="js/flashembed.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.scrollable.min.js"></script>
<script src="js/flow.embed.js"></script>
<script>
$(function() {
$("a.flowplayer").flowembed("../FlowPlayerDark.swf", {
initialScale:'scale',
hideControls:true
});
$("div.scrollable").scrollable({
horizontal:true,
size:1,
onSeek:onClipDone
});
});
</script>
</head>
<body>
<div id="page">
<div class="scrollable">
<ul class="navi"> <!--aqui esta la lista-->
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
<li><a>7</a></li>
<li><a>8</a></li>
<li><a>9</a></li>
<li><a>10</a></li>
<li><a>11</a></li>
<li><a>12</a></li>
<li><a>13</a></li>
<li><a>14</a></li>
</ul> <!--aqui acaba la lista-->
<br clear="all"/>
<a class="prev"></a>
<div class="items">
<?
$link = mysql_connect("localhost", "root");
$connect=mysql_select_db("deporte",$link);
$consulta=mysql_query("SELECT * FROM videos");
$i=0;
while($datos=mysql_fetch_array($consulta)){
$array[$i][Nombre]=$datos[Nombre];
$array[$i][Ruta]=$datos[Ruta];
$array[$i][descripcion]=$datos[descripcion];
$i++;
}
$i=0;
while(isset($array[$i])){
?>
<div>
<a class="flowplayer" href="<? echo $array[$i][Ruta] ?>">
<img src="img/bo.jpg" />
</a>
<h2><? echo $array[$i][Nombre] ?></h2>
<p>
<? echo $array[$i][descripcion] ?>
</p>
</div>
<?
$i++;
}
?>
</div>
<a class="next"></a>
</div>
<br clear="all" />
<br />
</div>
</body>
</html>
common.css Código PHP:
body {
background-color:#777;
font-family:"trebuchet ms", verdana, "bitstream vera sans";
padding:0;
margin:0;
text-align:center;
}
#page {
width:600px;
background-color:#fff;
margin:0px auto;
padding:20px 150px 20px 50px;
min-height:600px;
border:1px solid #000;
border-width:0 1px 1px 1px;
text-align:left;
}
h1 {
font-size:22px;
letter-spacing:-1px;
color:#0d7b7a;
font-weight:normal;
}
h1 em {
font-style:normal;
color:darkorange;
}
h2 {
font-size:18px;
font-weight:normal;
}
.less {
color:#999;
font-size:12px;
}
scrollable-view.css Código PHP:
/* player dimensions */
a.flowplayer, a.flowplayer img {
display:block;
border:0;
width:250px;
height:180px;
margin-right:15px;
float:left;
}
/* play button on top of splash image */
div.playButton {
background:url(../img/play.png) no-repeat;
width:45px !important;
height:45px;
position:relative;
top:-115px;
left:105px;
margin-bottom:-50px;
opacity:0.9;
}
div.playButton:hover {
opacity:1.0;
}
/* items */
div.scrollable {
margin-left:-30px;
}
div.items {
height:180px;
float:left;
width:470px;
background-color:#efefef;
border:1px solid #ddd;
}
div.items div {
width:470px;
}
div.scrollable div {
float:left;
overflow:scroll;
}
div.scrollable h2 {
margin-top:15px;
}
div.scrollable p {
color:#444;
font-size:11px;
margin-right:15px;
}
/* next / prev buttons */
a.prev, a.next {
display:block;
width:30px;
height:30px;
float:left;
background-repeat:no-repeat;
margin-top:70px;
}
a.prev {
background:url(../img/button-left.gif);
margin-right:10px;
}
a.prev:hover {
background:url(../img/button-left-over.gif);
}
a.next {
background:url(../img/button-right.gif);
margin-left:10px;
}
a.next:hover {
background:url(../img/button-right-over.gif);
}
/* tabs */
ul.navi {
margin:20px 0 0 0 ;
padding:0px;
height:80px;
position:relative;
top:10px;
left:39px;
width:470px;
overflow:scroll;
display:block;
}
ul.navi li {
background:url(../img/tab-left.gif) left top no-repeat;
padding-left:4px;
float:left;
margin:0;
list-style-type:none;
}
ul.navi a {
background:url(../img/tab-right.gif) right top no-repeat;
padding:3px 12px;
border-bottom:1px solid #D2D2D2;
text-decoration:none;
display:block;
color:#333;
font-size:13px;
}
ul.navi li.active a, ul.navi a:hover {
background-position:100% -150px;
border-bottom:1px solid #fff;
}
ul.navi li.active {
background-position:0 -150px;
}