Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Mostrar imagenes

Estas en el tema de Mostrar imagenes en el foro de Frameworks JS en Foros del Web. Bueno nose si entiendan muy bien lo que pasa es que estoy utilizando php con el frameworks codeigniter para mostrar los nombres de los usuarios ...
  #1 (permalink)  
Antiguo 11/05/2012, 14:08
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 10 años, 8 meses
Puntos: 11
Mostrar imagenes

Bueno nose si entiendan muy bien lo que pasa es que estoy utilizando php con el frameworks codeigniter para mostrar los nombres de los usuarios en una tabla bueno lo que pasa es que el div tiene escondido un campo que se llama foto entonces cuando el visitante de la web pasa el mouse por ensima del div se tiene que mostrar la foto del usuario (Tomando en consideracion que esto se hace con foreach entonces los div se repiten sucesivamente y son muchos div todos con el campo foto ocualto)

Bueno aqui el codigo para que lo entiendan
Código PHP:
<section id="perfiles">

<?php foreach($dis as $d): ?>
    
    <article id="usuario">
        <?php echo anchor('user/'.$d->usuario,$d->nombre.' '.$d->apellido,array('class' => 'nombre')); ?>
        <p id="user">Usuario: <?php echo $d->usuario?></p>
        <p id="yo">Es Diseñador</p>

        <div id="foto" style="display:none;"><img src="<?php echo base_url(); ?>css/image/fotosuser/<?php echo $d->foto?>" width="100" height="100" ></div>

    </article>

<?php endforeach; ?>

</section>
ese es el codigo php si se fijan el div foto tiene display none y el article id usuario se repite hasta que se terminen los usuarios

Entonces yo tengo con jquery lo siguiente para que al pasar el mouse por ensima del article se visualice el campo foto

Código Javascript:
Ver original
  1. $(document).on("ready", function(){
  2.        $('#usuario').mouseover(function(){
  3.            
  4.                      $('#foto').fadeIn(500);
  5. });
  6. });

PERO EL PROBLEMA ES QUE CUANDO LE PONGO EL MOUSE ENSIMA AL DIV ID = USUARIO SOLO ME MUESTRA LA FOTO DEL PRIMER USUARIO Y SI LE PONGO EL MOUSE ENSIMA A OTRO USUARIO ME SIGUE MOSTRANDO SOLO LA FOTO DEL PRIMER USUARIO
  #2 (permalink)  
Antiguo 11/05/2012, 14:19
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.100
Antigüedad: 13 años, 5 meses
Puntos: 165
Respuesta: Mostrar imagenes

Estas usando el mismo id para todos los usuarios... un id es único tendrías que usar un class y por ejemplo, encontrar la foto con children

Código PHP:
Ver original
  1. <section id="perfiles">
  2.  
  3. <?php foreach($dis as $d): ?>
  4.      
  5.     <article class="usuario">
  6.         <?php echo anchor('user/'.$d->usuario,$d->nombre.' '.$d->apellido,array('class' => 'nombre')); ?>
  7.         <p class="user">Usuario: <?php echo $d->usuario; ?></p>
  8.         <p class="yo">Es Diseñador</p>
  9.  
  10.         <div class="foto" style="display:none;"><img src="<?php echo base_url(); ?>css/image/fotosuser/<?php echo $d->foto; ?>" width="100" height="100" ></div>
  11.  
  12.     </article>
  13.  
  14. <?php endforeach; ?>
  15.  
  16. </section>


Código Javascript:
Ver original
  1. $(document).on("ready", function(){
  2.        $('.usuario').mouseover(function(){
  3.               $(this).children('.foto').fadeIn(500);
  4.        });
  5. });
__________________
Gracias por el Karma :D

empleo ofertas de trabajo
  #3 (permalink)  
Antiguo 11/05/2012, 14:30
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 10 años, 8 meses
Puntos: 11
Respuesta: Mostrar imagenes

Para que es el chlidren ?? es que estoy recien aprendiendo jquery estoy leyendo un manual y voy recien en la mitad acabo de empezar a leer lo de los metodos y esas cosas para que es el children ?
  #4 (permalink)  
Antiguo 11/05/2012, 17:53
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 10 años, 6 meses
Puntos: 32
Respuesta: Mostrar imagenes

$elementoPadre.children(".foto") es para encontrar un elemento dentro del contexto en el que se ejecuta, es lo mismo que usar $elementoPadre.find(".foto") o $(".foto", elementoPadre), saludos!!!
  #5 (permalink)  
Antiguo 12/05/2012, 08:18
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.100
Antigüedad: 13 años, 5 meses
Puntos: 165
Respuesta: Mostrar imagenes

