jQuery.imageMenu por paginacion

JoseAlejandro_Realza · #1 (**permalink**) 06/02/2009, 22:10

Hola que tal... Tengo una nueva idea, espero me puedan ayudar nuevamente

En un post abierto por Triby (te lo agradesco una vez mas

) donde se hace una pequeña aplicacionen jQuery con menu de imagenes, y quisiera saber si puedo generar los datos saliendo de una consulta hecha por el php, intente con el siguiente condigo y me genera error.

Codigo:

Código PHP:

 
<!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="es" lang="es"> 
<head> 
    <title>Prueba de menu vertical</title> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
body { background-color:#ccc; } 
#vmarks { 
        margin:0px; 
        padding:1px; 
        width:175px; 
        height:400px; 
        background:#616161; 
        list-style:none; 
        overflow:hidden; 
} 
#vmarks li { 
        width:175px; 
        height:43px; 
    margin:0px; 
    padding:0px; 
        border-top:1px solid #fff; 
        border-bottom:1px solid #fff; 
} 
#vmarks li .menuOptionHover, #vmarks li a { 
        display:block; 
        width:175px; 
        height:100px; 
        text-indent:-8000px; 
} 
#vmarks-1 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_1.jpg); } 
#vmarks-2 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_2.jpg); } 
#vmarks-3 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_4.jpg); } 
#vmarks-4 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_3.jpg); } 
#vmarks-5 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_1.jpg); } 
#vmarks-6 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_2.jpg); } 
#vmarks-7 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_4.jpg); } 
#vmarks-8 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_3.jpg); } 
</style> 
    <script src="jquery.js" type="text/javascript"></script> 
    <script src="jquery.imageVert.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#vmarks').ImageVert({'saveOnClick':false,'keepOpen':false,'init':-1,'click':myClick}); 
    function myClick(e) { 
        document.location = e; 
    } 
}); 
</script> 
</head> 
<body> 
 
<p> 
  <?  
//conectamos a la base  
$connect= mysql_connect("localhost","usuarios","contraseña"); 
 
//Seleccionamos la base  
mysql_select_db("enmaraca_artistas",$connect); 
 
//hacemos las consultas  
$resulta= mysql_query("select * from generos order by generos Desc", $connect);  
$totalregistros=mysql_num_rows($resulta); 
$dato = array(); 
while($row=mysql_fetch_array($resulta))  
    $dato[] = $row; 
{  
 
 
} 
?> 
</p> 
<p> 
  <?  
// Aqui muestras las imagenes: 
foreach($dato as $datos) { 
    echo "<ul id=\"vmarks\">\n"; 
    echo  "<li><a href=\"index.php?id=Artistas=genero&{$datos['generos']}\" id=\"vmarks-1\">{$datos['generos']}</a></li>\n" 
    echo "</ul>\n"; 
} 
?> 
</p> 
 
</body>

Triby · #2 (**permalink**) 07/02/2009, 16:22

Que es lo que te genera error?, algun mensaje especifico?

Solo como nota, jquery.imageVert.js no esta en fase de desarrollo (ni siquiera hay una version alfa), porque el cliente se decidio por otras opciones que le presente, ademas de que no subi las modificaciones para solucionar el tema de posicion en IE y el estado inicial en IE 6.

Triby · #3 (**permalink**) 07/02/2009, 17:10

Me estoy mareando viendo los diferentes temas en los que has preguntado lo mismo de esto, te parece bien si continuamos sobre este?

Creo entender que lo que necesitas es cambiar las imagenes a usar, de acuerdo a los resultados de la base de datos. Bien, eso es facil, no necesitariamos definir las ID en CSS:

Código:

#vmarks-1 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_1.jpg); }
#vmarks-2 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_2.jpg); }
#vmarks-3 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_4.jpg); }
#vmarks-4 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_3.jpg); }
#vmarks-5 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_1.jpg); }
#vmarks-6 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_2.jpg); }
#vmarks-7 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_4.jpg); }
#vmarks-8 { background:url(http://www.enmaracay.net/Galerias/don%20omar/s_3.jpg); }

Todo eso sale sobrando, porque las vas a aplicar directamente en el link:

Código PHP:

  // Aqui muestras las imagenes:
foreach($dato as $datos) {
    echo "<ul id=\"vmarks\">\n";
    echo  "<li><a href=\"index.php?id=Artistas=genero&{$datos['generos']}\" style=\"background:url({$datos['imagen_fondo']})\">{$datos['generos']}</a></li>\n"
    echo "</ul>\n";
}
?>

No lo he probado, pero debiera funcionar para cambiar los fondos.

JoseAlejandro_Realza · #4 (**permalink**) 07/02/2009, 23:32

Muchisimas Gracias, ya lo modifique todo y lo hice mas exacto de lo que queria, como estoy re-diseñando mi pagina quiero hacerla mas dinamica poco a poco voy agregandole a un Panel de Administracion opciones que faciliten la creacion de paginas y resultados por medio de php css y base de datos sin necesidad de estar programando paginas, y cree algo para que las url de las imagenes salgan de una base de datos tambien.

Edite un poco el codigo CSS y lo deje en una pagina externa pero en extension php, y alli ejecuto una consulta a la base de datos de donde voy a extraer las url, el codigo quedo de la siguiente manera:

Código PHP:

  <?  
