Foros del Web » Creando para Internet » Diseño web »

jQuery.imageMenu por paginacion

Estas en el tema de jQuery.imageMenu por paginacion en el foro de Diseño web en Foros del Web. Hola que tal... Tengo una nueva idea, espero me puedan ayudar nuevamente En un post abierto por Triby (te lo agradesco una vez mas ) ...
  #1 (permalink)  
Antiguo 06/02/2009, 22:10
Avatar de JoseAlejandro_Realza  
Fecha de Ingreso: agosto-2008
Ubicación: Maracay - Venezuela
Mensajes: 192
Antigüedad: 9 años, 4 meses
Puntos: 2
jQuery.imageMenu por paginacion

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 
$connectmysql_connect("localhost","usuarios","contraseña");

//Seleccionamos la base 
mysql_select_db("enmaraca_artistas",$connect);

//hacemos las consultas 
$resultamysql_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>
__________________
Tu Guía Empresarial http://www.empresarial.org.ve Soluciones Empresariales

Atte: José Alejandro Realza
  #2 (permalink)  
Antiguo 07/02/2009, 16:22
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: jQuery.imageMenu por paginacion

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.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 07/02/2009, 17:10
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: jQuery.imageMenu por paginacion

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.
__________________
- León, Guanajuato
- GV-Foto
  #4 (permalink)  
Antiguo 07/02/2009, 23:32
Avatar de JoseAlejandro_Realza  
Fecha de Ingreso: agosto-2008
Ubicación: Maracay - Venezuela
Mensajes: 192
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: jQuery.imageMenu por paginacion

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 
$connectmysql_connect("localhost","usuarios","contraseña");

//Seleccionamos la base 
mysql_select_db("enmaracay_artistas",$connect);

//hacemos las consultas 
$resultamysql_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 
$connectmysql_connect("localhost","usuarios","contraseña");

//Seleccionamos la base 
mysql_select_db("enmaracay_artistas",$connect);

//hacemos las consultas 
$resultamysql_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 =)
__________________
Tu Guía Empresarial http://www.empresarial.org.ve Soluciones Empresariales

Atte: José Alejandro Realza
  #5 (permalink)  
Antiguo 08/02/2009, 16:20
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: jQuery.imageMenu por paginacion

Estupendo, ya quiero verlo en accion
__________________
- León, Guanajuato
- GV-Foto
  #6 (permalink)  
Antiguo 08/02/2009, 19:28
Avatar de JoseAlejandro_Realza  
Fecha de Ingreso: agosto-2008
Ubicación: Maracay - Venezuela
Mensajes: 192
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: jQuery.imageMenu por paginacion

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
__________________
Tu Guía Empresarial http://www.empresarial.org.ve Soluciones Empresariales

Atte: José Alejandro Realza
  #7 (permalink)  
Antiguo 09/02/2009, 13:51
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: jQuery.imageMenu por paginacion

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.
__________________
- León, Guanajuato
- GV-Foto
  #8 (permalink)  
Antiguo 09/02/2009, 14:46
Avatar de JoseAlejandro_Realza  
Fecha de Ingreso: agosto-2008
Ubicación: Maracay - Venezuela
Mensajes: 192
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: jQuery.imageMenu por paginacion

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
__________________
Tu Guía Empresarial http://www.empresarial.org.ve Soluciones Empresariales

Atte: José Alejandro Realza
  #9 (permalink)  
Antiguo 09/02/2009, 16:13
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: jQuery.imageMenu por paginacion

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.
__________________
- León, Guanajuato
- GV-Foto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:30.