Pues básicamente children es para seleccionar elementos que son hijos del elemento selector.

Por ejemplo:

<ul><li><span>Text</span></li></ul>

li es children de ul, span es hijo de li y de ul

Entiendes?

Un saludo!
__________________
Gracias por el Karma :D

empleo ofertas de trabajo
  #6 (permalink)  
Antiguo 12/05/2012, 12:12
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 10 años, 8 meses
Puntos: 11
Respuesta: Mostrar imagenes

Si muchas gracias
  #7 (permalink)  
Antiguo 12/05/2012, 12:13
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 10 años, 8 meses
Puntos: 11
Respuesta: Mostrar imagenes

Pero tengo otro problema el elemento al aparecer pestañea y aun que no saque el mouse de el div padre que seria el class="usuario" sigue pestañando me han dicho que le ponga z-index 999 pero no funciona sigue pestañando
  #8 (permalink)  
Antiguo 12/05/2012, 12:19
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.100
Antigüedad: 13 años, 5 meses
Puntos: 165
Respuesta: Mostrar imagenes

No entiendo a que te refieres, puedes colgar el ejemplo,

Un saludo!
__________________
Gracias por el Karma :D

empleo ofertas de trabajo
  #9 (permalink)  
Antiguo 12/05/2012, 14:27
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 10 años, 8 meses
Puntos: 11
Respuesta: Mostrar imagenes

Mira tengo este codigo:
jquery
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.  
  3.        $("article.usuario").mouseover(function(evento){
  4.               if($(this).offset().left < 250)
  5.               {
  6.                      $(this).children('.foto').css({
  7.                             'left': ($(this).offset().left - 130) + "px",
  8.                             'top' : $(this).offset().top,
  9.  
  10.                      });
  11.  
  12.               }else{
  13.                      $(this).children('.foto').css({
  14.                             'left': ($(this).offset().left + $(this).innerWidth() + 10) + "px",
  15.                             'top' : $(this).offset().top,
  16.    
  17.                      });
  18.               }
  19.   $(this).children('.foto').fadeIn(500);
  20.  
  21.  
  22.        });
  23.        $("article.usuario").mouseout(function(evento){
  24.                       $(this).children('.foto').css({
  25.                             'display': 'none',
  26.                      });
  27.        });
  28. });
y el codigo html con php
Código PHP:
Ver original
  1. <section id="perfiles">
  2.  
  3. <?php foreach($dis as $d): ?>
  4.    
  5.     <article class="usuario">
  6.         <?php echo anchor('user/'.$d->usuario,$d->nombre.' '.$d->apellido,array('class' => 'nombre')); ?>
  7.         <p id="user">Usuario: <?php echo $d->usuario; ?></p>
  8.         <p id="yo">Es Diseñador</p>
  9.  
  10.         <div class="foto"><img src="<?php echo base_url(); ?>css/image/fotosuser/<?php echo $d->foto; ?>" width="100" height="100" ></div>
  11.  
  12.     </article>
  13.  
  14. <?php endforeach; ?>
  15.  
  16. </section>

Si te fijas al pasar el mouse por el article usuario se muestra la capa foto y si es e se saca el mouse de la capa usuario se esconde la capa foto, ¿ cierto ?

Bueno hasta ahí el codigo esta perfecto pero el problema es que si es que pasa el mouse por la etiqueta P que hay adentro de la capa usuario osea no tendria por que desaparecer la capa foto pero no es haci desaparece y aparece de nuevo y pasa lo mismo con todas las etiquetas que ahy adentro de la capa usuario , si paso el mouse por cualquier etiqueta que este dentro de la capa usuario la capa foto desaparece y aparece de nuevo como dije como que pestañea no se por que pasa
  #10 (permalink)  
Antiguo 13/05/2012, 01:49
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 10 años, 6 meses
Puntos: 32
Respuesta: Mostrar imagenes

Haa ya entendi, sucede que esos eventos se propagan y todos los elementos dentro de el tambien activan el mouseout y mouseover.

Mira hay algunos trucos para solucionarlo, pero ya que estas usando jQuery, no hay nada mejor que usar estos metodos que estan pensados justamente para lo que te sucede.

En vez de usar mouseover, usa "mouseenter" y en vez de mouseout usa "mouseleave".

Saludos!
  #11 (permalink)  
Antiguo 13/05/2012, 12:20
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 10 años, 8 meses
Puntos: 11
Respuesta: Mostrar imagenes

Muchas Muchas gracias me ha servido de maravilla XD
  #12 (permalink)  
Antiguo 14/05/2012, 00:38
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 10 años, 6 meses
Puntos: 32
Respuesta: Mostrar imagenes

= ) ..........

Etiquetas: jquery
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 14:26.