Problemas con Jquery y Base de datos.

designostico · #1 (**permalink**) 28/08/2009, 08:04

Hola señores, tengo un problemilla con una galería. El problema es el siguiente:
Tengo una capa con miniaturas que llama a un iframe y pasa un id, con el cual hago un filtro en la pagina que se carga en el iframe.

Tanto en las miniaturas como en la pagina que carga el iframe he querido hacer efectos de opacidad con jquery pero primero se me cargan las imágenes y luego el efecto. De hecho en la pagina que carga el iframe no me deja hacer un fadeIn porque ya esta la foto cargada. Mi código es bien simple.

Miniaturas:

Código:

<script type="text/javascript">

$(document).ready(function(){

$("li").fadeTo("slow", 0.3);


$("li").hover(function(){
 	$(this).fadeTo(100, 1.0); 
 },function(){
 	$(this).fadeTo(100, 0.3); 
}); 
	 
});
</script>

Pagina de Iframe:

Código:

<script type="text/javascript">

$(document).ready(function(){

	$('#img').fadeIn(2000);
});

</script>

Espero que me haya explicado correctamente y pudierais ayudarme. Un saludo.

P.D.: Por cierto, si alguien sabe como dejar con la opacidad al 100% cuando pincho en una miniatura y quitarla cuando pincho en otra con un código facilito pues de muerte. Gracias.

mayid · #2 (**permalink**) 02/09/2009, 11:39

Me cuesta responderte si no tengo la pagina completa como para mirar el codigo funcionando.

Para lo de los botones, no hay dificultad.
botones = $("#menu_ li a"); // todos los botones, que van a recorrerse uno a uno con each

jQuery.each(botones, function(boton) {

boton.click( function (){
$("li").fadeTo(100, 1.0); // quitas opacidad a todo
$(this).fadeTo(100, 0.3); // inmediatamente se la adjudicas a este
})

})

mayid · #3 (**permalink**) 02/09/2009, 11:44

En cuanto a la opacidad, tene en cuenta esto:

$(document).ready(function(){ // con ready estas diciendo que tu codigo va a esperar hasta el final de los llamados.

$("li").fadeTo("slow", 0.3); // para cuando se ejecute esto, ya las miniaturas habras sido llamadas.

Esta ok haber llamado las miniaturas antes, porque de otra manera no podrias hacerle nada con javascript. En cambio, con css si podrias anticiparte.
Pero no te estoy dando ninguna respuesta. No puedo si no veo tu pagina.
Ademas no estas publicando el codigo de la llamada, sino el de los botones ("li"), verdad?

designostico · #4 (**permalink**) 08/09/2009, 10:04

Si, a ver mi codigo es este:

Código:

<?php do { ?>
      <li id="mini"><a href="foto.php?id=<?php echo $row_Recordset1['id']; ?>" target="foto">
            <img width="100" src="
	<? if(file_exists($row_Recordset1['mini']))
	{
		echo $row_Recordset1['mini'];
	}
	else
	{
	echo "img/defecto.jpg";
	}
	?>"></a></li>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?></ul>

Estoy haciendo una repetición a traves de php de la base de datos.
Y en la foto del frame a la que llaman cada repetición este otro:

Código:

<head>
   <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){ 
       (Intentos multiples de opacidad)
   })(jQuery);
   </script>
(consulta base de datos)
</head>
<body>
<div id="foto"><img id="img" src="
                             <? if(file_exists($row_foto['foto']))
		{
		echo $row_foto['foto'];
		}
		else
		{
		echo " fotos/defecto.jpg ";
		}
		?>" /></div>
    </div>
</body>

Espero ser lo suficientemente claro. Gracias por contestar. Un cordial saludo.
He probado tu codigo de la miniaturas pero se me ponen todas con opacidad al 100%.

mayid · #5 (**permalink**) 08/09/2009, 18:06

Con jQuery, puede que haya desincronizacion. Al menos yo no pude solucionarlo a veces.

Hay una manera puramente en css de poner opacidad. Son tres renglones, y de hecho jQuery no hace mas que darnos una funcion como para adjudicar esa css. Poniendo una clase que atribuya esa opacidad te anticiparia la transparencia a la carga de la foto:

.difusa {-moz-opacity:.30;filter:alpha(opacity=30);opacity:.30}

En jQuery das:
$("li").removeClass('difusa');
$(this).addClass('difusa');

Cambiando totalmente el enfoque, podes usar un filtro .png para dar opacidad. Es decir, una foto con transparencia. Yo uso eso cuando no quiero opacidad heredada.

designostico · #6 (**permalink**) 10/09/2009, 03:46

Ok, muchas veces saber el código te ayuda a darle las vueltas a la práctica. Gracias por la ayuda y un cordial Saludo, enhorabuena por el foro que salva vidas.

designostico · #7 (**permalink**) 12/09/2009, 10:01

He hecho lo que me dices me anticipo con css, pero luego no me deja hacer nada con la opacidad en jquery. He probado con fade y con add class. Si tienes alguna solución a esto te lo agradeceria. Gracias.

mayid · #8 (**permalink**) 13/09/2009, 19:54

No entiendo por que no puedes quitar la clase con:

.difusa {-moz-opacity:.30;filter:alpha(opacity=30);opacity:.30}

$("li").removeClass('difusa');

designostico · #9 (**permalink**) 14/09/2009, 11:08

Vale, nose que hice la primera vez que lo intente pero, lo he vuelto a intentar y ahora me sale. Gracias.