Bueno aquí os dejo los Códigos:
NOTA: He vuelto a sustituir las tres w y el protocolo h t t p, por asteriscos:
File: videos.asp
Código asp:
Ver original<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "****://***.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="****://***.w3.org/1999/xhtml">
<head>
<meta ****-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>videos</title>
<!-- Scripts -->
<script type="text/javascript" src="****://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.youtubeplaylist.js"></script>
<script type="text/ecmascript">
$(function() {
$("div#demo").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'video'});
});
</script>
<!-- Estilos -->
<link type="text/css" rel="stylesheet" href="css/aspviga.css" />
</head>
<!-- ////////////////////////////////////////////////// START ///////////////////////////////////////////////////////// -->
<body>
<!-- Universal -->
<div id="container">
<div id="pag_n_up"></div>
<div id="pag_n_mid">
<!-- -->
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<%
' Variables.
Dim SQL, oConn, RS
Dim v_id, v_link, v_titulo, v_seccion, v_describe
Dim Salto
'Asigno Variables.
v_id = "v_id"
v_link = "v_link"
v_titulo = "v_titulo"
v_seccion = "v_seccion"
v_describe = "v_describe"
salto = Replace (cadena, vbCrLf, "<BR>")
%>
<!-- VIDEOS -->
<div id="master">
<div id="visor">
<div id="video"></div>
</div>
<div id="selector">
<div>
<%
'Creamos la conexión a la base de datos sin DSN
Set oConn=Server.CreateObject("ADODB.Connection")
'Conexión BASE DE DATOS ----- por OLEDB
oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("./db/xxx.mdb")&";" '
'Ejecutamos la SELECT SQL.
SQL = "SELECT * FROM videos ORDER BY v_id DESC"
'Creo un Recordset y ejecutamos la orden.
Set RS = oConn.Execute(SQL)
'Recorre todas las filas del resultado
Do While Not RS.EOF
' Muestra la fila actual
%>
<div id="caja">
<div id="demo">
<p><a href="<% Response.Write(RS.Fields(v_link)) & vbCrlf %>"></a></p>
</div>
<div id="propiedades">
<ul>
<li><strong>Video: </strong><span class="pist"><% Response.Write(RS.Fields(v_id)) %>º</span></li>
<li><strong>Sección: </strong><span class="pist"><% Response.Write(RS.Fields(v_seccion)) %></span></li>
<li><strong>Titulo: </strong><span class="pist"><% Response.Write(RS.Fields(v_titulo)) %></span></li>
</ul>
</div>
<div id="descripcion">
<p><% Response.Write(RS.Fields(v_describe)) %></p>
</div>
</div>
<!-- Hack para Hacer el salto de pagina. -->
<!-- Si no pongo los Br se quedan todas las cajas en una unica posicion -->
<br /><br /><br /><br /><br /><br /><br />
<%
'Pasa a la siguiente fila
RS.MoveNext
Loop
%>
</div>
</div>
</div>
<!-- VIDEOS -->
<%
'Libera memoria
RS.Close
Set RS = Nothing
oConn.Close
Set oConn = Nothing
'Cerramos variables
Set v_link = Nothing
Set v_titulo = Nothing
Set v_seccion = Nothing
Set v_describe = Nothing
'FIN.
%>
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- -->
</div>
<div id="pag_n_down"></div>
</div>
<!-- // Universal -->
</body>
<!-- /////////////////////////////////////////////////// END ///////////////////////////////////////////////////////// -->
</html>
Este es el File aspviga.css.
Código css:
Ver original/* CSS Document */
/* UNIVERSALES PAGINAS */
#container {
padding:0px;
margin:0px;
position:relative;
margin:0px auto;
width:810px;
height:600px;
min-height:500px;
float:left;
}
#pag_n_up {
padding:0px;
margin:0px;
position:relative;
background: url(img/pag_n_up.png) no-repeat;
width:810px;
height:5px;
}
#pag_n_mid {
padding:0px;
margin:0px;
position:relative;
background: url(img/pag_n_mid.png) repeat-y;
width:810px;
height:550px;
}
#pag_n_down {
padding:0px;
margin:0px;
position:relative;
background: url(img/pag_n_down.png) no-repeat;
width:810px;
height:5px;
}
/* VISOR VIDEOS */
#master {
border:1px solid white;
background:#B2B2B2;
padding:0px;
margin:0px;
position:relative;
margin:5px;
width:800px;
height:420px;
float:left;
}
#video {
}
#visor { /* Este afecta al visualizador principal de los videos */
border:none;
background:;
margin:0px;
padding:10px;
width:500px;
height:400px;
float:left;
position:relative;
}
#selector { /* Este afecta a la lista de videos a reproducir */
border:none;
background:;
margin:0px;
padding:0px;
width:270px;
height:420px;
float:left;
display:block;
position:relative;
overflow-y:scroll;
overflow-x:hidden;
}
#caja {
border:1px outset #B2B2B2;
background:#333333;
margin:5px;
padding:0px;
width:240px;
height:132px;
float:left;
position:absolute;
}
#demo {
border:1px dotted #CCCCCC;
border-right:none;
margin:0px;
padding:0px;
width: 110px;
height:80px;
float: left;
}
#demo p {
margin:0;
padding:0;
}
#demo p a {
}
#demo p img { /* */
border:none;
width:110px;
height:80px;
float: left;
position:absolute;
}
#propiedades { /* */
background: #333333;
margin:0px;
padding:0px;
width: 122px;
height:80px;
float: left;
position:relative;
}
#propiedades ul {
border:1px dotted #CCCCCC;
border-left:none;
margin:0;
padding:9px 3px 3px 6px;/* arriba - derecha - abajo - izquierda */
width: 119px;
height:68px;
position:absolute;
}
#propiedades ul li {
font-family: Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.2em;
text-align:left;
color:#F0F0F0;
float:left;
list-style-type: none;
list-style:none;
}
#descripcion {
border:1px outset #CCCCCC;
background:#F0F0F0;
margin:0px;
padding:1px 4px 1px 4px;/* arriba - derecha - abajo - izquierda */
width: 230px;
height:46px;
font-family: Arial, Helvetica, sans-serif;
font-size:0.8em;
line-height:1.2em;
text-align:left;
float: left;
}
#descripcion p {
margin:0;
padding:0;
width: 228px;
height:46px;
position:absolute;
}
.pist {
color: #CCFF00;
}
.currentvideo {
background: #e6e6e6;
}
/* FIN */