//conectamos a la base  
$connect= mysql_connect("localhost","usuarios","contraseña"); 
 
//Seleccionamos la base  
mysql_select_db("enmaracay_artistas",$connect); 
 
//hacemos las consultas  
$resulta= mysql_query("select * from generos order by generos Desc", $connect);  
$totalregistros=mysql_num_rows($resulta); 
$dato = array(); 
while($row=mysql_fetch_array($resulta))  
    $dato[] = $row; 
{  
 
 
} 
?> 
<style type="text/css">" 
"body { background-color:#ccc; } 
#vmarks { 
        margin:0px; 
        padding:1px; 
        width:200px; 
        height:320px; 
        background:#616161; 
        list-style:none; 
        overflow:hidden; 
} 
#vmarks li { 
        width:200px; 
        height:40px; 
    margin:0px; 
    padding:0px; 
        border-top:1px solid #fff; 
        border-bottom:1px solid #fff; 
} 
#vmarks li .menuOptionHover, #vmarks li a { 
        display:block; 
        width:200px; 
        height:100px; 
        text-indent:-8000px; 
} 
<? 
foreach($dato as $datos) { 
    echo "#vmarks-{$datos['id']} { background:url(".$datos['imagen']."); }\n"; 
 
} 
?> 
</style>

Posteriomente hice la pagina donde voy a imprimir los datos para crear la galeria con el jQuery, intengrando el style css de la pagina anterior, agregandole una paginacion de igual forma para que los datos del #vmarks sean los mismos del css

Index.php

Código PHP:

  <? 
include("style-menu-artistas.php"); //aca estoy incluyendo el style proveniente de la pagina 
//php donde insertamos el style CSS 
?> 
 
<!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="es" lang="es"> 
<head> 
    <title>Prueba de menu vertical</title> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <script src="jquery.js" type="text/javascript"></script> 
    <script src="jquery.imageVert.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#vmarks').ImageVert({'saveOnClick':false,'keepOpen':false,'init':-1,'click':myClick}); 
    function myClick(e) { 
        document.location = e; 
    } 
}); 
</script> 
</head> 
<body> 
//aca estoy haciendo la otra consulta para generar los mismos numeros por medio del id de la  
//base de datos y asi sean igual a los del css y pueda mostrar las imagenes 
<?  
$edit = "http://www.enmaracay.net/buttons/right.gif"; 
//conectamos a la base  
$btn = "http://www.enmaracay.net/data/btn-activo.png"; 
//conectamos a la base  
$connect= mysql_connect("localhost","usuarios","contraseña"); 
 
//Seleccionamos la base  
mysql_select_db("enmaracay_artistas",$connect); 
 
//hacemos las consultas  
$resulta= mysql_query("select * from generos order by generos Desc", $connect);  
$totalregistros=mysql_num_rows($resulta); 
$dato = array(); 
while($row=mysql_fetch_array($resulta))  
    $dato[] = $row; 
{  
 
 
} 
?> 
<ul id="vmarks"> 
//aca estoy haciendo la consulta de la base de datos y mandando a imprimir todos los datos  
//que resulten de las variables que estoy buscando segun mi consulta 
<?  
// Aqui muestras las imagenes: 
foreach($dato as $datos) { 
    echo "<li><a href=\"index.php?id=padin&genero={$datos['generos']}\" id=\"vmarks-{$datos['id']}\">Fisher &amp; Yonger</a></li>\n"; 
 
} 
?> 
</ul> 
</body> 
</html>

Bueno espero sea de gran ayuda para muchos... Triby Gracias por todo, y dime que te parece esta logica y si cree hay forma de mejorarlo seria mucho mejor =)

Triby · #5 (**permalink**) 08/02/2009, 16:20

Estupendo, ya quiero verlo en accion

JoseAlejandro_Realza · #6 (**permalink**) 08/02/2009, 19:28

Bueno Triby aun lo estoy trabajando para cosas del diseño y como voy a dejar el resultado del browser, pero aca puedes ver un ejemplo de mas o menos lo que estoy buscando http://www.enmaracay.net/index.php?id=Artistas, espero sugerencias y criticas

Triby · #7 (**permalink**) 09/02/2009, 13:51

Tienes algunos errorcillos:

1- Importas 3 veces los estilos del menu (@import)
2- El ancho de los contenedores del menu es mayor que las imagenes.
3- Al abrir en FF 3 el menu se ve muy largo (alto), con la ultima opcion siempre abierta.
4- Al pasar el mouse sobre alguno de los elementos se va ajustando la altura y hay que pasar sobre varias opciones para que finalmente esto ya no se mueva.

JoseAlejandro_Realza · #8 (**permalink**) 09/02/2009, 14:46

Mmm si, eso lo tengo presente, en un rato que llegue a mi trabajo comienzo a acomodar el diseño porque no ira asi, mi pregunta es porque lo que coloco debajo del menu no se muestra :S, no aparece, solo aparece el munu, amenos que lo inserte en tablas diferentes

Triby · #9 (**permalink**) 09/02/2009, 16:13

Ups, hay un desorden con el codigo, por ejemplo definicion de estilos en el cuerpo del mensaje, asi como mas etiquetas <body>, <html>, etc... primero define que es lo que usaras realmente, elimina el codigo que no sirva (o no uses) y despues ya tratas de solucionar lo demas.